Hello, everyone, and welcome.
So now that we have discussed the project, let's start building the worst thing that you need if you
want to work with react on your computer is that you need to have Node.js and npm installed on your
computer.
So if you will not install Node.js and and being on a computer.
So we need to go to this website, which is Nordeste or G.
And click on this link right here.
This button, which is recommended for most of the users.
We just click on this button right here.
And this will download installer for Node.js on your PC.
So once it is downloaded, you just double click on it and just follow the instructions for the installation.
I'm not doing it because I've already installed Norges and be on my computer, so if not, so you just
follow this process.
So once you've followed all the instructions and installed successfully node yes, on your computer,
then number two.
Now what about npm?
So you no need to worry about npm, because if you install Node.js from this installer right here,
then npm is automatically installed on your computer, so you don't need to worry about that.
So now that you've installed Node.js and npm on your computer, the next thing you need is code editor.
So if you have a coordinator, then skip this part and if you have not installed any quarter.
So I personally use this, which is Visual Studio code, or we scored.
So I will prefer you to use this coordinator as we will be using this story while coding.
So if you're not installing this, you can just go to this website, which is code dot visual, you
dot com slash download.
So once you arrive at that and this website, you can just download it according to your operating system,
if you are a Windows user, you can download it here, according to the configurations, 32 or 64 bit
next.
If you are a Linux user, you can download it from here.
And if you're a Mac user, you can download it from here.
A zip file.
So that's about it.
Once you've downloaded the Visual Studio code and just go to the file path that it has downloaded and
just install it, so it's not regular installation process.
So which is like saying for all the software's on windows and on any other platform.
Just install it.
And once you install it, just open it by double clicking on the icon.
So let me just show you how it will look like when you once you open it.
So this is how it will look like once you open the Visual Studio code.
So this is how it looks at the beginning when you even you're not going to do any project or something
like that.
So this is what you will see.
Next, what you need to do is you need to open the terminal.
You can see this tab right here that says Terminal two, just click on it and just click New Terminal.
You can also open this by using a shortcut which is controlled plus Bektic the key above the tab.
It's called Bektic, so just press control.
Plus some Bektic and the terminal will be open.
So I've used WCL on my computer and configured it to my VA scored.
Evolution means Windows Subsystem for Linux, which is open to use of this terminal.
You'll see here is an open two terminal and all the Linux commands on executable on this.
So you might not be having this.
And if you click on Terminal and you open their terminal, you might be opening a command prompt CMD.
But that is totally fine.
That is perfectly OK.
You don't need to worry about it if you are not having a cell.
All of the commands, which I'm going to use today can be executable on WCL or on command prompt the
all I seem, so we don't need to worry about it.
But once you install an audience and PM, you can just check it by running this command, which is once
you have to check the npm.
So if you want to check and permissions, install or not install on a completely new to run this command,
which is npm Spears iPhone, we.
So this will show you the version of the NBN before it's installed.
And as you can see, I'm installing PM, so I will see the wording.
And if the PM is not installed, that means you will get some error and it will show you some error,
like, come on, not recognised or something like that.
But that's an indication that and PM is not installed correctly.
So just install it once again and and be a same I can do for the node.
Also, by tapping the command node hyphen, we.
So you will see it.
I know my node is little, not updated, but it's fine.
It'll work for us.
So I just clear the mess up, and now we're going to create a folder or directory in which all of the
project files will be present.
So let me create are better.
Three.
So I'll type a command which is desired.
This is same for this one, too.
So you can.
If you're on windows, you can create a directory or folder manually, and I will type the name of the
directory so the name you can give any name to the directory.
That's not a compulsion that you need to give it a name, so I'll give as full food or the app would
order up and then I'll hit enter, and then I'll go to this particular directory food.
Order now.
And now I'm inside that directly, and I clear the mess and I'll see now I can see that the food order
app directory is completely empty.
Now what I need to do is I need to install the.
React app.
So how we need to install, react or react project in your computer.
So you need to do this process every time when you create a new React project.
So let me show you the first step of installing or creating a recap.
So you need to tap this command, which is and B x space create React app that is a hyphen in the middle.
Just keep in mind that and then space.
And then this will give the name of the app space.
After space, you have to give the name of the app.
It can be any name you can give any name and inspiring.
Just don't provide spaces that should not be spaces in the name, so I will provide a name like food.
Order the I'll provide the same name, then I will enter.
So.
Now the reactor project is going to install in our folder and you need to just go to that folder and.
Check what other things.
Once the installation is complete, we need to just go back and see.
So this can take up to several minutes.
It can also take five minutes.
It can also take 10 minutes.
So this completely depends on the processing power of your PC.
So for me, it usually takes five to six minutes.
It can take 10 minutes to you for you, or it can even take three minutes for you.
It totally depends on your PC, so don't need to worry.
If it takes a lot, it takes a little more time than usual.
You need to just be patient and just see till the installation is completed.
So if that doesn't work, if this command doesn't work and if you see any error while installing this
command, installing this project.
So that means there is something wrong with the installation of nodes and npm.
So what you need to do is you need to follow the steps again, which I showed you earlier to install
an audience and beam.
So just follow those steps and then come back and then do this as all of the steps freshly and new environment.
So this is what you need to do.
React has been the product has been installed here, and it can take up to several minutes, so once
it's installed, we'll do the rest of the work.
So let's wait till it gets installed on a PC.
Hello, guys.
So now, as you can see, the React app has been installed successfully.
So how do you know if the React app is installed or not successfully?
So once you receive this message which says happy hacking, so this means that the Reset app has been
successfully installed on your folder, which I will hold on you.
You chosen to install so two to check that you need to just turn the command alerts and you can see
a new folder has been created.
Inside are the main folder.
So let's just go into that folder using CD and tab.
So now if I run a less command, you will see all of the.
All of the files and folders which are being created using the using the command, which we run, which
is Create React app.
So this is this was it?
Now let's open this up inside.
Are we escort?
So how will open it?
Just go to this.
Maybe, maybe we can just open it through here, only to open it up from here.
We need to first just run the command, which is forward.
And he's got this will run just hit and.
So now you can see our project folder is being open in the Visual Studio code.
So this is how the project structure looks like.
So this is all given to us from the command and create React app, so I've not even created a single
file.
Now this all files and folders are being created by default from their command and are given to us.
This is a very, very good thing that you do need to create anything in the beginning, so everything
is given to us in the beginning.
So let's just review every folder and files.
What is it?
And let me explain it to you, the folder structure of a React project.
So the first thing here is the node modules.
Two You don't need to touch this folder.
You don't need to open it or delete something from it.
It's a very, very important folder, but you don't need to add or delete anything from this folder.
The next is the public folder.
It contains all of the public information, all of the public files, which are needs to be rendered
in the browser.
So in that in this folder usually does.
The main file, which is important is the index stored file.
This is the only file which is important in this folder.
So as you can see, this is an index or an estimate file, and it's very important to have this file
because when we open a website in the browser, what what we see are like on the browser, it's all
legitimate.
You know, it remains the only thing which gets rendered under which rendered on the browser.
So this is all its HTML and this all comment and all, we don't need this, so we will just remove it
to make things a little bit look a little cleaner.
So you can also do it if you like, but there's no because these are the comments and it doesn't have
any effect.
OK.
Next, we'll go to the SABC folder or the source folder.
This is the most, most, most important folder of our project, and this contains all of the important
information about the project and 99 percent of the time we'll be working on this under this fall.
Not only will be creating some folders and files under this folder only, so you need to be careful
with this folder.
So the first thing is the Applaud CSIS, which is associated with the app or just file, so let me just
explain you the apology as well, so this can be considered as the root root component under which all
the component gets rendered.
So it's like the root component, you know, like any component we create.
So that component will be rendered in this ABDEL-ATI file.
Next, we have our best dogs, so we don't need this.
We have indexed dog index tortoises, which is us, which is associated with index dog Jaspal.
So in the next two days, while you can see the app component has been rendered.
So the root component is is rendered in the index or just flat, but this is at the top level.
So this also has a document or Kettleman by early rule.
So what is this ideal route where this is coming from?
So just remember, we went to the public fall and we went to the index days to measure.
Here we have a day which has an idea of roots, but this is the idea which is used here in the index
dog.
Yes, you can see here this is the idea which is use.
So only to get confused about this comments and all, we have been going to clean it up in just a moment.
So let me first just show you how this project will look if you run this project, how this will look
in your browser.
For that, you need to open the terminal with control.
Plus Bektic and.
You know, to go to this folder, food bring app, and we need to go to the main project folder.
And you can see this all are the things which are present in our folders.
No need to run one simple command to run the server for our project, and that command is npm space
S.T.A.R.T. that to start and just hit enter.
So this will take few seconds to load and this will let OD Server go live.
And it will reflect all of the changes which we make here in the browser so we can just open the link
in the browser of our localhost and all the changes will be reflected right into our browser.
So as you can see, this is starting the development.
So what?
So this will take a few more seconds, and after that we can see our website live on the local host.
And these are all the other things that his backers locked or some packaged or Jason, so need to touch
on any of this.
So as you can see, Assad is a starter and you can see the information here that your server is running
on this.
You are this is a local host.
You are all you can just copy it into the browser.
Or even if you don't, I think it might have been open in the browser.
So just click it and.
Now, let me just open the browser.
Okay, so we are in the browser right now and we open that app.
The URL, which was provided in the terminal.
So this is how the default React project looks into the browser looks like in the browser.
So whenever you install a React project and you, you don't do anything, you don't make any changes
to it and you directly run away, just run the server away.
But this is what we are going to see in the browser.
So this is how it looks in the browser.
So let me just make some changes and show it to you how this actually looks.
If you make some changes, if you just do make some changes to, you know, to the to the project.
So first of all, let me do some cleaning and let me show you what are the things you do need to keep
and you just have to delete the first file here is the app to test firing.
Just select this and then select this low code or as v g, then select this report whitelist and also
select this set up start.
Yes.
Select all of this is in the control and then just delete all of this files.
But be careful.
Don't delete app gorgeous, or just just delete the whatever I am showing you nothing extra than nothing
more than that.
Just delete these or files, OK, then hit.
Delete and just.
And so this will be deleted, as you can see, this is deleted and you will get some errors, of course,
because some file has been deleted and those files were imported somewhere.
So that's why we are getting a no, don't worry.
We figured it out.
So in the app, dodges five, we don't need anything now.
Like, as of now, we don't need anything, so we'll delete all of the things which were provided by
react to us and we'll just write.
Hello.
World.
So and we'll see.
And next we go to our index, talk to us, file and see what are the things we need to change.
So we don't need this report web vitals and we don't need this.
Also, this all will just delete it and then we'll save probably the short run now.
And let me just go to dances and OK, all good here.
And I think something is being important, which is our present, and I can't see it either.
So.
No, go dog, as we say, is being imported somewhere in our app.
So let me just see how this all works and how it's being ordered and.
So we found out that in the gorgeous file that is this logo which is being portrayed, which we have
already deleted, so it cannot find it, so we'll delete this line from here because we don't need that
logo anymore.
And now you can see things are perfect.
And let me just show you.
And let me just go to the browser and show you how this looks now.
So let me just go to the browser and let me just show you how this all looks.
So now I'm in the browser and you can see Hello World, which we dived in.
We can see it.
And now let me just grab something else and let me describe something else and show it to you.
Now, let me just provide an H1 tag, maybe each one, and just taking some time, I don't know why
and but we will write another.
Maybe heading.
So we'll just save it and we'll go to the browser and we'll go to the browser and see, OK, another
heading is being rendered here.
So this is what we need to do now.
We will make changes and we will see the reflected changes in the browser.
So this is what we need to do.
The project structure is like this only discloses publicly that we don't need it.
We don't need to make any changes.
And remember, don't need any other folders or files rather than which are which, I assure you.
OK, so now let me just stop the third one.
And let me just clear all of it.
And now we want to install some more packages, which we are going to need further when we move forward
by creating this project.
The first thing which I told you in the introduction would you also that you need to install?
We will be using Real-Time algorithm for the routing and navigation.
So we will run a command which is called and B and install the act hyphen without the hyphen dom.
So just run this command and head anchor.
But this will be installed.
Installing the crowd at home, who are the project?
This doesn't come by default with react.
So to doing so, you need to install it like by running this command solely so you don't need to worry
just one simple line and then react out or bomb will be installed in your project.
OK, so this will take just few seconds.
Not even more than a minute.
It will just take like 20 to 30 seconds and.
The real crowd or bomb will be installed on your project, so as you can see, it's installed next,
we need to install material way, so let me just take you to the website of the material doorway and
let me just go.
Yeah, it is.
OK, it's opening, but this is the website of material anyway, and this is what we'll be using for
icons in our project.
And remember, material anyway is a really, really important.
Or you can see it's an awesome UI library.
If you're working with the app, you can create forms, you can create have boards and all that.
It provides you a lot of a lot of easy life.
So just you need to install it by this command.
Just click here and it will be copied and you just go back to your VSCO terminal and just just paste
that.
Come on and just press enter.
So this will be installing all of the like material UI components, which we can use any time.
So this will just be installing all of that.
And next, we need to install one more thing, which is material new icons so that the product we need
to run a separate command, how you might be thinking that I am, but and running so much of command.
Don't worry this one, this one would be the last command.
Then we don't return any command like we don't need to install any other like external packages.
Then we'll be working inside our project only.
So let just this install, which is the material way, and then we will be installing the material you
icons, so to speak, so little little time lag because it's like around 10 or 12, maybe, I guess
I don't know exactly.
So this is being done.
Then let me just take you to the to the website of to the reactor outer dome on npm.
Let me just show you how important this is.
You can see on npm, it's like it's downloaded so much.
It's like really, really popular.
And that's why we are using it directly to nominate a website.
So let us just go back to our viewers code and check, OK, it's being installed and now we will install.
Icons, icons, a fun.
To the yellow.
OK, so this unit installed just to have this come on and head down to this will install all the icons
on material way off my of in the eye.
And then you can use it in your project that you can use any of the icons.
So you need to just go to the material to a website and.
Then you can just go to maybe search and then you can go to icons, material icons.
This will provide you the entire list of the icons for which you can use in your project.
So.
Sticking a little time.
Wait till it loads and you can see the entire list of the icons you need to just search here and you
just copy and just copy the code and then imported a new in your code.
So we'll do it, will do it, will do it in our projects or no need to worry about it.
So let's just go back to our base code and let's just see if it's installed.
So this is installing, actually.
Take a few seconds.
Not more than a few seconds, and then we are done with the installation and setup of the environment
of our project.
Every installation will be completed.
This will be the last installation from a third party.
So let's just see how much time it takes and.
Then we are going to go and then will be creating our beautiful website.
So we will be creating the first of all will be like creating components one by one and then we will
be rendering it into the main component.
So till it's done, let me just create a folder here in the source where we will be creating our components.
So I will create a folder for all components.
Enter in the thoughts swirl I've created for it, which is components inside this, I will be creating
the components and then I will be rendering it into the main and main, which is Abdel-Aziz.
So as you can see, the material you icons have been installed.
Now we are done with the installation of you installed the crowd and all.
We're installing material while you install material, new icons.
So we are done with the installation and setting up the environment, setting up our project.
So in the next part, we will be creating that board and then we'll be moving forward to the other components
by then.
So.
See you in the next video.
Thank you.