In the last section we started talking about some of the different concerns that we're going to have
as we build our application on the front and side.
So in this section we're going to start setting up react.
We're going to set up re-act router we're going to set up redux.
Now this whole process is going to take just a little bit of time to go through because while I am going
to assume that you might be somewhat familiar with Redux I will assume that you have not set it up from
scratch before.
So as we start to set it up I'm going to talk about a couple of different libraries that we're using
and why we're using each of them and exactly how redux works with react as we go through this.
So again we're going to do a little bit of the basics but in general I'm hoping that you've got a reasonable
idea of what's going on.
So let's get to it inside of my project directory.
I'm going to find my client folder.
I'm going to find my SIRC folder inside of there where we can find a bunch of existing files that were
generated automatically when we made our application with create react up.
Now in this course I don't want to use any boilerplate whatsoever no boilerplate zero or at least no
boilerplate on the Riak side you know of course we still want all the web packs set up and stuff like
that from create re-act out.
But I don't want to use any of these existing files inside the SIRC directory.
So I'm going to delete all of these existing files except for the register service worker J.S. file.
I'm going to keep that one around for now but everything else inside of your get lost is going to delete
all of them
and move to trash.
There we go.
OK.
So now I'm just left with registers service worker inside of the sarcy directory.
So let's get started.
Let's talk about the first file that we're going to making inside of our application.
We're going to have essentially two root files.
Well one real root file but then another one that's very closely related to it.
Right underneath it the very root of our application on the client side is going to be and a file called
index Dot.
Yes this file is going to contain the initial boot up logic for the re-act side and redux side of our
application.
We can think of this indexed file as putting together all of the very initial data layer considerations
of our application which for example case in point is going to be the redux side of things.
So indexed us is really going to be all about redux inside of your I'll basically just say redux.
That's what it's doing for us.
Directly underneath the index file we will make a single component called app jaywalks the update just
file is going to be essentially concerned with the rendering layer or the re-act layer of our application.
Now inside of this APTA jazz file when I'm really essentially talking about is figuring out what set
of components to show on the screen.
And so this is going to be the primary location for setting up all of our re-act router related logic
so we can essentially imagine indexed not just for redux stuff outtalk stuff for redux stuff.
Now the very simple reason for taking this type of approach is that we're going to have a pretty good
amount of configuration around both redux and react rather inside the application.
And if we try to stuff all that logic into a single file it's just going to get really confusing really
quickly.
So that's why we're going to break it out into two separate files.
Now if we kind of take this approach right here and think of it in the context of our overall application
you essentially end up with something like this.
So at the very top we have our index not just file that's going to show an app component and then the
app component is going to show a bunch of other components inside of that.
So the app is going to show things like our head or component that we just spoke about two seconds ago.
Remember that's our header right here.
The header the component will also show the landing screen it'll show the dashboard and survey new or
survey form you know all that kind of stuff.
So again the component is really the root of the essentially react side or routing side of our application.
OK.
So let's get to it.
Let's start doing the setup.
The first thing we're going to do is flip on over to our terminal and we're going to start to install
a couple of different dependencies so I can flip on over to my terminal.
I'm going to kill my server completely at this point.
You might see an error message that says hey we can do something with it next time.
Yes.
That is of course because we just deleted that file inside of our client directory so we can't even
really run our server anymore right now because we don't have that very root file inside of the client
side of our application.
So I've killed my server and now this is extremely important.
And again this is something I'm going to tell you constantly throughout this course.
Remember that we have to package some files at this point.
We have one file for all of our server dependencies and one file for all the client dependencies.
So when we start installing stuff around the client side of our application like re-act router and redux
and all this other stuff we really have to make sure that we are inside of the client directory of our
project.
So I'm going to change into the client directory before I run any NPM install commands.
If I run NPM install while inside of the server directory that's going to install dependencies to the
server side of our project.
And so right now the server side clearly doesn't really care about reactor Reebok's or anything like
that.
OK.
So inside the client We're going to do a new install dash dash save and we're going to pull in a couple
different dependencies.
We're going to get redux.
We're going to get re-act dash redux and we're going to get re-act dash router dash Dom like so get
so that's going to take a minute or two to install all these things while that's running we'll flip
back over to our code editor going to find my SIRC directory where we just deleted everything from I'm
going to make a new file inside there and call it index dot.
J.S. OK.
So this is going to be the primary location for starting up essentially the redux side of things inside
of our application.
Now we are going to also render our root components from inside this file because this is like the start
of location but we're not going to put a lot of like say re-act configuration in here.
We're just going to use this file to render our very root component to the DOM.
So let's start by putting together a little bit of boiler plate right now and then we'll come back and
finish it up in the next section at the top.
We will import re-act from re-act from my laptop really slows down when I start to record and install
modules and like do stuff at the same time so sometimes it slows down a little bit.
Anyways we import reac from re-act import reac dong from reac dash dong and then down here at the bottom
will place our re-act Dom render a call.
Remember Rock dom takes two arguments the first argument is our root component and then the second is
where we are attempting to render that component to.
Inside of our Dom now our root component is going to be the app component.
Remember the app component which has essentially all the routing logic of our application.
So I think that maybe right now this will be a good place to take a break.
We'll come back in the next section.
We'll set up that route component and then we'll make sure that we can kind of get our application running
and still show it inside the browser.
So safe things right here.
We'll take a quick break and come back in the next section.