REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Video Lecture | Learn and master: Flux - Game Development

okay in these next videos we're going to
be building single page apps with react
and I understand that there's probably a
few people who have never even built a
single page app before they'd be
watching this so I'm going to try to not
leave you behind while not kind of
making it to beginner for the people are
very familiar with angular or maybe
backbone ember other single page
application frameworks so basically
single page application is just you want
to be able to navigate do everything you
normally do without ever leaving the
page it all happens within JavaScript
notifications and alerts pop up a real
time you don't have to navigate away so
that's a single page application and
here's kind of what I got going on I
didn't want to do it in just boring HTML
although this really isn't beautiful
HTML I went to start bootstrap comm
grabbed a really basic theme stripped
out jQuery out of it I went to boots
watch grabbed a different looking
bootstrap CSS theme because bootstrap
kind of looks a little generic on its
own it looks very generic on its own and
although I'm not super in love with
bootstrap it's really fast to manipulate
so that's why I went with it for these
tutorials and then I went to bootstrap
without jQuery so that way bootstrap
requires a little bit of JavaScript for
stuff like this you can see this right
here these little sliders that is Ryu
know normally requires jQuery for that
which is a little overkill so bootstrap
without jQuery j/s lets those little bit
of bootstrap animations happen without
ever loading jQuery on our page so that
gives me basically this HTML show you
what I got here and this is all in
github again and then so I've got here's
my boots watch CSS and then my client
Minjae s just like we had in the first
five videos and then I've got my div ID
app just like we had in the first five
videos and we'll be starting here and
moving forward building out a full
single page app so let's go ahead and
get into how we're going to do this
again the client just like last time is
loading in a layout it's finding ID app
and it's rendering my layout into that
ID so nothing magical going on the first
thing we want to set up is routing so
that's where when we click on buttons we
can actually route
two different pages different states of
the application without ever actually
leaving the HTML page it all happens in
JavaScript and for react we're going to
want to use react router and we're going
to go npm install s react router get
that going and then we also want to add
history for html5 history so npm install
s history and history has version 2.0
but that is not that's only supported
with react router 2.0 which is not out
yet so we want to do history at version
1 which I think will grab 1.17 yeah
grabbed history at 1.17 so those are
added to our package JSON we got history
we got rekt router now we'll just hit
NPM install for the rest and all this
will be in github at whatever state we
end up leaving this section of tutorials
off with so a lot of this will already
be done for you and then as one of my
awesome viewers pointed out whenever
you're running a script in NPM it
automatically adds node modules slash
dot bin to the path so you don't
actually have to do this part you can
just run web pack dev server and if that
file web pack dev server exists in bin
which it does you can just execute it as
a command as long as you're doing it
from a node script it's going to work
great so thank you very much for that
tip pass it on to you guys and we're
installed we're good to go we can run
NPM run dev and we're rocking and
rolling let's make sure this is still
good go ok killer news net is the only
person only thing that's actually
dynamic on my page right now it's that
is my layout component everything else
here is static HTML so as we go we're
going to be converting this all over to
dynamic and let's just go ahead and
start with our routes our routes are as
we click the hash the hash
part of our navigation appear will
change and allow us to go to different
pages in different states of our
application so react router is installed
so we can now import it here we're
actually going to go router and then
route and then index routes we want to
have an index route as well and then
hash history to get our html5 history
booting up
we're importing all of those from react
router and this is all on react routers
github page so this is nothing magical
here and then instead of rendering a
layout we're simply going to render our
router here go let's clean this up a
little bit we've got our router rendered
and then we're going to get history
booted up here so there we go that's all
it really takes to officially get
reactor out or going and then you can
render out all your routes and point
them to different components so our our
basic route is going to be our layouts
and then that's got a path of route and
the component for that is layouts so
I've already imported layout and I can
inject layout there so that's how that's
working and then I can close out that
route so now my app should still be
working let's make sure it all goes
bundles valid its reloading and killer
news not dead dotnet is still rendering
so that's my layout rendering here for
the default path which is just forward
slash so now I can add some sub routes
to this kind of how how you're reacting
out will work is your layouts going to
be whatever's on your entire page so
that's going to be my navigation up here
that's going to be my footer down here
and then all the other child routes will
get loaded in here depending on which
page I'm on which state I'm on and that
layout might even load in several
different components like it'll load in
a navigation component it'll load in a
footer component for now we just have
killer news net so let's go and just
show you how to make your first few
routes and then we'll start breaking
this page out in the next video so let's
go ahead and make an index route here an
index route let's make our components
here first so you notice I actually
created a pages folder and I put layout
in there so kind of those top-level
pages kind of what we're considering
featured archive settings I'm going to
put all those in a pages folder just so
it's a little easier to get to them so
I'm going to go save this as featured
I'm going to go and just hack these now
featured featured there you go now let
me go save this as what our archives and
settings and then settings same thing
okay so I have featured archives and
settings let's go ahead and port those
now again into client got them all in
there not alphabetical come on OCD have
to do it
ABCD efg alright we're good and then
let's go ahead and load our index route
will be featured path that's the same
path that's our default it's our index
route something leaving that there
component gets featured and now we can
actually add some other routes down here
and they'll have different paths so this
path will be slash archives and that
will get the archives components
opponent
9 copy and paste that one more time for
settings excellent so now we should
actually be able to route back and forth
let's make sure everything's working no
typos page loads great so now we can
actually get to those let me go to my
layout pretend we're building a little
navigation here so I've got killer news
net let's go to wrap this in a div let's
go ahead make our first button what I'm
actually going to do is I'm going to
import link from reactor outer upper
case link and that's going to allow me
to do just a link so instead of doing an
a tag with an href in it
I'm actually just going to do a link tag
and that's going to have a 2 in it so
let's go ahead do that link and this
will go to what is it archives yeah so
I've created this link tag here and now
I have to do is give it a place that I'm
going to which is simple you just add a
2 and that's going to work so let's say
it's going to hot reloading here
archives takes me to slash archives
excellent it's going to load archives
it's going to grab that component and
it's going to inject that component
archives as a child component to layout
so it's basically going to send this
stop prop stop children is going to be
this guy right here so now all we have
to do is render out this dot props dot
children wherever we want it to be so
what react router is done again is it's
taken whatever we've given it as
children which in this case it's going
to match hey your child you match we're
correctly on this path you match as a
valid child we're going to go ahead and
eject you as this props children and now
we can spit that out wherever in layout
we want it to appear and now we've got
our first there you go archives is there
so now let's go ahead and add another
link here to set
things let's reload settings will take
me to settings there we go dynamically
happened archives you'll notice that the
hash navigation is also changing up
their settings archive settings archives
great and there's some other ways that
you can do this as well so you can do
the link you could also wrap say you
wanted to do a button I can just wrap my
button in the link like so and that will
work so that will still get me to
settings I can you make this a boot
strap button
BTN BTN success you load up there you go
so that's going to work settings archive
settings and honestly you can just put
these classes as well because bootstrap
allows you to put these classes on links
as well so let's say your a button
danger there you go archives settings
and another thing you can do is you can
also just kind of call this
programmatically I can just do a button
here I can do an on click is this dot
navigate and will make you go to
featured back home and so now we can add
a this navigate here and I'm just going
to console.log this stop props so you
can see what react router injects into
those props for you so when I hit
featured here's my props that I'm
getting I'm getting a props children
again which is a react component I'm
also getting this history option I'm
getting this history thing I'm getting a
route which is the path that I'm on so
I'm getting a route object I'm getting
any route params and so navigates right
there I get a lot of stuff so what the
prop that I'm looking for is history and
then I can simply push a state and I'm
going to go to where we going feature
I'm just going to just my route so there
we go and now the
your button will push state and take me
back home there you go it pushed me back
home and I'm on featured archives
settings featured another thing I can do
now whenever you push state you get the
back button so my back button takes me
to settings if you notice right there
push state back button took me to
settings I can also replace state and
now I will not get the back button it'll
just say hey my state's going to just
switch out right away I'm there I'm
going to hit featured there we go I'm
there and I thought if I hit the back
button I stay right where I am because
that was where I started off so replace
state is very different from push state
very important for you to know and
that's your basic navigation I know I
kind of flew through that because there
was a lot to cover but I didn't want to
break it up into three videos for you so
again just take your client j/s I'm
going to go ahead and push this code
already to github for those of you guys
who are following this series as it's
coming out go ahead mess around with
routes a little bit we'll get into some
more cool features in the next video