Instructor: In the last section
we created our app component.
We'll now continue by adding in React Router
to our application as well
and we'll add one or two other components
that a user can navigate to.
So if we go back over to our mock-up,
this is gonna be the root route
of our entire application right here.
So presumably we'll wanna show that
welcome to our application message on the screen.
And then, of course, as the user navigates around,
we're going to want to show these other forms as well.
At the top you'll notice that we've got
a very consistent element of these header buttons.
Now the actual content of the buttons
seems to change over time, but it seems as though
there is at least always a header of sorts.
So I'm seeing a couple of different elements
that we can create.
We could definitely make a header component
that could be displayed through the app
and is not tied to any navigation.
We could definitely make a component
to represent the welcome page.
And we could definitely make components
for the sign up and the sign in forms as well.
So definitely a couple of components
that we're going to have to eventually create.
Let's first make the header component
that will show the different set of buttons
at the very top of the screen.
So back inside my project, I'll make a new file
inside my components directory called header.js
and then inside of here we'll get React from React.
And then right underneath that
we'll make a class-based component.
The reason we're gonna make a class-based component
is that the content of these buttons
or the content of the header
changes depending upon whether or not the user's logged in.
That's not a good enough reason alone
for making a class-based component,
but I think that having some easy to define helper methods
will make working with the header a little bit easier.
So that's why we're gonna make a class component.
So I'll do a class header extends component
and I will remember to import component from React as well.
So now inside of our header we can define our render method.
And for right now, maybe we will just show a div
and we're going to eventually want links
to all the different pages inside of our application.
We haven't wired up React Router just yet,
but we might as well import the link tag
from React Router dom into this file.
And we can at least stub out a couple of different links
to navigate around to the different pages
that we will eventually have inside of our app.
So at the top I will import link from React-router-dom
and then inside of our div I'll do a few link tags.
So the first link tag should take our user back
to the homepage of our application
or essentially the root route.
For the actual text inside this link tag, I'll simply say,
how about, Redux Auth,
which is more or less the name of our application.
So if a user clicks on this thing,
we're going to take them to the root route.
And now we can repeat that process for a couple
of the other routes that a user is gonna navigate to.
So I will copy down the link.
I think the next link tag that we put together
can take a user to our signup form which will be at /signup.
So let's do signup and I'll change the text to say sign up.
And then I'll do the same thing
for the sign in form as well.
Sign in.
And you know what, while we're here,
let's take care of the other links
that we'll probably need as well.
So we will also need a link that will take the user
to the sign out page.
And we also need a link that will take user
to the feature page.
So we'll define all these links right now
and we'll just show them at all times.
And then later on when we have the idea
of authentication inside of our app,
we'll come back to this component
and we'll decide to show or hide different link tags
depending upon our user's authentication status.
So I'll do another link for sign out
and maybe one last one for that feature page
which we'll place on the feature route.
And just to be consistent here with sign out,
I'll do a space on sign up and sign in as well.
Okay, so that looks pretty good.
Now at the bottom of the file,
I'll make sure that I add in my export default header.
And then like we said just a moment ago,
this header component appears to always be visible
at the top of the screen.
The content of it appears to change
but the header itself is always visible.
So I'm gonna put the header component
directly into the app.js file, right above the text
that we already put in here, right there.
So inside of app.js, I will import header from header
and then we'll place the header inside this div.
And just to be a little bit more semantically correct,
I'm going to wrap this JSX
with a set of parentheses as well.
If you do that, don't forget to clean up the semicolon
that you might have at the very end of the div right here,
'cause that semicolon will give you a little error.
Okay, I think we're ready to test this out.
So I'm gonna flip back over to the browser
and once over here, I'll do a hard refresh.
And then when the application loads back up,
you'll notice that we get a nasty error message.
So if you look at the error message
it's actually not that bad.
All it says is that you should not use a link tag
outside of a router, which is totally fine
'cause we have not yet set up
React Router inside of our application.
So let's take a quick pause,
we'll come back to the next section
and we'll wire up React Router inside of our root component.
So quick break and I'll see you in just a minute.