OK, so here we are in the we scored and we got the npm set out, we got the Nordic set up and we also
got the Visual Studio code set up.
And if you don't have that installed, you have to go to this just Google, and you can just type how
to install npm and not just on your computer.
Basically, you need to just go to the Nordeste or our website, and from there you need to download
installer and that installer and download the installer and then install our installer, jet and beam
on your computer.
After that, you know, you need to just download the escort set up and install it on your computer.
The installation process is similar to any software installation process in the world the straightforward,
self-explanatory.
And after that, you need to head towards the Visual Studio code and then what you need to do is just
go to this terminal tab right here.
Don't worry about what you are seeing on the screen right now.
Now you might be seeing a completely different thing.
No worries with that.
So what you need to do is you need to do just go to this term, creditability and click on new terminal
and it will open a terminal.
Now what you need to do is you need to first check if you've got the npm and an order just in order
to, so you need to check the wording.
So there will be a command, which is the new npm and version.
So this will display the version of npm.
And if it's installed, then only it will display other devices to launch.
So that is purely an indication that npm is installed on my computer.
Next, we're going to look at the Node.js so node hyphen if convergent and divergent spelling is wrong.
So let me type it again.
So this is how sorry hyphen hyphen.
And you can see Node is installed on my computer, so that's all we were looking for.
Now, don't worry if your terminal looks different than me because I'm using WCL and this is an open
terminal, probably chances are high that you might be using command prompt because that comes in.
Maybe the if you're using this code on Windows.
So that will command prompt, obviously.
But I've installed WCL and this is open to terminal, so no worries with that.
Don't panic, the commands will be exactly the same.
There's no difference at all.
OK, so moving on next, let us install our React project.
Now what is the React project?
The aqueduct is less like starting God given to us by React, so you need to just install it.
That will be node modules and other stuff which will help us.
Starting off with the project before, like without that, you cannot start off, so you need a scratch
scratching like part, as on the project, is that our one project, so you need that installed?
So for that, you need to tag this one simple command that is the end X create.
I fun the hyphen app and space.
And then the name of the application, which you want to give, so in this case will give Pomodoro.
But you want to give another name, you are totally free to give any other name you want.
But remember, there should not be any space in the name.
It's purely a string, but there's no spaces.
OK.
So that is what to let us give our names.
So that is the more.
Doro so this is the name of the application now, what it will do, it'll create a directory with this
name.
And inside the directory, our project will decide and the project's name will also be same.
So after typing this out, you need to just press, enter and then you need to wait for another five
to six minutes, or maybe two minutes or even 10 minutes to completely random thing totally depends
on the processing power of your PC and the internet speed of your connection.
So that is what you need to do.
Don't panic.
It takes a little longer.
It will take a little longer and just assume it will take 10 30 and then you need to just open.
That followed it up with device code.
So I'm not doing the installation because I've already done that because it takes a little time, so
I've already done it.
So after doing the installation, what you need to do is open up that folder using voice code or the
Visual Studio code.
Now, once you open that folder with the Visual Studio code, things will look something like this.
So let me explain in the folder structure, so folder structure is something like this on the left.
Now the very first folder, don't bother looking at data, it's just created by the IS.
We have not created it.
Next, we have the node modules folder.
Don't do that.
This folder, this is nothing to do with our customization.
This is given to us by the Act.
So don't take this folder.
Don't believe this folder.
Don't understand this folder at all.
Next, we have the public folder in which we have other things like any other images we want to display
publicly any other anything.
We want it to be public.
So here basically there is only one file which is useful that is the indexed HTML, and this is the
file which will be responsible for entering your application in the browser.
So this is the title you can give any title you want.
So let me just give you gave give the title of Mondo ROM Beaumont or OK?
So this is the title we gave.
No, this will be the ideal way to be shown in this thread is what all the browser at the top.
So this is what it is useful for.
Nothing else.
You can disclose it.
Next, you can just close this public folder.
You don't need to touch it now.
Now comes the folder of use, which is the source folder or the A60 folder.
Now, 99 percent of the time you'll be working on this folder only will be changing, adding files to
this folder only.
So remember, this is the most useful folder inside of this.
There will be some other files.
And folders like report were vital stats, dogs and some other logos, and so we don't need them.
So just go ahead and delete them.
But remember, don't delete this file excerpt these files.
What I want is that just delete them.
No problem that you need to look.
You need to make your folder structure look like mine.
So after you're done with the cleaning up of the files and folders, what you need to do is you need
to open ABPS dogs.
And once you open the app drawer, just there will be some other extra line of code through which you
don't need any more like important report vitals and below.
Also, exports will be there.
So just clean that up and keep it as simple as it is.
So it should be like this just an import, just an export, and just a return function that only three
things should be there and nothing else should be there.
So go ahead and make your outdoor jazz look like this, and then we'll continue with the next one.
So I hope you have done the cleaning part and all of the code.
So once you're done, let me just tell you about the start of this hour and how to see the changes which
you make inside the ID on the browser.
Before that, you need to spin up the server now how you will spin up the live server.
So in its D.M.C, it says we simply use an extension called live server.
But here this is not the case.
We will spin up the server using a command.
So first of all, just go to the folder or the directory that our project is deciding to navigate to
that folder.
So in my case, that is Project and Pomodoro and then hit and done, and you can see what are the contents
inside by the alias commander, the list command.
You can see the files and folders are exactly the same, which are present here.
So now what you need to do after coming to this particular folder, what you will do is you will just
type this.
Come on.
But does the npm space start?
And after Typekit, what's going on, what you need to do is just hit enter and it will take few seconds
if you're doing it for the very first time.
Otherwise, it really just just take two or three seconds or more than that.
So after that is done, there will be you want to give it to us, which will show us on where.
Of this project is running.
So you can see US Airways to start it off now.
Let me tell you where it will be running.
So our luck product will be running on a particular port and the local host.
Now the board, basically, which is generally given by these yet as a default, is the three port three
thousand.
You can see it is shown to us inside the terminal that a local local holds to 3000 and on the network.
So this is just our local authorities and port number is three thousand.
Now what you can do is you can just copy this whole you out of all, you can just go to your browser
and open up local news on three thousand.
And you will be able to see changes on your screen.
So let me just show you how you can do that.
So let me come here to the browser and it till now, it might have opened up the server, so you can
see that already has been started here and we can see the changes on the screen.
You can see the title has changed to Commodore arbitraging in the next four days HTML.
And currently the page is fully empty VI because we have not added anything to its let me just add something
and show it to you so that we get confirmed that an app is running successfully, so we will write for
more, though it'll.
Application.
By.
The gist, so let me say it.
And.
Now, if I go to the browser, I should see the changes on the browser, so I'm here on the browser
and boom.
As you can see from replication the three ideas it is running successfully on the browser, and that
simply means that our project is working fine and we have successfully installed this and successfully
installed npm and what.
Everything is running and the changes are being reflected on the browser.
So there is a clear indication that that things are going pretty well so far.
Now what we'll do is we'll create a separate, separate components like this will create this glow component
department component and the header component and all of that will be doing in the next coming videos.
So we'll also be installing a package which is used for this.
So don't worry, things will go on smoothly.
We'll learn step by step everything.
So see you in the next video where we will be doing all of this remaining stuff, like installing that
react countdown timer packet and creating the event text API and all of that thing.
All of those things will be done in the next review.