OK, so now we are going to move further and could hear the components folder and start creating components
inside this.
So the very first thing we need to do is come to this source for little DSG folder and now we will create
a folder like a sub for learning to are this and that will be known as key components.
So this will create a folder that will be name as.
Components and inside this that will be all are components, and we can also give styling like separately
to each of the components.
But as it's not all like very complicated and big projects, so will give.
I like Common File Index, Nazi SS and inside.
This only will be giving all of the files inside the components folder.
The very first component, which will be building is the ordinary bar, whatever you like to call it,
because it is present at the top, so it is called as the header component.
So let me just to go ahead and create a file inside this.
That will be the.
Ed Jess.
No, what we need to do is we'll create a boilerplate code like what is the boilerplate code is the
starting code, which is similar to all of the components of law that I have installed an extension
which I would like to share with you.
So the extension is called.
This one right here is the AA7 React Redux graphic video content, native snippets.
This is the emeritus.
Yeah.
This will show this will give us the boilerplate codes and react and basically jump right through functions
and the import export.
We don't need to write it again and again.
So this will help us and this will make our lives so much easier.
So I would highly recommend you to install this extension.
And once you've done that, I want to install the extension.
You need to come to the file of the component, whichever you are, create for whichever you have just
created and then you can just type out of the.
And for me, for some reason, it doesn't work, so I need to press control, shift B and then this
research and then of the press are FCC.
So this will give us the react functional component within export and inside of this, we can create
our files and whatever the GSX or like, whatever the sex and it's our script or this terminal, what
we need to write.
So JavaScript will be written after this function right here.
And the GSX, which is the mixture of our script as well as its terminal, will be written inside this
written statement.
So that is art.
That is what we will do.
So we have successfully ported the code dubbed boilerplate code, and all we're planning to do is we
need to check if this will do like check it by rendering it into the app drawer just fine.
So let me just give our text here.
See is the.
We'll save it.
And William Portrait here inside the gorgeous.
Import further from.
Components.
Basically, this is the location of the flight.
Save it, and after this lion.
Or maybe we can do this line and.
Instead of.
This will tonight, the component of the to the hurdle component.
We'll see if this.
And inside this hurdle, we already did an administrative component.
Who, like most cleared?
Component will save it.
We'll see if the service running on it's not running, so will somebody come on will clear this and
seven p.m. start.
Now this will spin up the server.
And.
Yes, sir, what is it up and running at 2000, let me just go to the browser and see.
And you can see how the component is being successfully rendered inside the app component.
So that is what we wanted to do, like we wanted to just check that component is being rendered or not.
And now it's being an Indian, so now we can just go ahead and dial it and give some functionality to
it.
So let us do that right now.
So.
The very first thing we will do is inside this will remove this.
Next, right here.
So it will be containing an H1, which will be seeing reviews corner each one.
And we're seeing.
Two views.
And just like this, let me show you what I'm talking about.
Just like this, this will be the text and here will be having an icon.
And that's it.
So we have returned to this corner here and now will be needing the icon.
So for the icon, we'll be using the material to a library, which is the the library, which is the
most famous the library.
So let me show you how you can like, use material way in your project.
So for that, you need to go to this website that is the material way or the emulate dot com and.
Well, it takes me to load.
And you have to just click on this button, which is to get started.
OK.
After coming to the get started, you need to click on this installation.
And here that is, this is a command.
And so basically what you need to do is to just copy this command and you need to be stored inside your
terminal and then head down to the member inside your project folder, only not anywhere else in the
terminal.
Otherwise, it will not be accessible.
OK, so here it is, installing three packages.
So if you just type this modern installing material, this will install material on your project.
But when you are an important Americans and also that time it will show you some errors so that time
it can show you some errors.
So that is why I would recommend you to just copy the entire code here and then copy.
So let me copy this.
And then I come back here.
So it can be done to me return on that.
You know, so then I go to I remember to go to the Navy Gate, to your project folder and there you
have to paste this on, not anywhere else or inside this review.
And here do you have to paste to come on and install on what was written here?
Then you two hit enter.
So I've already installed.
I will not do that again.
But just hit, enter and take around a few seconds, 40 to 50 seconds, or maybe less than that.
And once you are done, material drive will be installed on your computer.
So the next thing that you do is you need to install icons from Waterloo.
And remember, does this have whatever the command which we typed right now?
So that has not installed icons for the icons you need to type another kind of command?
So you get.
And let me go to the browser again and hear what you need to do is you need to go to the search bar
and you need to click on this material icons.
Who lived on it?
Or decide to slow down and slow or.
Okay, so this is the material icon's page.
Now here you will find a bunch of icons where you can just search for them and then you can use them
in your own website to remember to install metal icons first.
Let me just click on this.
Am I going the material to give you an overview about what I'm talking?
OK, so then you come to this bit and you can see this is the command for installing the material icons.
And remember, this is be impacted and you can see what is the size and what is the likely weekly downloads
and everything.
So.
This is the basically the npm page of this package, wouldn't you just copy this command and then you
need to come to the.
Or Web editor of code editors, Audie.
And here you need to go to that particular project folder and then you need to just paste this commanders
npm install and icons material and then to hit enter.
So 15 and bits, or it will take few seconds.
And once it is done, what icons will be installed on your project and then you can you are ready to
go and you are going to use them?
OK, so I have already done this and do that.
But what you need to do if you need to install or use material icons.
So let me ask you this.
And now after.
After installing and after everything have done, how to implement that in your website, so for that,
you need to, first of all, go to the website and button.
And instead of here, what you need to do is need to search for the icons, whichever you want to use.
So for example, you want to the icon, which is the out here.
So this is called the view, I guess.
So I will search for review.
But we.
So this is this one.
Reviews, so you need to just click on it and just copy this entire thing.
So when you click on it, it is automatically copied.
This is the import basically to once you have copied, then you need to come to the.
Your co-director and energy to.
Would you just be straight ahead?
And once you have started there now, you are ready to use that and it's very easy to use it now in
your project.
So after the reviews, what we'll do is we'll just import this, so we'll start.
Her reviews.
Icon this one.
And we are to close it on self-closing.
It's mandatory for every component and like that we act now is compiling and once it is done, we can
just go ahead and check the changes in certainty, but also.
So let us go and check in the browser how that looks.
Here.
Yeah, you can see reviews corner and you can see our icon is successfully rendered on this screen.
That is what it was.
And next will be implementing the Dark Mode feature, and the Dark Mode feature is that it will change.
Whenever we click on that button, it will toggle the Dark Mode button and it will be changed to Dark
Mode, so we will be creating the Dark Dark mode in the next video.