Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Finishing the Details 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:

Brian finishes the Details component by declaring the propTypes object. He then adds the rest of the user interface components which displays the title, year, poster image, description, and the trailer for the selected show. The code for the application up to this point is on the v2-14 branch. - https://github.com/btholt/complete-intro-to-react/tree/v2-14

Get Unlimited Access Now

Transcript from the "Finishing the Details Component" Lesson

[00:00:00]
>> Brian: We're gonna make it look nice and pretty now. So, first thing we're gonna do is we gonna do some PropTypes.
>> Brian: So one thing I'll say about PropTypes in general, it's almost I'm not gonna say it's TDD, but it's like a TDD mindset of like, I'm identifying first what I need, and then I'm gonna go do it.

[00:00:29] So by writing your PropTypes first, you're kinda saying, here's the shape of my component. Here's what my component expects. You're kind of establishing your own expectations. So a good place to start when you're writing a brand new component is establishing the props that you expect to get.
>> Brian: So in other words, I write my PropTypes first, rather than going back and writing them after I've already done it.

[00:00:50] But that's just a mindset, do what works for you. So here, I'm gonna get a show, right? The show is going to come in with a shape. And it's gonna have a title.
>> Brian: Year, poster, and trailer.
>> Brian: Okay. I'm gonna come down here to render, say const {title, description}.

[00:01:30] Did I not put description up there? Totally should have. Description, year, poster, trailer.
>> Brian: Equals this.props.show. So just pull those out real quick.
>> Brian: Okay, and then now we're just gonna do some nice looking markup. We're gonna put a nice header on it with whatever your brand was inside of an h1 actually.

[00:02:10]
>> Brian: Then we're gonna have a section.
>> Brian: With an h1.
>> Brian: Title.
>> Brian: An h2 with year inside a parentheses. An image showing the poster.
>> Brian: And always put all text, always, always, because we need it accessible. That being said, I'm not gonna do it today, but you should.

[00:02:52]
>> Brian: Actually, I'm gonna make that with `/public/image/posters`. You should also watch the Frontend Masters on the accessible web. Top quality stuff.
>> Brian: Okay, so this is going to be like our information at the top and underneath this section we're going to have a div with an iframe in it cuz everyone loves iframes.

[00:03:34] Now that's how you have to do YouTube so that's why we're doing it that way. So source is gonna be just this stupid long URL. https://www.youtube-nocookie cuz I don't like cookies, just kidding. .com/embed/$(trailer).
>> Brian: rel=0.
>> Brian: If you don't feel like typing all this out, I'm fine to just push a branch after this and you can just pull it down

[00:04:27]
>> Brian: Controls equal 0&amp showinfo equals zero. Okay, we need to make frame border
>> Brian: Camel cased because that's how react expects it. Change those to single quotes
>> Brian: And then we wanna do allow full screen.
>> Brian: Cool.
>> Brian: So, sorry for the long URL, but I obviously did not write YouTube.

[00:05:18] So before I push it, let me make sure that it actually works. So if you come back here and refresh, you should get a kind of nice looking details page.
>> Brian: I gave this workshop once before and someone told me they got a Netflix subscription because they started watching all the trailers.

[00:05:43] So I was like yes, mission accomplished.
>> Speaker 2: Bonus!
>> Brian: So should work. Okay, so let me go ahead and cut a branch here.
>> Brian: git checkout -b v2-14. git commit -m 14, git push. So that I just pushed v2-14.
>> Brian: Great.
>> Brian: Any questions about details? Let's go back to the code.

[00:06:24]
>> Speaker 2: I have a longer question.
>> Brian: Sure.
>> Speaker 2: With data marshaling, how do you pass optionally property, I guess that's optional properties, to children components from parent component with react router? When both parent and child component are rendered by react router such as, localhost/parent, localhost/parent/childone, localhost/parent/childtwo, and I only want to pass data to child one, child two and not child three.

[00:06:57]
>> Brian: I think the answer to that question is kind of the paradigm that I showed you here, where you use these anonymous functions. Because inside of here, this is just the function body, right? So you can return whatever you want at the end, and react router doesn't actually care.

[00:07:11] It's just going to render this entire component, right? So you're free to put if statements in here and if condition a, return this. If condition b, return this other thing. You're free to script that to your heart's content.
>> Brian: Hopefully that satisfies your answer. I'm not sure if I totally grasped the question.

[00:07:37]
>> Speaker 2: Interesting. Amber Lee is saying that their poster image is spinning because.
>> Brian: Yeah because they put the alt text on it. Yeah take the alt text off. It's my CSS. Yeah, I wrote shitty CSS and I'm the first to acknowledge it. Cuz we're going to put a loading circle on there.

[00:07:56] And as soon as you put the alt text on there, that's when it spins.
>> Brian: Cuz [LAUGH] I've given this workshop before, this is my disclaimer of why I did it this way. And we wrote one class name up here. Imagine if you had to write super long class names on every single one of these: image, div, h3, h4, h.

[00:08:17] It just takes a lot longer to get through it, and I was really sick of waiting for people to write class names. As I was sick of just writing class names. So, I was like, no I'm stripping it all out and we're just gonna do tags. So that's why it's really weird.

[00:08:33] So what she's seeing, which is kind of hilarious. If you wanna see it, go to details, and I put alt = 'something' and I refresh. Yeah, I gotta run my server again.
>> Brian: She's seeing that.
>> [LAUGH] [LAUGH]
>> Brian: I should have just made that the loading GIF, yeah.