This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Creating a Header Component" Lesson
[00:00:00]
>> Brian Holt: If you're writing React, there's some code smells that you definitely want to pay attention to. One particular thing that you might notice that's a little bit smelly is we have this header that lives on several pages, right? So we have this header here. And then if you go back to Search, we have a really similar header here, right?
[00:00:18] It's not exactly the same cuz the input's here. Similar enough though. So this is where your brain should be thinking, hey, I have two concerns on this page or I have a header concern and then I have a details route concern. So what I should be doing here is I should be extracting this out so that I can have a reusable header component that I can just drop into multiple pages.
[00:00:43] Go give that a shot.
>> Brian Holt: So make a file called header.jsx.
>> Brian Holt: We're gonna import React from 'react'. Import, we'll do that in just a sec. And we're gonna say, const Header = () => <header> and with an <h1></h1></header>, which is going to be the svideo. And then we're gonna export default Header.
[00:01:33]
>> Speaker 2: Wouldn't you also want to put it in Flow?
>> Brian Holt: Good call.
>> Brian Holt: Something I often forget to do. In fact, when I was writing this code, I forgot to opt part of the course into flow and I ended up having to rewrite, I don't know, 10% of the course cuz I just forgot to opt it into flow.
[00:01:55] So it is something that I often forget.
>> Brian Holt: Okay, so I go back to details real quick. And now we have this nice header component. So we can import header from ./header. And then we can just replace this with header like that.
>> Brian Holt: Something I haven't mentioned yet, notice that I'm always calling my personal components with a capital letter.
[00:02:30] Not only is that convention, it's actually required and enforced by React now. If you put it as a div like this or x something, right, it's going to literally output an x something tag to the dom. So it's assuming it's lower case, you want that literally to be the tag name.
[00:02:49] And if it's upper case, then it's a composite component or something that you've created, right? The one exception is, say I was passing in like a monogenous component from the parent and was like this.props.passedInComponent like that. Obviously you can't have dot in an HTML tag. So it knows okay, this is actually gonna be an anonymous component.
[00:03:15] That's the one exception to that rule.
>> Brian Holt: Anyway, make that a header. So now if we come back in here, refresh, our header is still there. That was nice that having this shared component, so want to make an improvement, right? Right now if you click the header, nothing happens.
[00:03:37] Typically when you click the logo, people expect you to go back to the home page, that's generally accepted UI pattern. So let's make that work. So here we're gonna import a link from
>> Brian Holt: React router dom.
>> Brian Holt: And then what we're gonna do here is,
>> Brian Holt: inside of the h1, gonna make this a link, which is going to go to / and then close that
[00:04:29]
>> Brian Holt: What did I do here? I'm out of order. Link goes inside, there we go.
>> Brian Holt: So now if I save that, Refresh over here. Now, I click on the header and it'll take me back to landing. So again, that's one of the big advantages of extracting components out and reusing them, is you can upgrade one thing and it upgraded across the site.