Welcome back in this course and in course, we're going to talk about reactivates love seekers like
a real components, love seekers, for example, when you are using, for example, components in reoccurs,
you have to know that we have three phases in a reactivates component.
Like the first phase is the mounting phase.
The second phase is the updating phase, and the third phase is the amounts in phase.
OK, and in this session, in these cars, in this lesson, we are going to treat Colthurst work the
mountain phase, which is the first phase of a component lifecycle, which is OK.
And when you want to months, for example, your components, as you can see here, year on year, OK,
we have our block launches here.
As you can see, we have to view, for example, this our when you want to month, for example, these
components, the first thing he happens is the creation of the components, OK, because we are talking
about the mounting phase.
If you want to mount a component, deforesting halfpence is the creation of your components and the
creation of the components.
Like I said, the aim, the creation of your component happens instead of your construction, because
as you can see, I have told you, you can use directly states like this or you can put your state in
in your construction.
OK, because we have the last the last version of Regius, and it was an obligation to create construction
in your last component.
As you can see, this is the full components.
And while you are using, for example, is for when you are using, for example, for instance, three
components, make sure to create your construction in this.
And in this class, OK, in this class, but the actual nearest things, OK, with the actual religious
version, you don't need to create your own structure in order to put it in inside of it.
You can't you can't directly put it like this, but if you want to display this different process and
make sure to create a construction.
OK, so we are going to create a structure like this.
You know, this view is different from the process, OK, and call your props like this super.
Props like this and let us take our states, we're going to put our stapes, our states in instead of
a.
Construction.
OK.
Because like I said, this is the first thing happens when you are mounting your components.
The first thing happened is the creation of your components and the creation of your components halfpence
instead of your construction.
So reason why I have created this construction site here in order to make a console like, for example,
components creation.
OK, so we are going to put a console log here.
We are going to say.
We're going to see.
The component.
Creation.
I can't let this let us make here.
Leader's speech.
OK, as you can see here, the components creation.
OK, that's means, like I just said, if you want to months a components, the first step is the creation
of your components and the creation of your components happens inside of your construction.
OK, so that's means in the monsoon phase.
The first thing we have is the construction.
OK, so make sure to use a stateful component in order to access new construction.
OK, the first thing is the construction.
And instead of your construction, we have the components creation.
That's means your component is your components and the components is being created.
OK, now that means your we have the components creation inside of your construction.
OK.
And after your component has been created, now we are going to pass to the render function and the
importance of the render function.
The render functions allows us to take these created components and take these created components and
send it to the return function in order to be displayed in our browser.
OK, as you can see after the construction we have the render function.
The render function will take your created components and send it to the return function in order to
be displayed in our brother, which is our DOM.
OK, we take these components.
This creates a component, the render function, the render function.
We take these created components and render them in the DOM by using the written function.
OK, as you can see, it is very simple and very clear.
So I'm going to advise you to add another layer instead of our states.
As you can see, we are going to call this data step.
OK, and the initial in the initial value is going to be equal to one, OK?
The initial will is going to be equal to one.
And here in Insight's, we are going to use the template literal in order to view these different information
like this.
What are you going to say we are going to put away we're going to say
these dot states, we are going to access the state data, which is inside of our state.
We are going to say this state, that state.
OK, that's means we have it here and here.
We're going to say step one, for example, OK, like this.
Yes.
If we put it like this with the current value, which is one, we are going to have step one here.
We're going to have one.
And here we are going to say the components creation, OK?
OK, we have the components creation.
Step one, OK, we are in the phrase yes.
The step one or phase one, OK, the mounting phase, the mounting fees, for example, excuse me,
the mounting fees, which is the first step.
This day, the first phase of our religious lovesickness.
OK, and once your components is created instead of your construction, we are going to recall we are
going to pass now the render function because the render function happens after your components has
been created.
OK, and a render function will take this created components.
OK, take discrete created components and they render these components through the dome via your return
function.
OK, and now if your components is viewed in the browser, OK, we can access the components, the demands
and when we access for example, to the components.
But that means your components is now mount's.
It's OK.
This is the mounting face.
First of all, you have the creation of your components, which happens inside of your structure.
And after your components has been created, you're going to pass the render function and the render
function will take.
This creates the components and they render them to the DOM in order to be displayed to your brother.
And after this, after your components has been displayed, you can now access to the components this
month.
That means your components is mounted.
This is what we call the mounting phase, lack of a components in reality, I love.
OK, I think that it is very simple and very clear.
As I can see.
You can say step or phase, OK, because we are talking in these moments.
We are talking about the mountain phase.
OK, yes.
Let us come here.
And the thing and think happen is let us take all this is the render function, OK?
We are going to display all this process.
OK, step one all the way.
Step one.
Also, we are going to say, for example, they created components like we are going to say they created.
They created components is.
He's in the render function like this, OK, and if we try to make here like you have, you have to
see we have this tape, one that means that the first phase, which is the mountain phase, we have
phase for the creation of the components creation, which is our reconstruction.
And the second thing we have, the render function like they created components is in the arena function,
as you can see, the K lattice.
And then the other thing is when the component is displayed.
OK, let us see orosz.
Our picture here, we have the render function and our component is displayed in these parts here because
the render functions we take the created function like the created components, please, the render
function, we take the created components and render them to the dome.
OK, in order to be displayed in our Bourassa and our components will be displayed here.
OK, this is our dome, as you can see here.
This is our block.
There's a block Bluejays components, this block, there's this clock notice components is displayed
in our brother.
That means we are in these parts like we are in these parts.
React update this dome.
And Rafe's like.
And let us be clear, this is the second and really take all this us all this, and we're going to pass
this inside of or return function like the render functions, take the A function like ains.
It has come here and here we're going to put all the cards behind this because we are inside of it and
we want to Rudd's office for it's called Make Sure to put Auton called RECIST.
And here we are, not in the return function, OK?
The ORENDER takes all these creative components and send it to the brother, send it to the dump in
order to be displayed in the dome via our written function.
OK, as you can see, and now we can see, for example, they created components is displayed because
we are in the written function like these displays like this.
Your component is displayed in the written function.
OK, we are here, OK.
And the render function take only these components and render them to the written function in order
to view which they want to be displayed in the dome.
OK, very simple.
And once your component is displayed, we are going to pass directly in the component did months.
Let us make this work in our browser to see the reaction we have about the display like the components
creation.
This is you can structure the created component is not in the render function and a random function.
Take these created components and send it to the return function in order to be displayed in our brothers.
The reason why you can see we have here the components they created components is displayed OK after
the company they created components has been displayed.
Now we can access to the components these months function.
That means our component is mounted.
OK, let us make.
It is very simple.
Let us be clear and what are you going to say?
We are going to create we are going to call, for example, we are going to call the component did not
function.
And you can read CGM, that is components.
It mounts.
And we are going to put it on like you side here and we're going to say step one.
We are going to say the components is mounted.
The component is mounted like this.