The last video we saw the introduction to our project.
So now here, now I can show you, oh, like, what is the complete record of how the project looks
like?
As you can see, this is that Gorgeous X will be lighting the logic, business logic, and you will
be using the components.
These are the components.
These are the components that we create.
We can see over here in the components for, look, these are like these components are present.
So if I open or create area, you can see the code for create a real component, can see the code for
header component, can see the code for the Node.js component.
Apart from this, we'll also see basic styling of this component so that the final web page should look
as we saw in the last video.
So these are the fancy step by step.
All the components are styling and like the reasons behind writing that logic and everything.
So first thing we'll have to we don't mean this thing will open a new window.
And determinant so that we can get started with the reactor.
So now I am in my drive in a folder called React Projects and a folder meant to do that.
So here I have all my reactor up inside this folder.
So how to create reactor?
One simple line NPCs create.
The act up, so before executing this, I'd explain you what this line of orders actually manually setting
up a React project is a very big task.
We need to write so many lines of code installed, so many node modules installed stop so many dependencies
that this consumes a lot of time.
So what Facebook developers did is they created a script that's good.
That's all the work that we need to do manually.
So that name of the script is create react to.
Subsequently, every up is the name of the script that instructs the React app inside the folder, on
the folder that you want that is created by the Facebook developers and is like tool.
You can use it as a tool that runs the script.
For example, if you want it on a C program, you need a G Plus Plus.
If a C++ Program G Plus Plus or as C.
If you want to run a Java programming on Java, see this are compilers like similarly that can use the
same analogy.
This is not exactly compiler, but you can use that analogy and be a part of npm, nor package manager
that is used to run this script.
OK.
And then this is what this darkness is.
This creates the React project inside the current directory.
If you don't want to create, send the current trend, you want a new folder also inside this territory.
Then you specify the full name since you already created a folder called to the app.
I want to install my React project and said this current folder itself, so I'll be using dark.
So once you write this for this, click on into and one more thing the name of the a folder that you
want to have your React app should be in lowercase.
Everything should be lowercase and I think should be in like not even a single letter should be in uppercase.
These are the convention naming convention rules of React project.
So you can see the package I decided to install.
It will take some time, like a few computers, it might take five minutes, but if you can to three
minutes, if if you are having a very powerful system, it may take only 30 seconds or 20 seconds.
So we'll be back once the installation process like this whole process gets finished.
So we are back.
If you see these kind of messages like happy hacking and people start, if you see these messages,
then that means the reactor has been successfully created.
So know how to run this reactor.
You can also see the all the node modules have been installed and everything.
So how to run this reactor up there, a simple command and beam stop so they can stop the reactor.
You should read that before the well updated the reactor.
So in fact, to the up folder, I'm executing this command and beam stuck.
I click Enter.
This will happen in time like around 10 or 20 seconds, so won't take that much time.
So before that, this will run on a defaulter server.
Port number three thousand will open automatically in your default browser.
So I'll be using Google Chrome so that it has a good developer.
Control tools for editing As you can see, there is some low logo that is having some animations and
texture and some background color.
So why are we having this react?
Developers gave a boilerplate code for this reactor project, so this will install a default date,
but we don't want this.
We want to start with the white screen.
So how to do that?
So I'll do some reprocessing work over here.
So first thing, we have to delete all the unnecessary files.
Does do badly with me so that you won't get lost.
OK.
And then or to public.
All of this, we don't need any of this or more to recycle bin.
Unprepossessing look like of.
Delete all the styles, grabbed our jeans, we don't need this slogans or deleted.
And then we just a hello world, so we'll print all over.
At one.
OK, we'll bring that to Booth.
Welcome to list.
Welcome to to do list.
OK.
So late edition and in the next hour of convergence, we don't need any of this will be more.
Yes.
Yeah.
And I'll go to Yemen any more, I'll just buy that bitcoin.
But would be.
To those most at.
So once we do all this preprocessing now, open collapsed lung cancer like we have got a plain white
page and welcome to do text.
So what's basically happening?
You will get a high level view on what is happening.
So an indication of family, this is the base.
So here we are.
Having a dip with ideas will now go to Abbott and averages.
So we're instead of gorgeous.
You can see.
So Apple doesn't even exist in dark.
You can see it importing the agree on everything.
So what we are doing here is we are running the port of next ADHD a mode, and we are inserting all
the code that the reactors inside this deck, inside the dignitaries who, as you can see here, we're
getting the document get element by adding, we are getting that element with it too.
And then inside that, we are rendering it at component.
So what is app components?
It is a division with page one.
We are returning it.
So basically, this is what we are printing.
So now similarly, in our budget, we can use other components, will create a components folder and
there will be a dollar component like Create Area, Note Dot, Jan. six and all the components and import
them and use in our budget.
But on the business logic board.
So we'll see everything one by one, step by step further reduce.
In this video, we have created the reactor and then we'll start building the original website that
we want to build from the next freedom.