In this video, we'll see how to get started with the reactor.
So the first thing you have to do, you have to create some folder to get started with the reactor.
You can create it anywhere.
So I have created a reactor projects folder inside DeAndre and created a blog website for it.
So inside this folder, I'll be writing the commands so that we can create the reactor.
You can also select doing this project and be using Visual Studio code for the coding part because it
has good snippets and all the packages and start.
And then the terminal coming, you can use different types of code terminal.
If you are a Linux user, you can use Linux in Terminal.
If you can also use the Email Terminal Visual Studio Code, or you can use any other like custom terminal
that you download from various open source platforms.
I am using the custom terminal that is the hyper terminal.
You can go to Google and just search for hyper terminal and then download it.
The good thing about the airport terminal is it has a lot of customizations.
We can change the colors according to what need and everything.
It looks bit like.
It looks a bit good, so I prefer that.
You can also use anything.
It's not a problem, but for it, but you using Visual Studio code is better.
You can use any of them.
So now inside this, the first line of code is NBC's start.
Create.
React app.
So what this.
There is a.
Yeah.
So what this line of command will do, firstly will concentrate on this creative act.
So basically what happened is our Facebook developers who developed the react.
They created a script to create that actually creating app is a very big process.
We have to install on so many node modules, so many packages and everything.
Installing instead of installing one by one, all different instead of using some kind of commands,
all of them together, they made it as a script.
So that's what we need to run for.
That for running that we are using this and built is part of node package manager and.
OK.
This is a script name.
We are running the thread and the DOT means we are running the scripting inside currently territory.
If you give some name, like if you give a blog website, then what it will do is it will create a blog
website or a folder inside the current folder that you are in the terminal and then inside that folder,
it will create that.
So since I already created a blog website folder, I want to talk so that it will create inside the
directory itself.
So once you do that.
And one more thing that you have to remember is the the project name like in which you are creating
the react and the folder should be in small letters.
It should be in smaller escapes and still shouldn't be in uppercase.
That it should be lowercase only.
OK.
And so after this, so this will take some time.
It will take some three to four minutes, so just be patient.
We'll meet once this code gets executed.
So welcome back.
Once you get these kind of messages like happy hacking and some kind of blue messages like npm start
one and everything, then that means so your React Project Project has been successfully created and
also in the region.
You, your go to, you can see all the node modules pop up.
You know, all the code boilerplate code, everything is great.
So now how to run this project, but that we have to use and beam stock.
So this command basically runs the project and it runs on the local host.
Three thousand four.
No, that is a default port.
No.
But before that water will get one is with Belize, we'll be seeing some law and some kind of text like
react or something that is the boilerplate code that the developers actually give.
So we don't want that so can completely delete source folder and you can start from scratch orders.
You can basically edit the source for itself.
So I'll read this word for it.
So you can see this is the, you know, the boilerplate thing that we did, but we want to start from
scratch, right?
We want a plain white screen where we can start our project from, like the coding part for that, I'll
delete the unnecessary things.
So we don't need this test global.
The Let.
OK.
So that's an a problem.
So also.
Index judges.
Sorry to be deleting all the unnecessary court.
We don't need this on, so you can delete them.
And also, you can.
No word, anything, yes, you want to print, whether you want to see the successful or not.
So I I'll be printing a lot.
This division with Class Nearmap and Halloway.
So this is an important mechanism.
This is that we shouldn't no need of any styling.
Yeah.
So once this is done, I'll run the government and stop.
So you start the Soviet.
This is in stock in the local post.
The Senate, so yeah.
So this is what the basic thing that you have to do like just to clear up the boilerplate code code
that is given by the very act developers and then start with the fish head over court or you can also
type.
Hello, welcome to.
Blog website.
Now you can see you have some like called hello, welcome to blog website.
So this is what we have completed in the video.
We have got like we have a we saw how to get started with the React app, how to create the React app,
how to run it on the localhost and how to get started with the code thing like approaches and strategies
and everything.
So one thing I want to say is in public, if you see.
And next on intradermal, you can remove all this unnecessary code.
Yes, everything, no need of any of them.
So can simply remove them.
So, yeah, so as you can see here we are having a division retired equal to do so.
Knowing with this idea of no division, we want all the code to be inside this division.
So how to target this that is working things that Jesus does through the help of Reactor Dome.
There is are not in the function.
What it will, does it, it will render the component that we give as the first parameter.
And then the second parameter separated by a comma will have that target where we need to render this
app.
So the target is document or gate element by hook.
So the element with this rule, the idea that we'll be having as the target and will render the app
component.
So here inside the as you can see inside index actually a menu and having the route and inside the script,
we are having this app component.
So what what is this about this Apache helicopter to block website?
So basically, this is what we had, and I think this is the state state management, basically how
to use this react and then through the help of components output.
And this is the use of React.
Basically, react is used so that we can work with components so that whenever that data gets updated,
as you can see in many websites, the data should get updated at every second.
So then at every second of the page, you need to be reloaded.
Then it will be very slow and the users will.
Then there won't be user traffic on the website.
So for that, what they will do is we will divide that option into component.
So whenever the data is changing, only the components related to that data will get refreshed.
So we will do this with the help of props, hooks and everything that we see in the next videos.
So this is basically the getting started of the React app and the basic inside the top level view of
of of how the React app will be.
And now, in the next year, we will get started with the users lives targeting the main coding part
of the website for that.
Let me just remove this.
Unnecessary things.
On sorry movies, this.
So we are now.
Not a lot of people, and now we are ready to go and see you in the next few.