In the last to we got started with the reactor creation and all, so now in this video will create the
packages and then we'll start knowing about what our components are and how these components work and
react.
So first thing you have to do is we have been strong some libraries and packages, so go to your terminal.
You have to go to the narrative video React project is present, and now here the first thing you have
to install is Google Material Design Library.
OK.
So for this, the command is and beam.
Install.
Maybe.
That thesis and the next.
And then click on into.
So this bill and strong to materialize CSIS next package.
Just wait for a moment, and after this, you have been strong reaction out of them.
So you want to know what this means.
Simply, you can go here.
React.
Filter down.
There'll be a whole documentation for that.
You.
So if you can see it.
This will be the command for installing it and the model one like have back.
So yeah, so this reactor on the dome will have the function modules, but browser browser drought links.
So these are used for creating a multi-page reactor like, for example, getting the reactor.
This is the home page, but if you want to create another page, as you can see here, if I click on
skins, I'm getting this page at slash skills.
So how to get that so that that will be achieved using this reactor?
This is basically, first of all, just helping multiple pages.
Similarly, it can also search for materials.
See this next.
Materializes as if you can see it.
You can see you can go to the documentation.
This is basically framework based on material design that means for the styling and the responsiveness
of the page.
For this kind of stuff, we'll be using these packages to have been stronger.
So one, citizens from the next step is to react to the dome and beam.
Instant react.
I don't.
So after this, you have to install a font on some major credit.
So for this, you can visit the website font awesome dot com, visit that website.
On.
Are some broken?
And I thought for free.
You have to create an account and everything, so once you create the counter, they'll give you.
You know, there will be a clean, OK.
You you can download the equity and then you can select the Google Clean Copy, the latest equity version.
OK.
So basically, it should be like this.
So we basically score directly in the index HTML in the style section.
If you can see here.
Will be script.
Sauce will be.
Its GDP is.
To longing for that, to get this attack, not.
Google.
Airbus.
Com.
Slash addax slash lip, just slash equity.
Slash three, four and five point.
One flashy but.
Graduate query document.
Gorgeous.
So this will be what is the CD that you'll be getting if you create the account and then search for
that?
And you can do this, this is the website for that.
So now the next step is.
We have to link the Google Material Library designed in that Abdul.
Right?
So now.
To apologize.
And then here you have to import all the materials, materials, CIA cases and everything that you install
that you installed in the back of your sleep.
So how to know whether they're installing the packages or not?
The package that John, you can see your react, Dom React.
And then materials, cases and everything can see.
These are instruments where if you had having them in the dependencies of package design, that means
this, of course, would instruct.
So now after it started, I think for them.
So basically an import them, you import.
Material access slash this.
And scissors slash, he, Elyse.
Not.
Men see as.
Once that is done, similarly, you can.
Import.
The same thing, the same stuff we have to repeat.
But you didn't hear, of course, this will be installing the jets.
Yes.
So now they're in strong.
So now, before moving on to the next hour, we'll see how this Abdul disinfects charges and in general
are linked.
So if we can see it in next hour to be minute.
We're having this division ideas rule.
And if you were to elect Doug Jones, he had your important duties react and reacted.
So what they're doing is that they're creating this group, they're creating the act up and they want
to render this reactive somewhere that they won't render the complex.
So you react to normal doctrine, that means it will render the component to same address.
So this is the address document that get element by 80 in the bracket group.
So is the diary of the division that we have searching for that address point.
So it is that president, if you can see the next deputy chairman, it is present here, right?
They to address this reacted on function.
We have two parameters.
One will be the component that is the app component.
So what do you mean by component?
So if you can see here, everything here is a part of competence, and now that is a component.
This particular part is a button.
This about me is a component.
Professional skills is a component for what the components mean.
This means that parts of the set.
So before we act like before few years, what the did is the distributed base using HDMI and JavaScript.
So what happens if there is some change in the code like, for example, changing some education part
of the website, then the website Naperville?
OK.
So instead of reloading whenever there is a change, you know, in a part only that complement gets
in or not the full page.
So that is the use of components.
So the more dynamic data and more data are big, big websites, it is impossible to have freedom reload
when the information gets updated, like if you can see in the social media website every time the newsfeed
will get updated, every time it should get refreshed.
So instead of that, for example, if you see a post, the comments will get updated.
So you will only refresh the company only the comments to see what they have.
What are the new comments that are coming?
You will not refresh the whole whole page.
So that is similar to this.
They work with components in there also.
That is what we are doing the same.
So these are the components where only the component changes to what we are doing here.
We are rendering the act component inside this division, inside the courtroom.
So basically our whole code, what happens if he decides inside this Aparajith Abajo stage one so that
we are entering into the next address where it is rendering vintage generally in Yemen?
That is why we are able to see it.
Welcome to the as you represent over Orient.
OK.
So this is what basically happening with this components and the, you know, the state management or
not, that project Typekit and everything.
So in our bodies inside this room, we can have the all the career itself.
Similarly, we can create other components in for them and Set said after audit and then use it in the
lab dodges.
So that thing creating the React files and all the components and importing them in the after jet will
see that in the next few.
Thank.