Let us be clear, your counsel, Lloyd Schwartz.
And.
Yes, OK, we have this problem because we are trying to put the component dismounts in instead of the
render function.
So put your component that function outside of our Arain definition, reason why we are we are getting
this problem.
So let us come here.
Just put it before your render function, OK, like this.
And here we're going to say the components is mounted.
Let us be here, let us reload page here.
You can see the components is mounted, OK?
And here you can see, you can see for example.
OK, the first thing we have construction, you can say a.
The first face is the face of Russia, you can say, and we should we must probably have the Sagan console
log in instead of by component Deadman's because the component deadman's comes just after construction.
But it is not the case.
It respects the process like of the face of the mounting face.
You cannot access the components dismounts if you don't access this render function.
Okay, so this is the logic.
First of all, you have construction and then once the component is created in our construction, you
can't access directly to the components.
It will keep these codes and it will take directly the render function in order to display, in order
to render our creative components through the dome and after render after display our components.
Now we can make sure and access to the components dismounts.
That means our components is mounted.
Reason why you can see all this logic.
OK, so here are the components creation.
We have the creative components now.
We are in the render function.
They render function Altec this render to the dome in order to be displayed and areason wide.
After that we have the created component is displayed and after the display we're going to pass to the
last, which is the component is mounted and now we are the components did mount function.
OK, this is the first phase, which is the mounting phase.
And the if we say too big, if we try to back in those days components, let us wait for Israel to see
what we have in our return function.
So this is how we return function.
And here we have our components.
As you can see, we have a tile component, which is timer, OK, because time is another component
which happens in instead of overeaten functions like ends.
Timer needs also to be created because Taimur must be mounted also.
And as we have just said, if you want to mount's, for example, the components, the first thing happens
is the creation.
That means we're going to have the same process of our timer components, so let us come in our timer
that says, OK, we are going to change this type in a glass, in a glass.
The components, OK, are tested three components by using glass because we want also to see OK to test
the same processes that we have in the clock.
Dodgiest, we want to see the same processes also in our time those days.
And we're going to see in Arkansas look what we're going to have a lag reaction.
OK, so let us change these type in glass.
OK, we're going to say a glass timer.
We can't let us remove props.
We going to say extends.
OK, extends components like this.
Extends components, so do not forget to come here and say components like this.
OK, and we have here here we are going to take your return function and put it in the render function.
Yes.
Like this.
Because you want to see all these processes if you want to see all these processes.
Make sure to have a glass components because a hash can see here in these different phases for, for
example, the mounting phase of construction.
Or you can have only the construction in a components having a glass tap and you can only have the room
to function in a components having a glass type.
OK, so reason why makes make sure to sense the stateless component to the stateful components by using
the glass components.
OK, so here what we're going to do here is to exports.
Experts default like these.
Timer like this part timer is we have it and here here are some eerie props where these dots props because
we are using class.
OK, yes.
And here you can see we are in ireton function in order to view our components in the directory directly.
We have it now, the components.
And once we display, for example, our clock Dodgiest Regius Life-cycle, we take these components
and let us get in here.
We are going to create Oricon Structure.
Also like this.
We're going to put props.
And we are going to call the construction of the components glass.
Yes, like this, and we are going to make a consult.
And here we are going to say, let us say here in your site, OK?
And.
Here we are going to see.
It's called component's.
Creation itself, components creation.
Take this same message, we are going to come in instead of a render function before their tongue function
here, we are going to say this, that the third component is.
In the render function, OK, and after that, the third component is going to be displayed in our recent
function.
OK, so this is the importance of render function, take the created components and render them to the
DOM in order to be displayed in our browser by using the written function.
OK, we are going to take all this computer in the political process because we are putting JavaScript
called in instead of 86 instead of the six.
We are going to say the third component is.
Displayed like this, like this.
OK.
And after the display of the charred components, we are going also to pass through the components dismount,
OK, because the third component is now mounted.
You're going to say CGM like this.
Put this consultant here, you're going to say the third component is.
Mounty.
OK, so I'm going to back here and I'm going to reload this page.
OK, so let us see what will happen.
OK, for the first thing, we have the components creation of the parts components, OK, which is which
is the second thing they created component is in the render function.
They render function, render, they created components which is Gloc dodgiest in our dome.
OK, in order to display our components in our browser by using the return function.
OK.
And after that, as you can see, let us notice we have our block OK displayed here after the display.
The process will gerring now in inside of our timer components.
OK, once we're in the timer components, we are going to access our timing components and we are going
to begin the same processes.
But we are now in a timer.
That is reason why we have now the components creation.
So after this return function, as we have in other components, we are not going to access directly
to the components dismounts, which is in the process.
No, we are going to take all processes that we have in the third component.
OK, as you can see, we are going to take Fitzloff for reconstruction because we have the creation
of our components of outside components.
As you can see, console that the components creation.
And after that we are going to keep these components dismounts for the time of death.
OK, we are going to take the render function because after the construction of the render function
and here we are going to say the third component is in the render function.
And after that we are going to display our components.
And after the components has been displayed, we are going to access to the components.
Did most of the components OK?
And after that we are going to come out from Taimur loses components and we are going to back to the
clock bluejays and now we should access the components did most of the parents components.
So let us make sure let us reload this page.
As you can see, we have this for the power, the components creation of the parents components.
The created component is in the render function and the created component is displayed.
And after that it had components creation.
The third component is in there and the function, the third component is displayed, the third component
is mounted.
And then we are going to come out from our retail components and actually power into components when
we say the components is mounted.
So this is the mounting phase in Regius Lifecycle, the mounting phase components in Regius Cycle.
And once we are now in the components deadman's, we can directly access, we can easily access in the
second step access to the second step phase, which is the updating the updating step or the updating
phase.
And now we can use this that that function in order to update, for example, the created components
that we have here in our construction.
OK, and now in the updating phase, we don't have construction because the the component is already
created.
OK, what are we going to do once, for example, we update our components are created components from
our mounting phase.
When we update these components, we are going to use this by using the it's OK because we're going
to see if we want to update, for example, this created components.
We are going to call this function.
Once this component is updated, we are going to call again the render function because the Arenda function
will allow us to take the same components, which is updated to render them to the dome, OK, in order
to be Vuit in our browser.
And then we can access to the component dismounts.
OK, so in the next video we are going to record the second step, which is the updating phase, and
we are going to see a lot of things on this second phase.