All language subtitles for 5. Environment Setup

All right.

Now that you have all the information out of the way it's time to finally start doing some stuff.

So we're going to start setting up the environment.

We're going to be developing in for our first project that's going to start of course with node J.S..

So since this is an intermediate course and I do expect you to already have basic react knowledge I

do also expect that you have a node environment set up.

But I just want to go over the versions that I'm using currently and how you can go get the latest version

for yourself.

All right.

So if you're at the terminal for Mac or the command line for windows on either one you're just going

to type node space dash V.

And that's going to if you have node installed output the version that you have currently installed

so you can see the I'm right now running Version 10 dot sixteen dot 3 which is the current at the time

of recording if you're not running ten sixteen dot three.

Like I just showed.

Or a later version that has come out since I recorded this.

I suggest that you go to this page node J.S. dot org slash e n slash download or it might be a different

U.R.L. if you're in a different country.

So just start with node J.S. dot org and then look for the Downloads tab and there you'll be able to

find the installer package for whichever system you need and that will also come with the newest version

of NPM.

And that should really be all you need to get started with node after you've made sure that you're running

a compatible version of node.

You can move on to the next step and install the next dependency which is create react up.

So that is the framework which is going to provide all the boilerplate necessary to get our project

up and running all of the things behind the scenes that make react work like web pack and babble and

all of that stuff is prepackaged in and create react up and it makes it really easy to just immediately

get started although again since you do have passed react experience I'm sure that you're familiar with

this so we don't actually have to install create react app you can just run it here using the NDP X

create dash react dash app space and then the title of the app that you want to create.

And when you press enter that will use NPM MP X to run the create react app process without actually

having to have installed the explicitly NDP X comes with NPM 5.2 and higher as it says right there.

So since we just made sure that we updated to the newest version of node that includes a version of

NPM that is compatible with NDP x.

So this is all you have to do to get started and we're going to go ahead and do that right now.

OK.

So at our terminal we're going to want to make sure that we're in a directory where you want to make

your project.

So I'm going to change into my documents directory and I'm going to create the project here although

it doesn't matter where you create the project as long as it's somewhere that you're not going to forget.

Once you're in a directory that you're ready to build the project in all you have to do is enter that

command and P X create react app and then we're going to title this app arc development and then hit

enter.

And that's going to run for a little while and as soon as that's finished we'll be good to go.

All right.

And if everything was successful then you'll end up at this screen and it'll tell you where you've created

the project and then it tells you how you can go ahead and get started.

So we are going to change into that directory that we just created and started the project and this

should open up a browser window

and here we are at the familiar create react app loader.

So if you've made it this far you are all set and you're on track to get started with material UI.

There is actually one last dependency that we have to get set up before we can get material UI installed

and officially be started with our app.

And that is react router and that is going to provide the navigation for our app and give us the ability

to simulate navigating to different pages within a single page application.

So here is the documentation for react louder.

You can find it at this you URL and it's pretty basic to get started.

All we really have to do right now is enter this command right here the NPM install.

So once we get that installed then we'll go in and I'll talk later about getting our router set up and

our routes and how this is going to provide navigation for our application so here we are back at the

terminal or on Windows your command line.

And if you still have the development server running you can go ahead and stop that with command C or

control C actually on the Mac and on Windows it's control C as well.

So once you have the stopped and you're in the directory of the project that we created you can go ahead

and type in the NPM install stress save react dash router dash Dom.

And once you get that finished that will have the library installed and we'll be ready to go if you

see these warnings here.

Don't worry it's just saying that it's missing some type script dependencies but we're not going to

get into that.

So that shouldn't be a problem as long as you see the plus react router Dom here.

Then everything was successful that just leaves material UI itself obviously which is just as easy to

set up as all of the rest of the packages.

But we're actually going to go in after that and try out one of the components to make sure that everything

is setup correctly and also to give you your first taste of the library and start kind of dipping your

toes in the water before we dive into our project in the next section.

Here we are at the material UI documentation page which you can find at this U.R.L. and this is actually

the getting started and installation section and you can see here that all we have to do is again npm

install it can get that selected then we actually do have to set up the fonts by including this link

in our HCM mail file.

So let's copy this link and then we'll go and get material UI installed so here we are in our project

directory and we're going to install material UI with the command npm install dash dash save add material

dash UI slash core.

So this is important.

It's not just install material UI it's install at material dash UI slash core.

So then go ahead and hit enter.

And that's going to install all the files that we need.

And we'll wait for this to finish up

didn't take very long at all.

And now we're going to go ahead and open up our project in your code Ed..

And which I can do here just by typing that but open up your project folder any way that you are able

and once that gets loaded up we are ready.

So under the public file that's here we can see this indexed to each.

And here we are going to include right under here that style C link the connects the Google font rubato

to the application which is the default font for material UI and that should be all we need to do.

And so we save to make sure that material UI is all set up.

So we're going to go over here to our source folder and into the app J.S. file and at the top we're

going to type some code here and it's OK if you don't understand it yet.

I'm going to go over all and more detail later but just to make sure that everything is set up and working

and to see material UI in action.

Let's go ahead and import button from app material UI slash core slash button with a capital B Ok so

make sure that you have that correct and then go down to this paragraph tag and let's do right underneath

that paragraph tag.

Let's do a button with a variant of contained

in the closing tag and then inside the button time click me OK.

So we're going to save that and we can just ignore this.

So it's like my yes lint is having a problem I'll fix fixed later.

And you can also probably notice mine set of if you're using atom is a little bit different because

I have plugins installed to style the code as well as to give me extra icons over here.

So if yours doesn't look exactly the same colors and stuff that's OK obviously but make sure you have

that little piece of code right in there and save your file and then flip back over to your terminal

where you're in your project directory and let's go ahead and NPM start that development server backup

which will throw us back into the browser and once this reloads

boom you have a little button that says Click me on it and you can go ahead and cook it and you see

it's got that nice little button ripple effect and that right there is your first material UI with react

J.S. Project.

So I'm really excited for you guys to take this course.

I'm so glad that you've made it all this way through and I think that you are going to learn a ton throughout

this project.

There is really just going to change or development skills and take it to the next level so if you are

ready for that event and ready set go and I'll see you in the next section.