Well here are a couple dozen videos into a course on full stack react.
And somehow we have avoided working with react at all this entire time.
We haven't touched a lick of re-act it's all been stuff on our server backend.
In this section we're going to start to pivot away from the from the back end server a little bit and
we're going to start to focus on some of the front end elements of our application.
Now before we touch a lick of code before we do anything with the client side configuration at all I
want to take just a quick pause and set some expectations.
All right.
So I want to give you a really good idea of what we're going to be doing in these coming sections because
it's very important that you understand some kind of like how I designed this course to really work.
So when we start to install the client side of our application the configuration that I have picked
are the kind of architecture we're going to use is something that is pretty darn common.
I would say relatively straightforward to set up and get working and exceptionally easy to deploy.
So we're going to have a pretty easy time setting everything up.
We're going to have an easy time deploying it and we're going to get a lot of awesome features out of
the box with react like automatic reloading lynching.
Really good reporting.
All this kind of all the stuff that you really want to have when you are writing re-act applications.
And we're going to have a really easy time setting all of it up.
On the flip side.
So this is this is why I want to specifically take time to tell you about this.
It's really important that you understand it doing the setup will be very easy but understanding what
is going on behind the scenes and understanding how our server is going to work together with the client
is very complicated and very hard.
I'm going to tell you that right now.
OK.
And the reason I'm telling you this is that when we do the setup it's going to fly by and you're going
to think wow this is great really straightforward.
But we are going to also dive into some of the stuff behind the scenes to really understand how everything
is working together and at that point in time you might say to me Steven you're crazy.
Why did we pick this server architecture.
Why are we writing our application like this.
Why is this so complicated.
So I want to be super clear here.
It's going to seem hard because we're going to try to figure out what is going on behind the scenes.
You don't have to understand what's going on behind the scenes.
And if you don't care about that you can just do the set up and be totally happy and say Well that was
easy everything's really fantastic everything's working out just fine.
So the reason we're going through all these behind the scenes stuff is that this is a course that is
designed to teach you what is going on behind the scenes.
Of course we could just easily do the client side setup and call it a day and you know build the app
and walk away.
But you know again that's not why you're here taking this course.
We're doing this course because you want to figure out how stuff is really working.
OK.
So just you know one more time I got to tell you it will seem confusing it's just confusing because
we are going behind the scenes to figure this stuff out.
The actual real set up is very simple and very straightforward.
OK.
All right.
So enough of that.
I don't want to scare you away of course.
Maybe I already did.
But you know whatever.
So let's figure out how we're going to be doing the front end application in this section.
We're going to look at a little documentation.
We're going to install the module and then generate a brand new re-act project.
So in my browser I'm going to open up a brand new tab and I'm going to do a google search for create
re-act create re-act app so create react up.
We just see a nice little pop up on get hub towards the top.
And this is old documentation about a very popular tool for building re-act applications called as you
might guess create re-act out.
So we're going to install this tool as an NPM module and then use it to generate a brand new re-act
project.
Now the reason I show you this documentation page is that you can look around on here and they've got
some really just great great great documentation on how to work with this starter package all the different
commands that are available and this great user guide right here that will answer a lot of many common
questions you might have.
So for example if you want to use SAS or lessen your project Hey here's a link on how to do it right
here.
You want to use images fonts files right here.
Global variables flow type checking all of these different stuff.
They have fantastic guides on here to help you along.
OK.
So let's get to it.
We're going to flip on over to our terminal install create re-act up as a global NPM module and then
use it to generate our project.
So I get it on over to my terminal.
I'm still inside my server directory right now.
I'm going to install create re-act out as a global module by running the command sudo NPM install d'Asti
create react.
Now a quick note if you are on Windows you do not need to add on sudo here.
If you are on Windows no sudo so go back and delete that.
If you are on Windows I want you to make sure that your terminal is currently running with administrative
privileges.
If it's not you're going to see a message that says like you don't have permission to do this.
So if you see that message and your own windows make sure you re-open your command prompt or whatever
you're using with admin privileges.
OK so once all this I get prompted for my password and then it goes ahead and does the installation.
Now installing create re-act out will only take a second or two because it's just kind of a shell of
a program that is used to generate a new project.
Now the actual project that is generated is quite small and quite compact but when we generate the project
and also pulls in a ton of dependencies.
So that's what takes a lot of time.
Gendering the project is what takes a long long time.
Installing this tool does not.
OK so we've now got the tool installed.
We'll use it to generate a new project inside of our server directory.
OK this is really really important right now.
I want to make sure that you are inside of your server directory when you're inside the server directory
and you should be able to see all the files we've been working on.
We're going to run a command to generate our new re-act project.
So I going to say create re-act app and then the name of our project which we're going to call client
and again very important that you call this thing client.
OK.
So make sure you are in your server directory.
You run this command and you call the thing client.
So hit enter let do its thing and it's going to run off and start to install a whole bunch of different
packages.
It's just going to take a couple of minutes just like this message yours says.
So let's take a quick break.
We'll let it do its thing.
We'll come back in the next section.
We'll look at some of what we get for free out of the starter package and we'll start talking about
how we're going to set up our application.
So I'll see you in just a second.