How to Install React.js on your Computer - Part 1

so we're gonna be sitting up react GS on

our computers today and you're gonna

need no js' so if you don't already have

it make sure you download it and to

verify that you have it working you're

going to open up terminal or command

prompt on windows and just type in o - V

and you can see the version of the node

that you have on your computer I'd

recommend a high version of node I'm

using 10.8 but as long as you get MPM

with it you're going to be good so when

you install a node it also comes with

this thing called NPM you can see the

version of that you're probably gonna

want at least version 5 of NPM all in

six point four point one and then also

you're going to make sure you have a

program called MPX

so this comes with NPM and node as long

as NPM is above five and node is a

certain version so that's why I said

make sure you install the latest

versions of those because you'll get MPX

with that and a reason why we're going

to MPX is that what's going to allow us

to install this so to install react

we're going to be using this thing

called treat react app so this is

something to create new projects with so

every time I create a new react project

I'll basically run this program and what

it will do is it'll create a folder and

it'll set up a react project for me so

to do this I can come over here and say

MPX create react app and then the name

of my project so in this case I'm

calling my project practical react and

what this does is it installs all the

dependencies that I need to set up react

and sets up basically how I can start

the code and start up react so when this

is done we're gonna have a folder that

we can CD into and then we can start it

up so I'm going to CD into practical

react and now I want to open this in my

favorite code editor I would recommend

using Visual Studio code for this it has

a lot of nice features and works really

well with react but you can use pretty

much whichever one you want so I have

Visual Studio code install already and I

have it in my path so I can just do code

and then a period and it'll open up the

folder that I'm in but you can also just

open up the project by going to file

open and clicking the folder we just

created now we're going to go through

what all of these files are here in a


or in the next video but right now I'll

just verify that your install is working

so I like to open up terminal and visual

studio code so if you come up here you

can say terminal and new terminal but I

would recommend using or getting used to

a hotkey for this so its control tilde

for me or sang this to a hotkey that

makes sense for you because it allows

you to just easily toggle the terminal

open and close and this is something

we're going to use a lot alright so and

by the way this is equivalent to just

doing it in our terminal over here but

this allows us to stay in visual studio

code so now I can do NPM start and this

is just to verify everything is working

so what should happen is it's gonna

start out the website at low post 3000

and you should be able to see this it

says welcome to react so if you see this

you successfully installed and set up

your first react website right here on

your computer now this next thing is

optional but I highly recommend it so

this is a plug-in called prettier I

already have it installed online and

what this does is it formats your code

and I recommend installing it and when

you have it installed and set up what it

does is here's some code if I mess up

the formatting of this so it was nicely

tabbed over notice how I kind of mess up

the tabbing now when I save this it's

gonna automatically fix any kind of

weird formatting that's going on with my

code so it saves you a bunch of time

when you're coding now I have mine so it

runs prettier every time I save it so

this is a preference that I have in my

preferences settings and this is

something it just format on save and I

have that turned on and I like this here

we go open settings dot JSON I prefer

this view the visual studio code is have

multiple views for viewing your settings

and so you can see here's my settings

right here and we can see editor dot

format unsaved is true so you want to

turn that on and that will actually

every time I am coding now if I make any

changes to the file and I just hit save

it formats them nicely so does it for

this video guys we setup react on

Computers and the next one we're going

to take a look at what this code is