It is lesson we are going to Tricorp, the components, and we have to conserve components, first of
all, yes, is Titlist component.
A statelets component is a key component in which we don't have data.
This components allows us to view only the information.
It lets components.
And if you want, for example, to create a statelets components, it is this list components in your
results project.
You're going to use a function and reason why we can also call it statelets components is in functional
components.
And the second type of component, the Siggins kinds of components is distasteful components.
Distasteful components is also call it a glass component.
That means it is components.
We here we can view a message, we can return a message a like the A statelets components, but we can
also a note can also.
But inside of these components we have estates.
Yes, we can also have estates in which we can have data if that's what components means, that it is
a components in which we can store data by using the state because we can use it instead of three different
components are essential components.
And and we have state inside of a state three components which contains data.
So this is the differences between a statelets components in a stateful components in statelets components
does not contain data.
The purpose is only to view information.
A bike, but a distasteful components contain data and can also view information.
So let us come first here and let us see first what's right with this notion.
We are going to grip all these cards and we are going to create a variable here regular named this variable.
I'm going to say lades components I'm going to name these components is going to be equal to this.
And here the thing I'm going to do is to return to take these components variable and load it to the
first parameter of our render function.
I'm going to call components like this and say if I tried to begin our process, really just retries.
Yes.
If we tried in our proselytiser Élodie Page, you're going to see we are going to get the same message
Hillard's.
So we have used it variable.
You can also see, for example, and you can say, OK, you can't declare this is a contest like this,
so let us first remove these.
They just reached for his phone.
And if you try to reload.
You can see it, we have the same thing, you can see lades are cost.
That is.
Very simple.
And the other thing we're going to see, for example, we are going to use a function, we are going
to create these components by using a function, and then we are going to trickle these stateless components,
how to create the statelets components, frazzling pregnancy in some way to create a components function
like this.
And I'm going to name these components.
I'm going to say, for example, function components like this.
Function component in here, I'm going up open mike braces and what I'm going to say, I'm going to
see.
Or see here.
Component.
Yes, because we have created a function with this name.
OK, so no problem.
The thing we're going to do here is that of our function.
We are going to return.
We are going to return a this.
These court, we are going to grab all this and put it in such here like this.
And what's he going to say, we are going to say a cost component here, we're going to say, for example,
cost elements, we are going to Tienes, we are going to say cost elements is going to be equal to this
function, OK?
Is going to be equal to dysfunction.
So we are going to call the component function components like this.
Yes.
And we are going to take these elements and put these elements here and here.
You can see we have created a components, as you can see, by using a function this statelets components
the way we use that.
If you want to create a statelets components, as you can see here, function components are written
and we have already inside and here we declare in elements constants and take all this function and
they affect this function in these elements.
So let us make sure and if we try to reload this page, you will see we are going to get the same thing
you can also patris and plates are called the same thing.
And the other rig and we are going to really we are going to use now and we are going to use now the
way we are going to be using in our project.
We are going to see how to do that.
Instead of using in elements like a variable or a constants like these, we are going to use words we
are going to use during or because what are you going to say?
We are going to come here and this thing you're going to do here, make sure here for this moment to
declare these like these components and put the first letter in uppercase like this and say, what are
you going to say?
We are going to come here and we are going to call our components like this.
You're going to say components.
Is his fiancee.
You take your function head like this and this is a component's, every time you are going to see something
like this, you have to understand that it is a component.
So let us be clear in our vision, in our project.
And if you reloj you're going to see that we are going to have the same thing.
So forget all this variable or this, and this is the way that we are going to be using Idrees.
You can also use, for example, the system of a novelty tag in their clothes and take, you can say
also components like these leaders for.
So for this I'm going to copy suedes.
Where are you going to see?
Components like these.
And the.
Let us be clear and then let us Ryland's, you're going to see we are going to get the same thing.
You can call your components like this or you can use only one take in only one take a close and like
these components.
And then I think that it is because a very simple and the thing we're going to do now is to create a
components, because as you can see, we are still using the index deice.
So our desire is to create a components out of the index dodgiest because we have the abductor's, which
is the application in which we have our Regius application, and we are going to take these approaches
and integrate this up to our index doges.
And then I'm going to advise you to rename this to the app.
Let us rename these two up.
And here we can say up like this.
Very good.
And there we are going to forget all this index dodgiest.
And the thing we to know is that our weighing up dodgiest is integrated in our index.
So what are we going to do?
We are going to come in.
Are we up to this here?
And we are going to remove all cards.
So let us remove all this.
We are going to remove all this and we are going to take this function, which is a state component
in that we are going to put it in our approach is the first thing you need is to import Detriot Dependent's.
Imports react, as you can see from.
Reacts like this, and here you need only to import this dependence, but in the index duties you have,
you have to eat or there yet.
And here we have imports.
We have a Abdel-Aziz.
And you are going to put our statelets components function up and they function up, return this message.
Ailerons inside of our each one in.