Instructor: Now that we've got our project installed
and we've got our dependencies installed,
and on top of that, we've got a better idea
of what higher order components are
and what we're gonna use them for
in this particular project,
let's get started with some real development.
Now, in this project we're gonna go ahead
and make use of React Router.
And so just like in the last section
where it was kind of assumed
that you knew what was going on with React
and what was going on with Redux,
I'm also going to assume inside of this section
that you're going to know
what's going on with React Router as well.
So if you're not familiar with React Router,
I advise you to look up the documentation
a little bit, and what have you.
I've got another course that includes React Router
if you want to go learn it from scratch.
Otherwise, we're really gonna dive in headfirst here.
So thinking back to the mockup
that we were looking at of our application,
we had three buttons up at the top,
and then we had kind of a body to the document as well.
So let's start by working on the header of sorts.
The header is gonna have our three buttons up on the top,
the home route, a link to the home route,
a link to the resources route,
and then a button to toggle the login state
so the user can either set themselves
as being logged in or not.
So this is definitely gonna be a component
that we're gonna create inside
of our source components directory.
I'm gonna make a new file and I'm gonna call it header.
Now, as I've said several times,
we're really focused more on the
higher order component side,
so as we're putting this component together,
we're gonna kind of just speed
through things a little bit here.
I'm gonna import React and Component up at the top,
and then we'll make a class header.
And this header is going to have
several elements inside of it.
It'll have
a parent nav of sorts
and we're gonna be making use of some bootstrap classes
just to make things look nice.
So our nav will have className navbar and navbar-light.
And then inside of the nav we're going to have
an unordered list, className nav navbar-nav.
What a goofy class name that is.
You'd think that they could just reduce it down
to just be nav.
I don't know what navbar-nav is supposed to be,
but that's a complaint for another day.
So we'll show a class name on an li of nav-item.
So this is gonna represent a single clickable thing
that the user can click on.
And we're gonna end up having three of these things,
one for each of our buttons.
The first one is gonna be a link to the homepage,
which will be our unauthenticated route.
The second one is gonna be a link to the protected route,
the resources route of sorts.
And the final one is gonna be for our actual login button.
So it'll have a button that says
log in, or log out, or what have you.
It also looks like I made a little bit of a typo here.
Be aware of it.
I did not close the li tags.
So I'm gonna just put on a closing one like so.
It should be normal jsx.
Opening and closing tag underneath it.
So we're going to assume that we're going to have
link tags to each of our different routes.
Remember, link tags are a part of React Router.
A link tag is a component that we import from React Router,
and whenever we place one down,
when it actually gets rendered onto the page,
it's gonna show up as an anchored tag.
So we'll put a link to forward-slash.
So this will be our homepage.
And we'll put text "home."
We'll have a link to...
Now this is the protected route here.
This is the one that we're going to want to say,
"Hey, if you're trying to visit this
"and you're not authenticated, I'm gonna boot you out.
"You're gonna go back to the home route."
So on this one, the path doesn't necessarily matter,
but we're gonna come up with a
at least somewhat meaningful route name here.
So we'll call it resources.
And so again, resources is gonna be our protected route.
If someone tries to go to slash-resources
and they aren't authenticated,
we're gonna kick them back to the home screen,
which is just forward-slash.
And then the text for this one
we'll say is just "resources."
And finally, at the bottom we'll say this.authButton.
So we'll make a helper method to render our authButton.
And the reasons for that will be clear very shortly.
For right now, let's just go ahead
and show a single button on the screen.
So we'll just say "button,"
and we'll say "sign in."
So by default right now,
the button's always gonna say "sign in,"
but later on we'll give it a little bit more interaction.
We'll give users the ability to kind of toggle
between the sign-in and sign-out states.
So at the bottom, one more step:
we will export default header.
All right, so this works for our header right now.
Pretty straightforward.
Just show a header, three links at the top.
Let's make sure that this header is always visible
no matter what route the user is on.
Now, to make sure that it's visible
no matter what route the user's on,
we're going to go back into app.js,
and we'll say that app.js should show the header.
So we'll import Header from header.
I'm gonna remove the text that's already in here,
and we'll just show header.
Always show the header inside of our app.
So I would love to do a quick test of this in the browser,
make sure that everything is working.
So I'm going to flip over to my terminal: npm run start.
Looks like I've already got my server running here.
Just make sure that you're running yours as well.
And then I should be able to pick up my browser,
go to localhost:8080, and at the top,
I'll see home, resources, and sign in.
Perfect. Just what we want for right now.
So this is really gonna form kind of
the backbone of our application right here,
at least on the Vue side.
The only other big things we have to do
are create the kind of protected resources route.
We need to implement the idea
of signing in and signing out.
And then we'll focus on the higher-order component.
So we're still gonna do a
little bit more setup inside this app
until we get to the higher-order component part,
but as we're going through the app setup,
at least it's a good review of React Router
and a little bit of Redux in there as well.
So let's continue with the baseline setup of this app
inside the next section.