OK, so hello, everyone, and right now we are in our coordinator, that is the Visual Studio code.
So if you don't have it, you can download it from like being just so on Google, how to download it.
And you can also use any other coordinator of your choice.
There is no comparison, but for this project, whatever you are going to use, we have scored OK and
also a new to react unit install npm and not just on the computer.
And you can just google it.
How to do that, and that is a really simple and straightforward process.
So once you're done with setting up everything, you need to come to your code editor and open this
terminal from the new Terminal tab here.
And then it'll just run this command that is npm MP X or the MP X, create hypochondriac iPhone app
and space and then the name of your project.
So this will take around five to six minutes and your application will be created.
I've already done that, so I will not do that again.
And once it is done, then you then directly order off will literally be created by that name.
And you can simply go ahead and open that folder with visual studio code.
And once you do that, then once you do that, things will look similar to this.
And there will be some folders and files here.
So you need to delete the files, which are not useful for us right now at the moment, like the report,
vibrators and all other files, because we are not pulling up a project which we are going to like,
put into production so we don't need testing as of now.
So just delete the files, just give whatever is displayed on your screen like the mail folder will
be.
No, that is form from my previous project.
Or just ignore this.
There will be no more.
Don't touch it.
Then that would be there.
Don't touch it.
Don't deleted public folder.
A.R.T. folder.
And then side by side, if we know there will be some files and you can create folders inside, so 90
percent of the time or already when I say 99 percent of the time, we'll be working on this article
only, which is the source folder.
And that is that is what we'll be containing all important files and folders for.
And once you've done with cleaning up and everything, you can just come to the site see and you can
just open this Abdo just file and this is the main file.
Or you can see the root file or the subadult file.
Because the raw file is the index suggests this.
You can do the subgroup file and this will be containing all of our renders like whatever you want to
go like right there on the screen.
So you need to put that in their bodies and that will be rendered on your screen.
So that is it all about this after this, and there will be some more.
Golden cited the need to clean it up a little bit and then to make it look like this, remove all extra
like code and then just make it look like this.
And then things would be easy for us.
So once you're here, that means finally, we have set up the DeFi project and know you're good to go.
So once you're here, you can just go to the terminal and navigate to the directory or the folder that
you have created this project.
Basically, one folder will be created from that name on list.
You don't need to create any of the folder.
You need to go that folder.
For me, it's inside the projects folder and that is a.
Inside the project, I have a cocktail.
And from here, I will have this commodities and beam stock in order to come on will do is that it will
start the server on on a particular port on localhost and then will be able to see it running on the
browser and we'll be able to see the changes, what we make here.
So it does what this does and we don't need to like, restart the server every time we make a change.
Whenever we if we make a change and receive our thing.
So then the server automatically restarts and it automatically fetches the.
During this, let me just save it and.
What is that this will start off the server and the server is running on the spot?
So let me just provide something here inside this Devon their boards and let me check if that change
is being reflected there or not.
So I will fight the law or to law world.
This is.
The application and when I save it.
I'm sorry for my throat because.
I'm having a little cold and cough, so that's why my voice is not my voice, this little messed up,
OK, so I've saved this and let me go to the browser.
This was our project.
Matt, let me start off the this server.
And you can see Helloworld, this is a React application and whatever change made that has been that
has been done successfully rendered on the screen.
So that is what we wanted to do actually.
And our next work we need to do is to install a package that is called the cloud or dome.
So real, crowded on basically helps us in navigating from one place to another, like whenever we could
hear different components.
Like, for example, one component is a home component next about us, and then we have the profile
section menu section like whatever.
So retro rhythm helps us in doing that.
So that is what we want to do.
So like, let's install that.
So I will stop the server and I will install it by and PM install than the Typhon router hyphen.
So this is the command which you will type.
So I have already installed it, so I will not do it again.
So what for you are just typewritten assured.
So that is what we will do.
And then the vehicle will be installed and all the work will be done.
Okay.
So next to what we'll do is we'll create our.
First of all, Bill Clinton, everybody calls and we go to our application and we see the first thing,
which is that is the mayor of Boston said that there will be a branding name or the title of that episode
next will have a home button and about button, who will create step by step, component by component.
So the first component which you will create is will be the nav bar.
Next, we'll create this about page, because home page is this only bill that will look at the last.
Well, first of all, will create this branding and all inside the nerve bar, then about page and then
the rest of the world will be done.
So.
Let's go out to our I.D. and let's start working.
And so now what will become again, what will be created inside the folder and we need to create a folder
so the folder name would be components and not files, audio files, but once folders.
So that would be comfortable and components and.
Inside the component, what we do is we'll create a file with that file would be.
No bar Dodgers.
So I'm.
Saudi.
This and create this now wide audience.
And thought to see us and hear what will do will create we'll import our boilerplate code, what is
a boilerplate code?
The boilerplate code is basically some like the start of the code, and that is similar to fall off
for all of the components.
So that will grab one that will get out from four that we need an extension, actually.
And let me tell you what is the extension technique, what extensions are and let me show you.
So this is the extension which we need S70 actually, your next graphic will be native snippets.
And this is a really, really useful extension of what it does.
It gives us some boilerplate code snippets, basically for various like components and all.
Too often stall after you have installed that application of what you do is real, you will just restart
your ID and you just type this on FCC.
But he said he read, I'm typing dope here at AFC.
And once you tap this, you will get like like this kind of list and then you can just go ahead and
click on that and you will get the boilerplate boilerplate code.
But for me, for some reason, it doesn't work.
Maybe I'm using WSM that way.
But what I do is I put a control shift be and this certain, and then I press privacy and that it gives
me this beautiful snippet, which is the start of it or the beginning goal of the.
Of the component or any component to air, first of all, will do most of all like will create inside
the written will ride the G6 or the G6, G6, the mixture of JavaScript and Steam.
And so here we'll write some of the things which you want to display on the on the browser.
But we'll give nav and the class name off and last name would be stories and nav.
And the last name would be.
And the last name would be NAV Bar.
Have.
And inside the snack bar, there will be some devs.
It's the math.
The everybody will have a different.
We can just directly give a class and the class name would be never send.
The spirit of.
They have center, and then we'll be having link to different different roles.
Right now, we have just one component that we now have.
OK.
So for that, we will need to create another component.
But first of all, let me just import the link.
The import.
Import and link.
From.
Body.
That is oops.
He asked.
Rotor dome and fire have imported it inside the clearances because it does not have a deep water export
or this is the link on the default export for it.
There are multiple exports and the link is one of them.
I have.
I've basically just imported this inside the collaborators, and that is why I'm not important, like
just writing by one world.
OK, so that is what about this link is all about this link will help us redirect to different components
and different pages, so that will do in the next video.
The rest of the code.