No, everyone and welcome, so now we are done with the introduction part, and now what we do is we
need to start recording part.
And for that, if you are new to react, you need to install an audience and beam on your system.
And for that, you don't have it.
You need to install it by going to the website.
And if you have, you can just skip this part and wait till I jump on the next part.
So if you don't have it, you can just come here on this particular you and then you can download the
installer.
Is this one, not the current one, because it may contain some bugs and that some time to be like recommended.
But as of now, you can just download this one and you can just install.
It's a normal installation process like any other installation in the world.
OK, so once you're done next, you need a good editor.
So I personally use VSCO and I would highly recommend you also to use it because of any developer friendly.
But there's no compulsion you can use other predators do like sublime or item or any of those which
you like.
So that's not a problem, but in this project will be using VSCO.
Okay.
So after you are done with the installation, what you need to do is you need to go to the Visual Studio
code like if you install it.
If not, you can just download it, or you can just provide it on Google, like how to download via
scored and just go to its website and you can just download that audio file and then you can just install
it.
So that is also a very straightforward process and nothing special in it.
And once you're done with the installation, you can just open it.
And then what you need to do is once you are in the video, don't worry about this all which is shown
on your screen, that is a different thing.
If you are new, if you are not just installed, then don't worry about this.
So you need to just look at the desktop section and then you need to do what's called this terminal
and then click on the new terminal.
And then that will open up, I'm using the blue as a lubuntu, that's why my thumbnail looks different
and you might be using command prompt, so there's no problem with that.
All the commands would be same.
And the next what you need to do is you need to.
First check of the Norges and BMI installed on a computer or not, so for that unit to take this command
and beam open hyphen version, so that will show you the version and version will be shown, will leave,
it's installed or not, if not to launch the version, and it will show you that the command did not
respond.
OK, so you can see that the watch and that means you have successfully installed.
Same thing we can do for would also load version and it will show a diversion.
OK, so that means we are good to go and we have all of the things installed to let me just clear this.
And now next, what we need to do is we need to create our default React project.
Our default project.
It's.
Starting project or the initial project, which is given to us by the yet and then you can just start
working on it from scratch and you can create your own components and all.
So for that to get that particular thing, you need to to have this come on, that is and b x.
And it.
I fun, yeah, I fun, fun Spears and then the name of the app you're going to create for today will
be creating Google Keep.
So will Typekit Google it.
But remember there should be not any spaces in between.
It's just a spring, but there should be no spaces.
Okay?
You can provide hyphen or underscore this.
That's okay, but there should be no spaces.
Okay, so once you're done with this, uh, type in this command, you need to press, enter and.
It will take you around five to six minutes or maybe even 10 minutes, depending on your processing
power of your PC, so that's not a problem.
You can just type this come on and hit enter.
And after five to 10 minutes when it's installed, it will show you a message of happy hacking.
I'm not doing it because I've already installed it, because it takes a little time that I already done
it before.
So, yeah, it will take you an hour, five to six minutes, and then it will show you a message of
happy hacking and once it shows that message.
But that means that.
That thing that the and the reactor initial product has been installed on a computer, and now you are
good to go.
OK, so once that is done, you need to open that particular folder.
One folder will be created with that you have provided for the app name.
Once that is done, what you need to do is you need to just go to that folder and open that folder using
the school in the village school basically open with this.
So, so once you've done that and you adhere to what you will do is you will check for the folder structure.
It should look like this.
So let me explain in the folder structure.
So these are two folders which will not be working on the only folder which will be working.
99 percent of the time is stored folder there, such as the folder.
So don't take the small modules or the public folder to let them let them be what they are.
And once you come here, so you need to go to ABDEL-ATI.
So this will be a root file and every component will be rendered inside whatever we need to show on
the screen.
So that will come here only and then and it will go to the browser.
So what we'll do is there will be some extra code written here so that you need to clean up.
And also, there will be some Excel files like report that vitals best years and something like that
so that you need to delete and logo and we don't need them, actually.
Project is not that big that will need testing or not.
We're just doing a basic project, OK?
We don't need that.
We are not pushing the app into production to be used by like I on some.
So then we don't need any editing and not.
So once you are done with that clearly cleaning up all the folders, you need to just keep this folder
which are displayed on your screen, not not any of the following, except this OK.
And you can even keep index or TSA or started OK, but not other these files, all of these ones.
And once you are here, what you need to do is you need to open our gorgeous and there will be some
extra food written here, like importing report about vitals and all that.
Also, you need to clean up and your ABC13 should look something like this.
So then you are going to go to inside this.
We will write something and we will check if our app is properly running or not.
Let me just try it here.
And your world.
Save it, and yeah.
Well, this thing automatically, like got in line, so that is because of the extension, which I'm
using, that is a pretty good.
So you can just install the extension and view and scored what it does.
It beautifies your code on C EC whenever I'm writing some code and it's indentation is not correct or
things are not in order.
So whenever I save that file to on as soon as the save the file and the code reflectors itself and it
like automatically arranges itself in order.
So with the help of that particular extension, that is the British, let me show you the extension.
Is.
The.
Yeah.
This one.
This is the extension which you need like you don't actually need, but it's good to have, it's good
to have this, okay, so back.
Back to the bar.
Yeah.
To we would have done this now how we will check like how it's going on in the browser and I'll go there
for that.
We need to go to the terminal and we need to go to the detective.
Our project is located, so I Ikea's that it's inside the project and inside that then we will keep,
then I need to go inside and then I need to have this particular command, which is npm.
Dark, but that is the only commodity you knew to hype.
And once you hit Typekit, that will start.
Officer, what will host at a particular port?
Probably three thousand and.
Once the bank said it would have started and the port is running on, however, it is running on the
port three thousand, then you can just go to the browser and open local doors for two thousand and
then the changes will be reflected on your browser.
So that is where to the server started.
That gives you it usually takes like five to 10 seconds.
But if you're doing it for the very first time, it can take a little longer.
So as you can see, are Sarwari, this Typekit and you can see the message compiled successfully and
that is this you are well, the point about us running is the local host and it's running on 40000 who
let it go to the browser and check this rural problem.
It might have been opened like by default on its own, so we don't need to open it.
But if in case, if it doesn't, so you're going to just direct to this, you are.
OK.
And you can see localhost and whatever the tax which you've written inside there, David, that has
been rendered here for now are.
App is working perfectly, so this is basically and this was to check if our app is working properly
or not, and by doing this, we got a confirmation that whatever we type and whatever we do, that reflects
on the browser on the three thousand.
So that is what we wanted, actually.
And now we can just move forward and get another folders and all the components which will be rendering.
So will be they will be requiring and everybody will very first should be reading and have, but we
can also call it a header.
So the very first thing which will do is will you create the head of or will create a mailbox?
Programming is called never, but you can also call it ahead of.
So that said, Max will do will create never or denied them, will agree, will give some content to
it and will give some styling also to it or it.
Actually.