Instructor: In the last section,
we put together a React router,
and we've got our default route of root route
showing our application component right now.
Remember, we're gonna have a lot of different components
inside the section.
And it's really important
to keep kind of consistent terminology across the board.
The next component that we're gonna make
is gonna be our header component.
And this header is something
that we're gonna spend a pretty good amount of time on.
The header component's purpose
is to either show the Sign In and Sign Up links
or show the Sign Out link.
Depending on whether or not the user
is currently authenticated.
For right now, we don't really have any state
to indicate whether or not the user is authenticated,
so we'll just kind of scaffold out something for right now.
I'm gonna create my header component
by making a new file inside the component's directory
and I'm just gonna call it header.js.
Inside of here,
I expect to have probably not any application levels.
Or excuse me, any component level state.
So this definitely makes it well-suited
for being a functional component.
But I expect there to be
a reasonable amount of kind of logic in here
to decide what to render
based on whether or not the user is authenticated.
And so just to organize my code more effectively,
I'm going to use a class-based component here.
So I'll import React
and component from React.
And then I'll define my component,
class Header extends Component.
And by default we will render,
we're gonna make use of a lot of Bootstrap CSS here.
So I am going to use some Bootstrap class names.
I'll place a nav with a class name of navbar,
navbar-light.
And then inside of here,
I'll place,
just put on a UL for right now
with a class of nav navbar-nav.
Geez, these are just a lot of duplication, huh?
You can't get away with going kinda light on this.
You gotta put it all in here.
And then inside of this nav,
just to make sure
that we've got everything working right now,
I'll place an LI with a class name of nav item.
And we'll start off this application
by just putting in some simple text that says, "Sign in."
At the bottom,
we'll then export the header
like so.
Very good.
So a simple component that shows a nav bar.
One LI that just says Sign In.
Again, we're taking kind of small steps here,
starting with just kind of the very static content
that we want to get on the screen.
And then we're gonna come back
and kind of backfill some of the authentication stuff.
Now we wanna make sure
that no matter what inside of our application,
whether or not a user is signed in or signed out,
doesn't matter,
we always want to show the header component
at the top of our application.
That means that we don't really wanna put it
into our router per se, right?
Because the router kind of implies
that sometimes we'll be showing this component
and sometimes we won't.
Instead, we can add the header to our app component.
The app component
is always showing the screen no matter what.
Which makes it a really good place
to put something that is very consistent
and something we always expect to be on the screen,
like the header.
So inside of app.js,
I will import my header
and then I'll show it on,
inside this app component
just by dropping it inside of the div.
Like so with header tag.
Now I should be able to flip back over to Google Chrome.
I currently have the React simple starter
but if I refresh the page,
I get my Sign In at the top.
Right now it's not a link,
so it doesn't actually quite do anything just yet.
But certainly when we put together the Sign In page
the Sign In form,
we'll link over to that page.
That seems like a really good place
to start to dive into our application with the Sign In form.
So let's start working on this Sign In form
inside the next section.
I'll see you there.