This video and this session, we are going to learn about the props and the props is the rate that allows
you to pass data from a parent's components to its hard components.
As you can see, here we are.
We have learned how you can integrate for the important components and the components, as you can see,
and they want to integrate, for example, a components in Inari components.
That means these components, as you can see here, if my car's components we have integrated in inside
of the components, that's mean and the cars might cause components is it's had components of components.
And instead of having several cords in a single JavaScript file, we are going to create for its components
a new JavaScript file.
So keep it in every time.
That's going to create a new components.
Make sure to put it in instead of it in in new JavaScript file.
The thing we're going to do here, we are going to remove all this.
We are going to create a new components and we're going to name these components, make cars.
Let us remove all these layers for straw.
Yes, we're going to remove these.
Are we going to remove these components?
It has come back here.
And what we cannot do, let us come in is ask the foreigner, let us click on new file and we're going
to create a new component that's going to name my cars, my cars, dot days.
And as you can see here, we are going to define these components as a state's four components or a
a class components, because we are going to use states, we are going to start data in these components.
So this these components must be in a state four components or components with the objects.
I have just shown you how you can create, for example, a statelets components or a state with components,
as you can see from here.
We have tried to create a stateless components in that.
I think you can leave it by default like this, but no problem if you can also use a stateless components.
So let us back in our we might consider this.
We are going to import fees for the right dependence to say imports react from react like this, reacts
please.
And for every component that's going to create the only one day regular imports in our cars is imports
right there.
Yet dependence and much freude index doges.
You need to import fees for Detriot dependence and after that you are going to eat the reactor dome
because the index today is a Lhasa's to take the entire application and render them to the dumb reason
why we have to import or so they really don't dependence.
But for other files and all the JavaScript files, all the components that's Regla creates, we will
need only to import that Reetta dependence.
And let us back to my dodgiest and the theory to here.
After importing the dependence, we are going to create eight components is Techwood components or components.
So let us rot glass.
And so we are going to say my cars, my car's actis extends.
As you can see here, we have already talked about it extends components and hairiness.
The export extends to can syriacs those components.
Like these.
This is a class or you can easily remove results, notes and come here, come up and you are going to
open it brushes and inside you are going to say component's like this.
And Aphrodite's, do not forget to say exports.
Yes, the efforts.
My car -- is a very good and in such a year, we are going to call it ruined their function.
Yes, render.
It's in our brain to function in our render function.
We are going to say we are going to put the written function like this.
We are going to return the we are going to put that written function and say, I want to show you.
And I think, ladies, first of all, remove this.
If you have already installed this package, let us click first for here.
This package, which is a name, it's a S7 react if you have already in storage.
This package is can see here.
I have already installed this package.
Instead of writing these cards, you can just stop these short commands or C C presenter and its will
automatically imparts a state's for class, even your JavaScript file, and by default it will take
the name of your JavaScript file as the name of class.
And the reason why make sure to put the first letter of your components of your deficits in uppercase.
As you can see, you can read also like these export defaults, glassmakers extends components.
Idrees, you can't remove like these letters remove and just put it into your export defaults.
Make cars like this.
And they are very good, I think the snippets is very, very interesting.
So let us continue.
This is the reindeer function and the here let us back in our uploads.
So we are going to integrate the might components in inside of Abdel-Aziz, because the apology's is
the parts, components of all components that we are going to be creating during our project, which
can see, sorry, Dasbach here, let us make our car sluttiest.
So what are you going to say here?
Ladies, comp your apologies and we are going to imports.
We to say imports.
Import my cars like these.
From.
And we are in the same routes, in the same folder and the same for.
Let us click on my chase and let us.
His parties have these messages, and I think in the words.
We can't import orate.
I would make cars components here it is safe like cars.
That is very good.
Let us come back here what's required to use moments, we are going to create a table at this table.
We are going to have a different data.
We're going to have first for the the name of the model of a car.
We're going to have also the price.
And so we're going to have also the color.
Rayas, Kampia.
And the first thing we're going to say we got.
Create a T-shirt that is a insert here are going to see in.
You know, put it your.
And here, the thing we need to put right yecch.
The first DeFries states, the first detat is going to be branes his can see, and here we displaced
that clearly the title authority needs and his can see the head is not the data, but it is just the
title of the data that's required content in orate seaboards in our Tierce that we cannot have in our
seaboards.
So we have restored the brains after the brains.
We have the caller.
We have the caller after caller, hefty price is very good, and after that he heads, we have the sea
board.
That this is sort of a pretty body, the thing we have is the tea.
In sort of year, the table decision and the first brains, we can't say, for example, ladies first
will try to display this information a statically without using states because we cannot record these
states in the previous session, in the following video, in the previous sessions.
So here we are going to say, for example, Toyota is saying here, Toyota.
We hear the caller is going to say like.
The price, the price is going to be freezing, Paul.
This began I, for example, 50 tourism dollars, and it's Siggins.
He's going to be freezing important Mercedez.
Are you going to say green?
We're going to say it's first, it's Haseena dollars and the last one we're going to say Maasdam.
In my story here, it is, 20 towns in all called a column.
The car is going to be right here in put 20 thousand dollars and say, I think this is very important.
Ladies, big here and we're going to our information here.
And then I'm going to get a CSA style.
Just come here in our approach cyesis we are up to.
So we are going to import up to 80 houses.
We are going to say import.
That is.
Club don't see houses like these ladies come in, please.
They just come here and let us remove the defaults.
It does pass is tire.
So you not say, for example, Tyber, which we have a 50 percent margin building collapse, just put
these put these properties.
So it is very simple.
And if we try to make sure we are going to have something like this, you can see we have branes color
price and say this is the tides or different side sauce that we have for the brightly colored Toyota
is the brains and that this part is toxic.
It is a statelets information.
But here.