Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Creating a Header component" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

The markup for the header of the application is duplicated across a couple components. Brian would like to create a separate Header component that can be reused. He moves the branding into this new component and adds a back button.

Get Unlimited Access Now

Transcript from the "Creating a Header component" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: I don't think any of this should be really news to you in terms of the react parts of it. Hopefully as we're talking more and more about breaking things in a component. You're like I should break this into component sensor should be going off right now. Cuz we have header in two different places, right?

[00:00:20] What's annoying like say tomorrow that marketing decides to pivot the brand and they want to be called something else now. Now we have to go to every single header that we have in all of our app and change in every single place. That's really annoying, right? It would be much better if we could had one header component.

[00:00:34] We changed it once and now it worked everywhere.
>> Brian: Or whatever reason, say you wanted to change the color of the header to red, any one of those reasons of why you wanted to do that. So we can break header out into its own component. We can kind of decompose this into smaller components and so we can just include the header component and we can also test it individually.

[00:00:56] We can throw it on multiple pages. It becomes much more testable and reusable, all happy good feelings. In fact, I'm presently experience this in Netflix. We have seven different footers and so we had to change our privacy policy link and then I've had to fix it in seven places.

[00:01:13] And I actually just got an email this morning saying, hey you forgot to fix it in yet another footer. So, not complaining, but yeah, I'm complaining, that's terrible.
>> Speaker 2: [LAUGH]
>> Brian: [LAUGH] Okay, so let's break out header into its own little component, and then after that we'll take a little break.

[00:01:35]
>> Brian: So go create a new file called header.jsx.
>> Brian: Okay, and let's just knock this out really quick const React = require react.
>> Brian: const React, let's see, what we want is actually Link out of 'react-router'.
>> Brian: And then, we wanna make a new, yeah, you can make this in whatever you want to.

[00:02:11] We can even make this a stateless functional component. Well no, make it a whatever, whatever you wanna do. I'll do a create class here. We're initially gonna make this stateless, but it's quickly going to be not be stateless. So, just go ahead and not make it a stateless component

[00:02:43]
>> Brian: Okay, and this is gonna be header className='header'.
>> Brian: And h1 className='brand'.
>> Brian: Here I wanna say svideo.
>> Brian: But we want to make this little bit more useful, right? People expect when they click on the branding to go to the homepage, right, that's just a general expectations of UI, right?

[00:03:21] I if you're on netflix.com and you click on the Netlix, you expect just to go to Netflix's homepage. So, let's use Link to do that. Two sides to play nicely with Internet expectations.
>> Brian: Equals brand-link.
>> Brian: And so now we have a nice link in there as well.

[00:03:52]
>> Brian: And down here we're gonna say module.exports = Header.
>> Brian: Questions about that?
>> Brian: We'll go through this on detail.jsx and then,
>> Brian: We'll do the Back button, and then we will break after that.
>> Brian: Okay, so go to Details. And instead of having this header right here, let's go ahead and say const Header = require('./Header').

[00:04:50]
>> Brian: And we're just gonna throw Header on here like this.
>> Brian: Okay, save that. So, all I did was require this up here and then use it right there. That's it. Then what we're gonna do is we're gonna make sure that nothing's breaking, everything looks okay. So, let's come back here to details, refresh the page so that same header's still there.

[00:05:21] But now notice you can actually click on the header and it's actually gonna take you to the Homepage which is exactly what a user would expect out of your program, right? Something that one may ask me is why don't we put this in the general layout, right, because most pages would expect to have it in the layout.

[00:05:39] Well notice this page actually doesn't have a header, right? It would be kind of weird if there was a header or maybe not, maybe you think that's a good idea. And if that was the case, if it was literally on every page then it should definitely go into the layout.

[00:05:51] But this page doesn't have on so we are not gonna put it here.
>> Brian: Okay, let's put a back button up here as well so we can also navigate back to details as well. So not details, back to search.
>> Brian: So, let's go to header again, header.jsx.
>> Brian: And what we're gonna do here is we're just gonna put a really simple back button really quick.

[00:06:24] So, after the h1, go ahead and do an h2,
>> Brian: And 'header-back'. Then inside of here, we're going to put a Link. And this is just gonna go to /search.
>> Brian: Back.
>> Brian: That's it. So we just added that.
>> Speaker 2: There was a question if you could create a route for the navbar that wraps all the pages except for the index.

[00:07:04]
>> Brian: You definitely could do nested routing, but not with our current URL structure. I'll navigate there just a second, I just wanna make sure everyone gets this h2 in there, okay? And I'll push a branch after this, as well.
>> Brian: Okay, I think most people have ceased typing.

[00:07:23] So, let's go just chit-chat a second about that. Notice that these two don't actually share a route, in the sense that they don't share a URL structure, like this IndexRoute doesn't already say. Now, what you could do is you can make route, sorry. Search the component here, right?

[00:07:45] But let's just kind of do it, we'll just kind of hack out [COUGH] for just a second, don't follow me here, but. And then we would have another IndexRoute right here.
>> Brian: With component = search. This would be some sort of like search layout, right, and something like that.

[00:08:13] But what actually ends up happening here is this modifies our URL structure. So, instead of going to details, you would actually go to search/details, right? If you're okay with that being you're URL structure, then go right ahead, and then you could make a common layout between the two.

[00:08:33] But this also seems to be a little bit convoluted of nesting and it also messes with our URL structure so we're not into that or I'm not into that, you can be into it. Anyway, that's why that's not happening right now.
>> Brian: Good question though.
>> Speaker 2: How could you refactor this to use history and take them back to the previous page that they were on?

[00:09:02]
>> Brian: The answer to that question is you've come here to details.jsx, details.jsx. Instead of using a link and not detail, sorry header.
>> Brian: And you would not make this a link, you would make this and anchor tag. This would be an href,
>> Brian: And this would be a function, basically a function call that would be getPreviousLink.

[00:09:38]
>> Brian: Okay, then you write a function up here called getPreviousLink. That would basically go grab the history.back of whatever they were, and then you would put it down here. And then, every time it would call render, it would go get that link and put it here.
>> Brian: That's the basic gist of what was happening.

[00:09:57] And then you'd have to have some sort of fallback, right? Because maybe they directly navigated to the page and you still want the Back button to work and go somewhere expected.
>> Brian: That's the jist that. In our case, because we can kind of self-contained our app, we know that back is always going to be the search page, so that tends to be okay.

[00:10:30]
>> Brian: Okay, I didn't even see if if this ran, so let's just make sure it works. So now you have a Back button up here, and you can click Back and it goes back and forth just fine.