This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

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

The header of the application needs to be used across multiple components. Rather than having duplicate code, the header should be extracted out into it’s own component. Brian removes the header code from the Landing and Search, and Details components and creates a single Header component.

Get Unlimited Access Now

Transcript from the "Creating a Header Component" Lesson

>> Brian Holt: Okay, so we have kind of a code smell going on here. We have this header up here, well the one code smell is spinning art, right, that's a bad one. The second one is we have this header here, and we also have the same header in search, right?

[00:00:15] So we have duplicated code. So that's a code smell too, that's probably a component onto itself, so I should abstract that into a component, and then use it in both places, right? Cuz, let's say you change your branding tomorrow, and then now you're a different shade of purple or whatever, right?

[00:00:34] It sucks to have to go and update that in every single place. As much as you can update just one place, that's better. So let's go ahead and go abstract that into its own component. So make a new file. Call it Header.js.
>> Brian Holt: And inside of Header, import React from 'react', import { Link } from react-router.

>> Brian Holt: Okay, I think this is a good place to do it.
>> Brian Holt: So, so far I've showed you stateless functional components. I've showed you the react create class method of creating components. I'm gonna show you the last way to do components right now, which is the ES6 class syntax.

[00:01:28] So we're gonna say class Header extends React.Component.
>> Brian Holt: And then down here at the bottom, we're gonna say export Default Header. Okay. So ES6 classes, I'm not personally a big fan, it's feels too Java-y to me. [LAUGH] But, this is the way that react is choosing to go, for good reasons.

[00:02:00] They're trying to get away from having their own class syntax, and their trying to draw within the JavaScript lines, and just draw within the language itself, understandable. But you lose some conveniences, which we will probably see momentarily. But for now, this works more or less the same, we're gonna have a render method right here, which is going to return mark up.

[00:02:22] Only reason I'd show you this, is if you go to read the react docs right now, this is what they look like, so.
>> Brian Holt: So my caveat here, is things are mostly the same and not totally the same. So just keep that in mind. We are gonna run up here momentarily into some differences.

>> Brian Holt: Okay, so inside of the header we're gonna put in h1. And inside of the h1 we're gonna put a Link,
>> Brian Holt: To, right, and someone clicks on the branding they probably expect to go back to the home page, so that's just what we're gonna do.
>> Brian Holt: Okay, that's all we're gonna do for right now.

[00:03:11] Any questions so far? We'll eventually get to the differences between ES6 classes and react create class, but beyond that, any questions?
>> Brian Holt: Okay,
>> Brian Holt: So now let's go pull that into details.js.
>> Brian Holt: So up here at the top say, import Header from ./Header.
>> Brian Holt: And instead of this header right here, we're just gonna have Header.

>> Brian Holt: Okay, go back to your details page. And now if you click on header, or sorry on the svideo, it should take you back to the home page.