Focusing on that, we are done with the introduction part, let's start coding the project and let's
start building it.
So the very first thing you need to do is if you are new to react and you have not installing and an
just so you need to install that first, then your computer.
Before that, you need to go to this website and this one.
No.
Well, gee, and after going through this website, you can download the installer and install the application
and that will install just as well as the npm on your computer.
Next, you will need a coordinator.
So I am personally using a score for this project, and I will recommend that only for you so you can
just to download it.
You can just type in Google and you can just simply download it.
There's no issue with that as an ongoing installation process like any other software in the world.
So once you are done with that, then you can just open Visual Studio code, and at the beginning it
will look something like this.
I'm not saying exactly like this.
It may look something different because I have opened it with the folder directory so that it doesn't
matter now.
So that will look something like this.
Everything will be same.
So now what you need to do is you need to install the React project.
And now what is the Deac project?
Is the like starting and starting for project, which is like having components with the same export
and import like everything which is common in every project that is brought together, and it is clear
that he had project.
So that is the like the starting part, but it is really important.
Without that, you cannot like build applications.
OK, so that will be some node warnings and then all of the things that needs to be installed before
moving further so that, you know, to do so.
For that, you need to go to the terminal and you need to click on the new terminal.
And when did you?
And now what you do is you need to direct to the folder where you need to create or install the application.
Or maybe if you want to install on the two or three only or the home directory only.
So there is no problem with that.
So the command for this is simple.
But before that, let me check if npm and or just install or not on my computer.
So for that, I will write npm if one iPhone version.
So this will display me.
There was know found them and it's just playing the version that needs and be successfully installed
and you're good to go.
But before that, let me check the node version also node I hyphen version.
So what?
These things are successfully installed.
That means the tool.
Let me clear this.
Now we can use all the commands of npm and the app.
OK, so the first thing which you do is we need to install the application, the application default.
So for that, there is a command that is the end be x space create, but be it.
iPhone, the iPhone app, and create a tap in the space and then you need to provide the name of the
application.
There's no compulsion you can provide any name.
So basically this name is the name of the directory in which the application will be deciding, as well
as the name of the project.
So.
For this, I have to review.
And like this, and it's a purely string, you can choose anything alphanumeric, basically, you can
provide some numbers also.
There's no problem with that.
But remember, don't provide spaces in between like you provide space and light, something else that
will not be considered as a valid project name who can provide hyphen and then and then it's OK.
So after that, what you need to do is you can just hit enter and it will take about five to six minutes
or maybe even 10 minutes to install the application because it's quite large.
And it also depends on the verses and color of your PC and your internet speed, obviously.
So that is what it is, and depending factors on the installation time and once it is completed, it
will show you and message a message which says, Happy hacking.
Once you see happy hacking, that means you have successfully installed, you know, the application,
the starting or free application.
And then you do.
So once you see that happy hacking message and it's installed to what you need to do is to just open
that hole directly.
That will be a directory like this and open that hole.
You can see the name.
OK, so you can open that whole directory with voice code.
You have to open it, basically.
But once you do that, your terminal, you will see a folder structure, something like this, that
there will be maybe some things are not on there like this with your score and all that no problem.
But the basic structure will look like this, and there will be some folders like node modules public
as optional.
So in that you need to delete, delete some of the files.
Basically, the report web vital that they're stored.
Yes, and the logo and all that you don't need.
We are not the building application that goes into the production and that needs to be tested wisely.
And so we are building a simple application.
So that's why we don't need any testing at all.
So now what we need to do is you need to go to this after deleting that, after deleting all the files
and cleaning up everything and the full structure should look something like this.
And but then you need to open this.
You don't have to take this node models folder and the public folder are and leave it like they as it
is.
So inside these sorts will the subsidy folder.
What is that?
That is the abductees and an index tortillas and exhausted, it says maybe abroad to get us out of this
debt problem.
But other than this, whatever is there, just deleted.
And what you need to do is you need to open the in this file, which is the abnormal.
And yes, after opening this file, your file will be quite different from mine if you have just installed
the application.
And before that, what you need to do is to clean up that and make it look like this.
This just for lines it should be looking like this.
Put a report where vitals and like there will be some import and there will be some other other things
other gold, a piece of code which we don't need.
Exactly.
So you can just delete that and you can make it look like this.
Once it looks like this, then you need to test out an application now how to best start application
or how to see whatever the genius which we are making inside the browser or to get those reflections
in the browser.
Before that, you need to spin up a server and their server will be spinning on a particular port on
the local host, and then you can just review it in the browser before that.
First of all, you need to open the terminal and you can open from here also.
But there's a shortcut for opening the terminal that is the control plus backpacks.
So after coming here, you know, to go to the, you know, to navigate to the folder where you have
created the applications, for example.
And.
Projects and then for me, it is a review, and then you can just see what are the things are that inside
the folder using the Ellis command?
And you can see all of the things are exactly same that look package lock and the Normandy's and the
SHC folder.
So all other things are the same only.
So that is it.
So now we're going to do is going to spin up the server.
And for that, you need to run a command that is the npm spears start, S.T.A.R.T. start and then it'll
just hit enter.
So it will take a few seconds to spin up the server.
And once it is done, you can just go to the browser and you can just.
Open on the boat like probably the number three thousand on local host, but once you are done, then
you can open it and it will be like disappeared on your browser so you can see it compiled successfully.
And it is showing us like where you are and the localhost three thousand, and this is also localhost
three thousand.
So then you can just call to the browser and let me show you how it looks.
It is basically an empty project right now.
There's nothing.
So let me just add something so that something is displayed and we can, like, test our application
properly.
So right here.
Hello, world.
That's what the world.
This is the.
Do you?
Application and I it.
And now when I go to the browser.
You can see whatever time is displayed here, that means our application is working fine and it is it
has been installed successfully and whatever we were like, whatever we were typing.
So that is being displayed properly.
So this was the expected behavior of an application and which simply means that the solution was successful
and now we can move ahead and we can do the rest of the things.
OK, so now what we will do is.
He would come here and let me minimize the terminal and minimizing doesn't mean I'm closer to running
in the background.
You know, what I need to do is you need to create a folder here, which is the components folder and
insert the components folder.
All of the components would be there like, let me show you.
But this was our application, and here, for example, this this is the like and never borrowed the
header section and the colored button, there's this search bar to denote the note list.
Every single thing is a different component and every single thing will be developed separately.
Like, anything would not be like dependent on one another, like all developed together in one page.
Not everything is a different component, and everything will be developed or coded separately.
And then we can just bring together everything, and then the application will look like this.
So this is the main pillar of react that you don't need to like, write every, every code and just
one index for extreme weather and one index toward the file or in one style or CSC unit to write all
of the cases.
No.
You can just customize every single component separately, and then you can just do much and bring two
together every application and you can just importing the ABCD or JSON or directly or indirectly, then
it will be displaying on the screen.
So this whole application is consisting of different, different components.
This is not just coded in one apply one page or one index for each team.
So that is what we are going through now.
We are going to create the components folder inside that will be creating different, different components
using videos, file, for example, the header third and everything so that we will do in the next video.
So.
And it will create a folder and will do everything the next video.