Welcome, everybody.
In this video, we're going to be talking about, say, component's, we're going to see the importance
of component's.
And here we say that's a compliment, let's you split the user into force the way into independent reusable
PCs and they think about each PCs is in isolation.
OK.
And here we have this picture, according to Woods Regional Development Project, in the last project
that's going to develop in this course, we have this picture containing different components.
You can see here we have two main components.
We have the navigation bar, which is here in orange, and we have also the segments, which is the
home page.
OK, we have two components you can see here have components, lets you split the weight into four independent
reusable pieces and think about each piece in isolation.
OK, you can see we have this segment components, which is here, which is the homepage.
And inside of our homepage we have the subcomponent.
That's when you can create in the components instead of a parents components.
It's all components and components you can see here, first of all, in all the components, which is
then they call in plural vehicles and we have feature components.
We have the car components.
We have these other components.
OK, it is in France, but it meets order.
OK, and here you add to cart.
We have also from component's.
You can see where the coloreds is in green.
That means there are a subcomponents of this orange component, which is very close in plural, OK,
which is components, which is the south components of the home is OK.
And here we have a course in plural and instead of the courts and plural, we have also included components,
which is the vehicle in singular.
OK, you can see we have it here and in particular you can see have it.
It is in blue.
And you can see we have the court in singular.
The court is in singular is a component that's recreated.
You can see we have this notion here.
Reuseable is in order to have the courts in plural, we must have repetitions of a very singular reason
why we have the components motions.
That means here we create only one component, which is the court in singular, and we're going to take
the same components.
We are going to reuse the same components several times instead of the vehicles, plural.
OK, in order to get the vehicles plural components, this is the importance of components.
You may be wondering it is the same and it is different components.
OK, we are reusing.
No, it is not the different components, but it is it is not only one component, but only reuse the
same components several times by making these components dynamic.
You can see here we have these in this car and here we have in the car.
You can say it is a there are different there are different components, but the same components.
There are the same components, only reuse the same components several times by making these components
dynamic.
And inside of our they call a singular or so we can segment we can split again by saying, I want to
take this button, uh, like an component.
OK, and I'm going to split to create a components in which I'm going to put cords in order to get this
button, OK?
And you're going to take these cards, these button components and reuse this button components everywhere
that's going to court.
The same components.
You say if you call this components you the second time, you're going to reuse also the same components.
This button, it doesn't mean that you're going to put, uh, the codes on the button everywhere.
No, you're going to push the button only in your JavaScript file where you create your components,
like where you create components and you're going to import these components everywhere that you are
going to reuse the same component.
You're going to reuse a on here.
You're going to reuse what's on here and everywhere.
OK, we take this in this case, we have this button here.
You have this button, which is in red.
You can say that it is different with this this button.
You can say there are different components, but there are not different components.
It is the same components.
OK, only we can say if you are it inside of these components, of course, pleura, you are going to
take the green color and your test is going to be add to cart Ataris.
If you are Corlett instead of CART, you are going to change.
You are going to take this call, which is race.
And instead of your end, you are going to have this test which is cross in order to remove products
from cars.
And you are going to reuse the same components like does.
You are going to make your components dynamic.
So this is the importance of components.
You can reuse your components over and over again.
You can see here we can also really reuse the rebuttal components here, OK, by sending these tests
here, we have order.
OK, Commander in France, let me order and you can't reuse also here where we have this idiots, OK?
You use the same components as you say.
For example, if you are imported, if you're calling inside of form, you must change the color.
You're going to get the if the call and the test will be validated.
So this is the importance of components.
You're going to split the USA into independent reusable pieces and think about each piece in isolation.
This is the the components we can say in short words.
And here we can say conceptual components are like JavaScript functions when we are creating our components
in reality, as we create or components instead of JavaScript function, that we create a JavaScript
function with the name of the components and concepts.
Are you are you going to see that the components are JavaScript function?
Now we're going to talk about the components types, OK, and here we say we have two types of components,
namely, we have four straw components, functions or function components.
We have also class based components.
And the first thing we're going to learn is function components and sort of their function components.
Here we say that the idea is their colleagues, U.A. components like.
There are components that allow.
Let's allow you to create your user interfaces presentation, they allow you to create or display at
the browser, OK, you want to create, for example, a user interface.
You want to display something in your brother.
You want to make presentation.
The view of your websites make sure to use function components in order to create your your presentation.
OK, yes.
And the second thing, we're going to stay functional components in localization of riots.
OK, in lawyer version of ResultSet sixteen point seven, we're fully components that list.
OK, it was a statelets component.
That's mean we that status to all data.
OK, you can't know that you like you know, like a state, Regis is a Francine's library, OK, but
a different library, we can also use data in different insights.
OK, and here we say, but from the version Greater Dane, greater or equal to sixteen point seven,
they can't have state is thanks to react rook's.
OK, you can also integrates states is in order to contain data by using function components and if
you use the riots.
But because we are not going to be talking about real roads, OK, we are going to take only the concepts
of the state components, which is functional components.
But you have to know you can also in this moment, you can also use the state is in order to contain
data by using the function components.
So you are really you are going to understand this when we are going to trickle out basic notions and
when we develop our different product.
It is very simple.
Just keep this notion in your minds.
It will be important when we are going to trickle out basic lessons and our project or insurance projects.
OK?
Yes.
And here, say this again, it is the class biathletes component.
Under his colleagues did components and here say there are companies, OK, these are components like
an.
That's half the state is to contain did we get in the front and say, you want to contain data, we
are going to be using class based components and here we have the function components versus components
plus.
The image in the left side here, you have how you can create a function, a cake, like I said in the
beginning, a conceptual components are itself a street function.
You can see if you want to create, for example, the components which called which is called welcome,
you're going to create each of us a function in JavaScript function in which we are going to return.
Okay.
We are going to view to display this in French Boonchu.
That's M..
A good morning or a low OK.
In your browser like this, like the codes below represent a function components.
OK, this is the meaning of this they call it below represents the function components like the components,
the function components like this.
This is the function components.
It allows us just to view OK, to display elements in our browser.
If you want to display this, this is the function component and this is like this creates you can say
function Wellcamp like this, it create components.
And the second is the components glass here.
You're going to use your glass.
OK, we've got OPIS.
And you have your components here would come.
Extends from those components and make sure to put the render function in instead of your glass, and
then you're going to call your return in order to get some what you want with you and with the components.
You can also view something in your browser like.
We don't know if only to use the states here in Nickless components, but we can also view components.
OK, and this is some comparison to let you know how you can create a.
A function component's or a component?
It is very simple when we are going to treat our different set of are it cause.