Complete Introduction to React (feat. Redux and React Router) Creating the ShowCard Component

Transcript from the "Creating the ShowCard Component" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: So let's reorganize this little bit. So some weird codes really should be getting from this right now is we have this outer search page, but then we have this interior thing right here, this is kind of like weird, right? This really should be a separate component, right, cuz it's, I don't know, we have multiple concerns here and that should feel weird to you.

[00:00:28] So what we're gonna do is we're actually going to create another file, call it ShowCard.jsx inside of JS. Okay and then we're gonna come over here to search and we're just gonna rip out the middle part here to ShowCard.
>> Brian: So we're bringing in const React equals require react and here const ShowCard equals and here we're going to use props with our status component just paste all that stuff that we got from, from search, right?

[00:01:21] I just copied and pasted everything that was here into here. But now it's not called show any more. They're coming in via props, right? So what we need to do is we need to put props in front of all of these. So we're gonna say props dot, right props dot show dot poster props that show the title props that show that year and props that show that description right cuz those are going to be passed in to us via props.

[00:01:49] Any questions about that?
>> Brian: And then we also have to export down here the bottom, module.exports = ShowCard.
>> Brian: Okay so now we're assuming these props are gonna come down to us. Now we actually have to make sure that those props actually do eventually get passed down to us.

[00:02:14] So let's go do that in search. Does anyone have any questions about ShowCard before I jump off? Give me a sec to see if people are catching up. Okay, so come here. First thing we're going to do is we're going to pull in a ShowCard, ./ShowCard
>> Brian: And then we can just delete everything in here and we're gonna say,

[00:02:57]
>> Brian: First of all your linter's gonna start yelling at you here momentarily, we'll fix that too, ShowCard show equals show, right. So show, this show, the green show in this particular case that's the name of the property we're passing it down as and then this show right here refers to this one right here.

[00:03:23] So if you want to, I don't know, you can call it S or whatever right, just to demonstrate to you that they're different right. This is whatever you're passing down.
>> Brian: Okay? So this is a little bit better abstraction that we have going here. So save that. And now we get a bunch of linting errors, ignore them for the moment we will take care of them momentarily.

[00:03:57] But yeah props validation problems.
>> Brian: But right now this should still work.
>> Brian: So everything still works despite the fact that we still get this key error but we're gonna fix that here in a sec as well.
>> Brian: Any questions about what's going on so far?
>> Speaker 2: So after you saved and it showed all the linting errors, is it still recompiled and the file in the browser is the updated version, it didn't stop.

[00:04:33]
>> Brian: Correct. So lint is not gonna stop your build, it's just going to yell at you. I believe you actually can make lint stop your build. Choose not to because oftentimes I want to test something and I don't wanna make it lint complaint, I just want to throw it on the page and make it do something.

[00:04:51] Hence, like sometimes I just know that I know I have linting errors but I'll fix them later. But that's a great question.
>> Speaker 3: Your question is why does the attribute called show? What dictates that?
>> Brian: Me. It's whatever I want to call it. I can call it that if you can pronounce it.

[00:05:12] You just have to refer to it as such, right.
>> Speaker 4: That's where you reference in ShowCard when
>> Brian: Yeah.
>> Speaker 4: props dot.
>> Brian: Props.show right, those two correspond to each other.
>> Speaker 3: And then somebody else asked wouldn't it be better to pass individual properties such as title, year, description?

[00:05:30]
>> Brian: It can be. It's up to you and I'm actually gonna show you an easy way to kind of do that, momentarily. Actually it's literally the next thing I'm gonna show you. [LAUGH] Is that the next thing I'm gonna show you? That's pretty close.
>> Speaker 5: I have a quick question.

[00:05:51]
>> Brian: Yeah.
>> Speaker 5: Is there anything passed in the props object, that you're not passing in explicitly? Like are there other attributes on that?
>> Brian: If you look at the props of different routes, for, not ShowCard but like search, react router passes in a bunch of stuff that you would might not be expecting.

[00:06:19] But in terms of like from search to ShowCard, it literally, I believe will just be show in this particular case. I don't think there's anything else special. So, that actually brings up a kind of an interesting point like something you might be wanting at some point is like what's my parent, right.

[00:06:38] That's something that people will find themselves asking in react and it's the wrong question to ask, right, it's actually the question that react deliberately avoids answering for you. You'll hear something with react that will make more sense when we talk about Redux but, it's props down actions up.

[00:06:57] The basic gist of and probably the most important concept that react presents to the world is not really invented by react but it certainly was popularized in the front end world by react, is that there is one way data flow, right. So I have a parent that has data, right, and the parent passes data down to the child, right, and then that child passes more data down to its child but they have no concept of data going up it's only data going down, right.

[00:07:25] So what's really, really wonderful is that if this parent is having a bug none of it's children could have caused it because the children can't actually affect the parent right only the parent can affect the children, right. So it basically is limiting your surface of bugs, right. And that's kinda of the, as I've gotten more and more experience with programming that's something that I found that's like the more and more I restrict my capabilities and abilities in programming that also means that I'm restricting my surface that I can get bugs on, right.

[00:07:54] Because if I can make assumptions about my codes, I know nothing changed in this function, thus I know that my state problem over here was not caused by this function, right? And that's what react aims to do with these props down actions up. We'll talk about actions up in here in a little bit, but basically when the children wants to modify it's parent or it basically says hey parent this happened, you take care of it, right?

[00:08:19] So basically the child just lets the parent know I have an event, now it's your problem to deal with it. That's the actions up philosophy.
>> Brian: So the nice thing about that is there is no hard dependency between ShowCard and search. So for example if we had a details page which actually we will momentarily have a details page and we want to use these little ShowCards on the details page as like, here are some related shows to the show that you're currently watching, we can just throw in ShowCards, right?

[00:08:54] We don't even have to modify anything like that because this would fit really nicely at the bottom of a page, right. Magical,right, it's now making our components reusable. So this approach of actions down, sorry, actions up and props down definitely does take some retraining of your user interface brain.

[00:09:19] I would suggest that I have found it worth it and that you would find it worth it as well. It makes the bugging so much easier.