Complete Intro to React, v2 (feat. Router v4 and Redux) Creating the ShowCard Component

[00:00:00]
>> Brian Holt: This is kind of boring, right, this just shows the title so let's actually make it a little bit nicer. So what we are gonna do here is we're gonna say <div classname="show-card">. I wanna say.<img src = `. So backticks are on the same key as the tilde, for those of you that don't typically don't use backticks, like most normal people.

[00:00:32] And say /public/image/posters/${show.poster} and then close that. So let's talk about this, these are ES6 template strings. They're new to ES6, they are definitely one of my favorite features. So if you've been writing JavaScript any length of time, you're very used to writing something plus this plus this plus this plus and you write plus a bunch of times for string concatenations.

[00:01:06] What backticks allow you to do is they allow you to do template strings. And this kind of syntax the dollar sign curly brace, if you written any sort of bash scripting or look familiar. I'm sure that's where we took it from. It's just saying, okay inside of here this is my normal string, but inside of the dollar sign, curly brace, put this JavaScript expression, right.

[00:01:28] So in this particular case I want whatever is in show.poster to be there.
>> Brian Holt: Okay, put a </div,
>> Brian Holt: And then inside of here, we're gonna do an h3,
>> Brian Holt: show.title, h4 show.year. And actually I want those to display inside of parentheses, like literally inside of parentheses, so I'm just gonna surround it in parentheses.

[00:02:05] There's nothing special about that, It's stylistically, that's what I wanted to do. Then put a <p>{show.description}</p>
>> Brian Holt: And that's it. So this will be a little bit nicer display of our shows.
>> Brian Holt: So save that, come back to here, we'll look real quick. And now you should get these nice looking show cards.

[00:02:39]
>> Brian Holt: Nice looking little UI.
>> Brian Holt: Probably still getting that error for keys, but I'll talk about that momentarily.
>> Brian Holt: Any questions so far?
>> Brian Holt: So what someone talked about a little bit earlier was when do I split out this into a new component? When you're doing preloads or if you're doing like a map to create multiple components, a pretty big code smells if you're doing a lot of markup inside of the maps.

[00:03:21] It's a good place that you wanna split that out into the different component. I would say nearly always. So like, for example, this right here, this has no business being just inlined right here. We really need to go make this into another component and include it in here, which is what we're about to do.

[00:03:38]
>> Brian Holt: So let's go, just like what I was saying, we're gonna go split this out into a new component. Yeah, I will split this into a new component and then push a new branch.
>> Brian Holt: So I'm gonna create a new file called ShowCard.js. I'll come back to search and I'm going to yank this out.

[00:04:05] Okay, and then here I'm gonna say import React from react, I'll say const ShowCard = React.createClass.
>> Brian Holt: Render, return,
>> Brian Holt: Okay. And then, export default ShowCard
>> Brian Holt: Nothing too crazy here.
>> Brian Holt: Okay, save that.
>> Speaker 2: Could you get a variable for show or is that [INAUDIBLE]?
>> Brian Holt: Yeah, good point.

[00:05:03] So, it's actually not gonna be available as show, right? I'm sure my lynch is yelling at me [INAUDIBLE] cuz we haven't imported it yet. But now this is gonna come from props, right? So now I have to say this .props.show.description, right. Which is burdensome, to say the least, right?

[00:05:33]
>> Brian Holt: And easy way to do this as well, using some more ES6 magic, is we can say, const { poster,title,
>> Brian Holt: year, and description} = this.props.show.
>> Brian Holt: And now we get to cut all this stuff out.
>> Brian Holt: This is called destructuring, for those of you who have not seen this before.

[00:06:10] There's a great duality post, 2ality.com, post on it. It's basically saying inside of this show object, I know it has a parameter called poster, title, year, and description, I want you to pull those out as poster, right. So this is exactly the same as saying, const poster = this.props.show.poster.

[00:06:35] It's just a shorthand of doing that.
>> Speaker 3: How safe is that? Is it actually checking that the property names match or is it just taking them in order?
>> Brian Holt: Yeah, it’s perfectly safe to do. I mean, this is literally what it gets compiled to, so.
>> Brian Holt: As long as you know it’s there, right.

[00:06:55] I mean, it’s as dangerous as doing this, that’s probably the best way to say that.
>> Brian Holt: It might be my favorite ES6 feature. It saves me a lot of lines of code, so I like it. Yeah, as soon as we include this show-card thing, it's gonna start yelling at us.

[00:07:20] So Import ShowCard, this is in search.js, from ./ShowCard. And then here we're gonna say return ShowCard = show = show. All right, so we're taking the show, and we're passing it down into the ShowCard.
>> Brian Holt: So now we get a bunch of prop validation errors. That's okay, we expect that, we'll fix that momentarily.

[00:07:58]
>> Brian Holt: But if you refresh, everything should still work. But now we have a ShowCard component which is kind of self-contained for all these ShowCard needs.