OK, so another view of the scale of the project, let's start building.
So if you do this and you have never worked with React, so first of all, you need to have an audience
and be installed on a computer.
And if you if you have idea and if you have knowledge about audience and you have installed just on
a computer, you can skip this part.
So what you will do is, first of all, I show you from where you can install an audience, so you need
to just search Node.js on Google and then you need to go to this website, which is not the only way.
From here, you need to download the recommended commas to most users, and then you need to download
the installer.
And that installer will install an audience along with npm on your computer.
So that is done.
The next you need a coordinator or coordinator.
I will be using the escort, which is the Visual Studio code, and I will be recommending you to use
this only because that is very development friendly.
So just to download Visual Studio from this website, if you don't have, you can also use Sublime or
any other text or editor like Vim.
But I personally use Visual Studio Code, and I will suggest you knew that this only from from here
after coming to this outside.
From here, you can download according to your operating systems.
And according to the configuration of your operating system, you can just download the file and you
can install it.
It's a normal installation process, so like any of the software in the world, so there's no problem
with that.
OK, so next at work we're going to do is we are going to use values to our for this particular project,
which is being packaged.
So what we'll do is we will lose our jobs here, and you will go to this website, to the official website
here, that is documentation also.
So what it is, it is just it provides us different shades of the colors so that what it is.
So you need to install these values towards your project.
So I'll show you how you can install it.
First of all, I'm just telling you like what it is and the documentation and all.
So this is the package and on and with that, the name of values dogs you can search on and beam if
you don't know what is in beam and beam is a node package manager and it from here only we install all
the packages are not required.
And for the yes, so on that we have this values just.
So here is the like you said, how you can use and everything else, so particularly we are using this
one method, so I didn't show you which one method we are going to use.
So but if you want, you can explore this package as as much as possible and you can make use of it
in different, different ways.
Now we will be using just one particular thing, but you can use on other things.
So let me just show you the documentation if I can go to the documentation.
And.
Know start arbitrary as.
This is all the you said in all or we'll be using this log color and all.
And this is like value which will be passing.
So it is what it is and this is that you can.
There are several ways to use this package.
You can install it via and beam also, and you can use the serial links also if you want.
So in this production will be using npm and we'll be installing it in our project using npm.
But if you want, you can use the code and also it works like exactly the same.
What you need to do is just need to just copy this and paste in your indexed HTML and script that so
that is all what you need to do.
OK, so that's all for this.
Now, let's let's move on to that project.
Okay.
So Project means I have open visual studio code.
So once you download Visual Studio to just open this via sport and then you need to open the terminal
in the stunning new tab into your score to this terminal and click on New Terminal and it will load.
And I have personally installed WSM, which is the Windows Subsystem for Linux, who probably you will
be using command prompt.
So chances are high that you might see command prompt window here.
Instead of this one to terminal, I am using this WCL also for me, it's open to terminal.
And if you also want, obviously you can just Google like how to install WCL on Windows, or you can
just install that and you're going to download this open to terminal from the Microsoft Store.
OK, so.
So for creating the project like the default reactor project, the initial real content on installing
the reactor project, what you need to do this, you need to execute a command and command.
So for that first, you need to check that if you have no yet installed on a computer and you are running
the latest version of an audience before that, you will find this command that is not a fun, a fun
version of this one.
So this will show you the version of the Node.js, which you are using, so it should be updated.
You can just maybe even think seeing this video, it will be more updated so you can just go ahead and
check which is the latest version, and they can win it for most users and just install that.
We can also check the version of the NBN's npm open iPhone.
Perversion, but will show you the origin of then.
Currently, I'm using these words so you can check and install accordingly.
OK, so let me just clear this mess up.
Now, if you have installed both of these things, it will show you these versions.
And if you are unable to see this version, that means these two things are not installed on a computer.
So first of all, you need to just go and install them like the way I told you.
From where you need to install from there, installed that and then you need to open the escort again,
and then you need to come to the terminal and then you tap this command, which is and b x space.
Create iPhone app, iPhone, app and space, then you have to give the name of the project.
So in this case, I have given caller.
Generator, once you give the name, then you turn it into.
So this name, particularly this name.
This is the name of your project and this will be use of your project name.
And once you hit enter up, a folder will be created automatically, will be created with this name.
And inside that will be your project files.
But once you've timed this command, then you need to just hit enter.
And I've already installed two.
I will not presently, but you need to because you need to install the project.
Once you hit enter, it will take around five to six minutes to install the project.
Generally, it takes five to six minutes, depending on the processing power of your PC before me usually
takes five to six minutes.
So don't panic if it takes too much time, it takes you.
Sometimes it can even take 10.
So don't worry, it also depends on your internet speed.
All right, so once you've done it, then you need to open that particular for the folder.
Like that is the folder will be created with the name of the app, which which you like and start doing
that and create React app and space.
The name which you entered from that name or directly will be created.
And that directory or that folder you need to open via VSCO.
So once you open that directory up for a lot of obvious scored, so things will look something like
this.
Let me explain the project structure like the folder structure.
So there will be many more extra files here so that you need to delete and you need to just keep whatever
I'm telling you to keep whatever you see here.
So first of all, there will be a follow up node modules you don't even need to test.
This will keep it as it is, never never delete this.
And there will be a public folder.
You need to touch it.
Just keep it as it is.
Never delete this.
Then you will have a source folder on the site see folder.
And inside this, there are some files.
So this is the this is the project.
This is the folder which we are going to use, like 99 percent of the time.
We will be working on this folder only inside this folder that are many, many things.
So you need to keep only these things.
Most of all, you need to keep this app gorgeous in next door.
Yes, and see if this file for both of them is an index Trotskyists.
Then you do also keep this package logged or decent package into this and whatever you're seeing here,
you basically you need to keep this other than that I-Report, web, vitals and other things, you have
to just delete and clean it up.
They are useful for, but for us, they are not.
Actually, we are not working on such a scale that we will be using testing and all.
OK.
Once you cleaned up everything, you need to come to this file, which is the App Dogs, after coming
to the App Jazz, you will see a lot of code here, which will not be with me, Lord be using.
So you need to clean that code and make your drawer desk look like this.
So your app drawer, this should look like this.
Delete everything and just keep this basic thing.
So once it is, once you've cleaned up everything, your app drawer just should look like this.
OK, so now let's test an application by running it.
Let me provide had something like hello, caller and Jen read.
OK.
So let me save it now to run our project, what we need to do is we need to go and we need to open the
terminal and we need to navigate to our project folder, a project like the directly where our project
is residing.
OK, so I'll I'd like to see you demonstrate directly and I will like go to the folder.
So that folder for me is project and color generator, and I turned up.
Now I'm in the flow generator aplicar folder.
From here, I will press this command that is npm space start and stop.
So what it does, it just spins up a server on a particular post on local laws.
Where do you want to see your changes, life?
Whatever change you make in the application that will be reflected live on that local host you are and
that you can browse it in the browser.
So then you need to press or enter.
Now it will take a few seconds if you're doing it for the first time, it can take a one minute bite.
If not, then it can take few seconds to spin up the server.
OK.
Third, showing that gun buyers successfully and our website is running on this, you are a little for
three thousand.
So let me just go ahead and check in the browser and it should automatically open app so you can see
on the board comparison we are running and this is the text with your tablet.
Hello, color generator.
So there it is.
This is what we are going to see here.
And that's it.
Now we are.
Our website is running here and our app is working fine.
That means we have successfully installed the project for now.
Let me just note this now we don't need values.
Or yes, maybe we need for the documentation on yes, we do need.
Okay.
So let's go to the VSCO now and start coding.