Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Making a ShowCard Component" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

With the JSON data in place, Brian adds the UI for displaying shows. Then Brian makes the ShowCard component and introducing how to pass properties into a component. Brian takes questions from students.

Get Unlimited Access Now

Transcript from the "Making a ShowCard Component" Lesson

[00:00:00]
>> Brian: We're gonna make this a little bit more complicated and display a little bit more. So what we're gonna do now is we're gonna make a div className = show-card.
>> Speaker 2: I have a follow up to his question.
>> Brian: Sure.
>> Speaker 2: So remember early on when you showed us the style with the two curly braces, right?

[00:00:26]
>> Brian: Mm-hm, mm-hm.
>> Speaker 2: And you said well, a lot of people get uncomfortable with that so let's pull that out into its own variable and then substitute the style variable. Would that be an option here or not because we are returning the h, or we're projecting with the map function to the h3?

[00:00:46] So does that have to happen inside our parentheses?
>> Brian: So you could totally do, so let's just say I do it up here. You would do it inside the function body. But you could totally do like const preload.shows.map. Show,
>> Brian: h3 show.title,
>> Brian: Right, const shows, right? So now shows is an array of components.

[00:01:25] And I can totally right here just say, shows, that works just fine.
>> Speaker 2: Okay.
>> Brian: Does that answer your question?
>> Speaker 2: Yeah, I guess I was making the assumption that in JSX files, only within component
>> Brian: Like within the returns?
>> Speaker 2: Last definitions do the HTML syntax make sense.

[00:01:46] But it looks like anywhere in the file.
>> Brian: Totally, yep.
>> Speaker 2: Awesome.
>> Brian: And we'll do this later once we start doing like conditionals, right? You can technically put conditionals inside of the return blocks of JSX. It gets real hairy real quick. So I like to pull them above, store them in variables, and then show them or hide them depending on whether or not they're in the variable or not.

[00:02:04] So yeah, that's astute, that's a good way of doing things for sure. What I just showed you here is a horrible way of doing it because the shows would be predetermined. So if anything inside a preload.shows changed, it would not change. But we won't worry about that for now.

[00:02:31]
>> Brian: Okay, so we're just gonna put some,
>> Brian: Some components in here.
>> Brian: I'm gonna put an alt tag on our image cuz we're good citizens of the Internet, and we make our things accessible.
>> Brian: Show.title, Show Poster. So take note of that is a back tick, which is the same key as the tilde This is an es template literal.

[00:03:06] You are welcome, I have, again, linked to the tuality post on template literals if your familiar with them. But suffice to say rather than doing, like if this was a string, and I had to do concatenation, oops.
>> Brian: That's what it would look like, right? Like we've all seen that syntax before.

[00:03:35] So with temporal literals, you can just do this. And then anything between curly braces with the dollar sign in front of it, which is like the same kind of bashey way of doing it. It gets outputted as an expression, and then anything not inside of it is literally the string.

[00:03:52] That make sense? So we have here House of Cards, this will be House of Cards Show Poster.
>> Brian: Okay, and then we're gonna do a source for the image, again, using our temperate literal strings, I'm gonna do /public,
>> Brian: /img/posters/$ show.poster. I've included a bunch of posters in your repo which is where that's coming from.

[00:04:27] Okay, we're gonna do a div.
>> Brian: Then we're gonna do an h3,
>> Brian: And show.title. We're gonna do an h4.
>> Brian: With show.year.
>> Brian: Now for display purposes, I want it to be parentheses around, so it'll say, parentheses 1996-2005, end parentheses. So I want parentheses literally to be output to the DOM.

[00:05:01] So I'm going to surround this with parentheses. But I just want you to know it's literally parentheses, right? Okay, and then down here, we're gonna have a p which is going to be the show.description.
>> Brian: Okay, so now we should be able to save that. And if we come back over here, you should be seeing more stuff with broken style.

[00:05:39] You should be seeing broken style, right? The reason why is we're gonna go do this with style's components in just a second, probably after the break.
>> Brian: But yeah, you should be seeing something like this, right? So back to question, which is, we're in search
>> Brian: We kind of have two things going on here, right?

[00:06:04] We have the search component which is the search page, right? It's the layout for the search page. And then we have these inner show cards, right? So there's kind of two competing ideas here on the page. And so, this is where you kind of have to start wondering to yourself, this feels like something I should split out into another component, right?

[00:06:23] Cuz I have two ideas going on. So that's exactly what we're gonna do. I'm gonna create a new component, call it ShowCard.jsx.
>> Brian: We're going to import React from React.
>> Brian: You're gonna say const ShowCard = (props), as a parameter. We're gonna go here to search.jsx. We're going to cut that out, come back here to ShowCard, paste that in.

[00:07:02] Again, we're gonna let prettier take care of all of the details, and then I'm gonna say export default ShowCard.
>> Brian: And then save and everything will magically rework itself.
>> Brian: You are gonna have all sorts of lint errors cuz we're not doing prop types yet. And the other thing, show is not defined yet.

[00:07:28] So props is gonna be whatever the parent passes down into ShowCard, right? So in a moment, we're going to make the parent pass down props.ShowCard but in the meantime, anywhere that you reference show, just go in front of it. I'm gonna do it with multiple cursors.
>> Brian: And say props.whatever.

[00:07:59]
>> Brian: So now all these are saying, where's my prop type? Which I think we'll talk about soon here. Yep, very soon we'll be talking about that. Okay, so for now, ignore the lint errors, go back to search. After this, I'll push a branch, well during the break, okay?

[00:08:27] Now instead of search, we're going to import ShowCard from ./ShowCard
>> Brian: And then here, where we were,
>> Brian: What we're gonna do is we're going to return ShowCard, where show=show.
>> Brian: Okay, there we go.
>> Brian: This got a lot cleaner to look at, right? And if you go look, everything should work or look the same as it did before.

[00:09:26] But now, we have two components, we have a ShowCard and we have a search like route page. So something that's super advantageous about this approach as well is that imagine later we're building another page that we want to display one show card at a time. Well, now we have this reusable component.

[00:09:48] As long as we feed it into show, it doesn't care where it lives. It can display out that information in a useful fashion. So now we get these reusable components that we can put multiple places on our site. So this kind of brings me to talking about how the render method works and kind of the way you need to be thinking about this render method, right?

[00:10:13] So here, this method here, given a set of props, this is how this component's gonna look, right? It's deterministic, it's pure, it's idempotent, right? If I call this function a billion times with the same parameters, the same show, on the billion-and-first time I run this call, what's it gonna look like?

[00:10:34] Exactly the same. Nothing changes, right? So this is very, very, very important about React components is that, if you call them a bunch of different times with the same parameters, it's always going to look the same. So for example, it´s a terrible idea for me to come in here and say like,

[00:10:54]
>> Brian: Math.random here, right? That´s gonna change every single time. So now if I refresh,
>> Brian: Now what's bad about this,
>> Brian: Or maybe even worse,
>> Brian: Yeah, no we'll talk about that later. Anyway, in any case this is now non-deterministic, right? So if I call it and I force it to re-render again which I'll show you how to do later, how to force it to re-render.

[00:11:34] We have no idea what the component's gonna end up looking like. This became nontestable, this became basically not a useful component anymore because it's not deterministic. So given the same properties, the component should always look the same. So an example that someone might ask me is, well what happens if I'm dealing with dates, like dates are always changing, right?

[00:11:56] So what you do is you pass in a date to that component. And given that date, it's always going to look the same, right? So you're not reading the date from the interior of the render method, you should be reading from the props.
>> Brian: Cool, any questions?
>> Brian: It's also super important that these components are going to get run a lot, right?

[00:12:22] Every time React senses a difference, if there's an event on your computer, or sorry if there's an event in the DOM. If the state changes, if the prop changes, React runs a re-render to figure out what's changed, and then it only updates the things that have changed in the DOM.

[00:12:38] That's called the virtual DOM. Notice we're already hours into this course and I haven't mentioned the virtual DOM. It doesn't matter, right? It's an implementation detail. It's not important to what actually React is. But anyway, what I wanna say is that your Rrender method is going to be run a lot, right?

[00:12:56] So make sure that code path is very perfomant, right? Everything else can be slower, right? But that Render path needs to be fast cuz it gets called a lot especially on large apps.