Hello.
So now that we have done with the introduction of the project, let's start building it.
But first of all, if you're new to the act, you need to have Node.js installed on your computer.
And if you don't have that, you need to go to this website, which is not just the official website
of the Nordics.
So after coming to this website, you need to download the installer for Node.js, which is this right?
Recommend recommended for most users to download this installer, and after downloading, you need to
install Node.js on your computer.
So once you install Nautilus and will also be automatically installed on your computer and you are going
to go.
But before that, you need to have a coordinator.
So if you already have, you can skip this part and if you don't, you need to.
You need to go to this website, which is displayed on your screen.
So this is the coordinator which I personally use and I will recommend you to use, but it totally depends
on you.
You can use any contractor which you want.
Maybe it can be a some sublime or whim or any other contractor which you have in mind.
There's no restriction to that.
So I personally use this and I'll be using this in this project.
So that's why it will be more convenient for me to convey what I'm trying to say.
So if you're done with installing, we escort and Node.js and PM, then you need to open.
We scored.
So let me just go to the IDE.
OK, so once you open the coordinators or if you if you're opening it for the very first time, it will
look something different.
So after opening, we're going to go.
What you need to do is that you need to go to this tab right over to the Terminal tab and to click on
this new terminal and then the terminal will be open.
So it chances are high that it will look different for you because I'm using WSI.
This is open to terminal, and probably you might be using command prompt.
And for you, that would be a command window, right?
Are not open to terminal, but you don't need to panic.
The commands which we'll be using will be almost like almost same.
And there's no problem with that.
OK, so once you are in the terminal, what you do is that you need to install the React product before
working on a project, before you start working on a project or before billing it, you know, to have
our default project installed bioreactors.
So what you need to do is, first of all, you need to check that npm and Norges are installed or not
in the computer.
For that, you need to tap this command that is npm Ivan Ivan Watson.
So it will show you the version of the software which is installed.
And if it doesn't, that means that a particular package is not installed properly and to go back and
follow over outside and then you do reinstall it.
OK, and you can do the same FutureGen Norwegian also, and it will show you the watch and same thing
happens if it doesn't show you how to install it.
OK, so now that we have installed both of the things, so what you need to do is you need to install
the React project before that in and this command, which is npm space.
Create a fun yet hyphen app and space, and then to provide the name of the application which you are
designing to like, create.
So in my case, we will do my bag because we are creating the bag or the card or we're going to do whatever
you can say.
So this is purely a string.
You can give any name to it.
There's no compulsion.
But remember, you can't provide spaces to the name of the project.
And once you have decided the name, you can just press enter.
I've already installed the product, so that's why I'm not doing it.
So once you have, I've just come on in to just press enter and it will take around five to six minutes
to install it.
Don't panic.
It can even take more than that.
It totally depend on the processing power of your PC.
For me, it usually takes five to six minutes for you.
It can take two minutes, one minute or even 10 minutes so that that is a random thing, OK?
So once you have completed the installation, it will show you a message called Happy hacking one to
see happy hacking.
That means that the project has been successfully installed.
And after that, you need to, and it will create a folder with that particular name which you provided
during that and create React app in that command.
Whatever name you provided for the application, that particular name from that particular name, one
folder will be created.
So in that folder, all of the project files will be pleasant.
So that folder you need to open with the video scored, and once you open that folder with the accord,
it will look something like this.
I'm not saying it will look exactly like this because I will tell you why, but it will look something
like this.
So there will be some extra files on that.
And those are some non-essential files because we will not be needing that and there will be some test
files and all.
So we are not building so like big project and a scalable project that we need to do testing and all
we are doing on basic project to learn things so we don't need those files, actually.
So let me just go to the folder structure of the project.
First of all, we have the node modules folder.
So this folder, you don't even have to touch it.
Don't open it.
Don't touch it.
It's just present.
And next, we have the public folder.
So in that we have the index estimate, that is the only thing which is like, important to rest.
All other things are useless.
You can even deleted but indexed.
Or still, don't you die deleted.
But next, we have the source folder or the SSD for it.
This is the folder we'll be working.
Most of the time, I would say 99 percent of the time we'd be working in this folder only.
So inside this folder, that would be multiple files, but you need to keep all the files which are
being displayed on the screen and which I'm giving you, which I am going to tell you to keep.
So there will be multiple files like a report by the poor web vitals dogs to report test ideas that
all you need to delete and just keep the abductees in next year's index or to assess obnoxiousness and
package files.
Other than that, you need to just don't worry about this folder this I've created manually.
This is the media folder in which all the images and logos will be present to this I have created manually.
Don't worry about this.
You will also, I will also teach you how to create this and how to place images in that.
So ignoring this folder, everything the rest of the things which you see on the screen need to be same.
And once they are same, then you need to go to this file, which is Abdul Geo's file.
But once you navigate to this file, so there will also be some extra code written here, like your
app drawer just may not look seem like, which I have.
So there will be some toggle that you need to clean up.
So after cleaning up that code, you are and you have to make your Dargis look like this.
But once you make your app drawer, just look like this.
Then you are ready to go.
But once you are here now, we can begin.
So now we have successfully installed a real project, and this is not like before in project like from
here you can start building.
This is the basic requirements to a project and this should be present.
And like, if this is not done, you cannot go ahead.
OK.
But once you are here, let's let's just go ahead and test our application if it's working properly
or not before testing the application.
Let me just try something this do.
Maybe.
Hello, world.
And then you can test two application or on a server.
So for that, you type a comment that does npm space that no, first of all, you need to go to that
particular directory where the application is present or the product is present.
For me, it is a project and my about navigate to that particular directory.
And then you need to tag this command, which is npm space dart and then, you know, to just hit enter.
So it will take a couple of seconds to start off a server on a browser.
So what it will do is that it will run a server on a particular port, on a local host and all of the
changes which you make here that don't.
This will be reflected on that particular unit, so it will take a few seconds to load and then it will
provide us a real and probably look, we have some better.
OK, so there were some issues, but after a few seconds, your server will start on a particular port
and it will show you that you are.
How do you concede that is like the subways running on for three thousand?
So what you need to do?
You can just go to the browser and check or whatever you have diarrhea.
And like, for example, if I appear, hello, I already did, but it was working, so I deleted it.
And now what you do is you need to go to the browser and you can just check.
Wait, a second, let me go to the browser.
And.
You can see here, but whatever we rode in this particular day of that particular day in the abductees
that is being rendered here, it means our project is successfully installed and our product is like
working properly.
So this was just to test our application, that is, they just properly installed or not.
Once you once this thing is working now, you can just go ahead and build a project and you can add
more components to it.
So that will do in the next video.