This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "PropTypes" Lesson
[00:00:00]
>> Brian Holt: So, let's go do our PropTypes now. So notice we're getting this, npn run dev. We're getting a linter error that says, hey, you don't have PropTypes. That's something that standard react enforces. So, let's actually go talk about what those are.
>> Brian Holt: So.
>> Brian Holt: What we're going to say here is we're going to say, const a { string } = React.PropTypes and then we're gonna use that here above render on prop types.
[00:00:37] So an easy thing to get caught up on capital P PropTypes here, lowercase p propTypes here.
>> Brian Holt: I'll explain why momentarily.
>> Brian Holt: So here you're basically gonna say here are things I expect to get from my parent.
>> Brian Holt: And that's really all you're saying here. So, I expect to get a show object from my parent.
[00:01:04] So I'm gonna say, show. I need shape here as well. So, shape.
>> Brian Holt: And I expect to get a shape. Shape is just a word for object.
>> Brian Holt: And I expect to get the poster, which is a string. I expect to get the title, which is a string.
[00:01:27] I expect to get the year, which is also a string and I expect to get the description which as you may guess is a string.
>> Speaker 2: Aren't we in the wrong component?
>> Brian Holt: We are. Thank you.
>> Speaker 2: No problem.
>> Brian Holt: Sorry, we need to go to ShowCard. This is what happens when you teach a class too long.
[00:01:52] So cut that, we'll just rewrite that. Go into ShowCard above render put your PropTypes and we're gonna say, const { shape, string } = React.PropTypes, PropTypes.
>> Brian Holt: So, show is an object. That has a poster, a title, a year and a description in it.
>> Brian Holt: Now, why this is cool?
[00:02:33] his is cool for several reasons. First and foremost, I would think the best reason to do PropTypes, so I guess I should preface this. This is totally optional. React does not need PropTypes to run, it's totally fine without them. Why PropTypes are a good thing in my opinion is anyone that comes to look at ShowCard later, instantly knows the contract for this component.
[00:02:58] That if they wanna go include ShowCard somewhere else, it's like cool. All I have to give it is the show that has these properties in it and done, that's it. We can even go so far as to say like .isRequired and now it's going to error. Well, it's not gonna error.
[00:03:14] It's gonna warn, if it's not there.
>> Speaker 2: Two questions. Marcus is asking, since we now have flow support via Babel, isn't it much simpler to use instead of PropTypes?
>> Brian Holt: Yes. Well, I'm not gonna assert that type checking is any sort of simple. I will assert that it's probably better.
[00:03:34] I will allude to it briefly tomorrow, but I purposely did not use Flow or TypeScript for this workshop.
>> Speaker 2: Next question, this is back at the question about, hang on, it's.
>> Speaker 2: About using ShowCard and calling that DOM component smart component thing. The question is, it's more about, should we have Showcard inside search or use props children on search and past ShowCard?
[00:04:09]
>> Brian Holt: Is props.children.
>> Speaker 2: Not better.
>> Brian Holt: No, not particularly. Yeah.
>> Speaker 2: I'll ask them to actually post a side by side example.
>> Brian Holt: Sure. No, I'm having a hard time picturing that. So, couple of questions that typically come up with PropTypes. Specifically in Netflix, we have a bit of code that actually strips away PropTypes from its ship mount production, just so nothing's going down the wire.
[00:04:42] Typically, it's small. Nothing size that you're only cutting out like couple a hundred bytes, which is not a big deal. So, these are fine to send down the wire. And also when you're in production, React does not check PropTypes. So it's only in development, it actually check PropTypes.
[00:05:01] So these are actually fine to leave in, you can leave them in always. If you're interested in cutting out every single byte that you can, you can get something in your build step that will remove them. That's fine too. Only that up to your discussion. That's not necessary React specific thing, but I think they are a good thing personally.
[00:05:20] And just like our friend said, once you start using Flow or TypeScript, you don't need a prototypes at all, because it's gonna do way more than ProtoTypes ever would. So I believe at Facebook, they don't use prop types at all, because they have Flow everywhere.
>> Brian Holt: But there's object, array, array of, string, Boolean number.
[00:05:49] There's a bunch of different PropTypes that it can check for and like I said, there is like is required if you want it to warn when it's not there. Let's just take a look at what that actually might look like. So if I put like bool in here and I say, posters is a bool and then I save and I refresh.
[00:06:15] We're gonna get a failed PropType. It's gonna say, hey, you told me you expected this and I actually got this. It's just a really nice way to say, okay, this is why this is going wrong. Does that make sense? So, there's no performance or anything in here. This is just purely for documentation and some weak type checking for you.
[00:06:41] So, there was a good question. It was like what shape was? I don't know if we got that on camera, but I'm just gonna say that again. Shape is an object, but specifically what shape is used for is an object that you're going to describe the shape of it.
[00:06:55] That's why it's called the shape. You can actually say, object and then just instead of all this stuff, you just say, object and it's just a generic object. It doesn't actually care what's gonna come into it, it's just object. If you're getting an object and you don't know what it's going to look like, this is how you're going to declare that.
[00:07:17] But if you know what it looks like, don't be lazy. Please declare everything in it, that's what shape is for. It's the same thing with array. You can just say this is going to be in array of stuff, but it's better if you know what to taught the array of those options for me to use array of.
[00:07:32] It's like this is an array of string, this is an array of shape of law and you can kind of go all the way down it. So yes, that's useful.
>> Speaker 3: Is that before typescript, or is typescript influence by that or the other way around?
>> Brian Holt: I think its a chicken and egg value.
[00:07:53] Pascal, I think is the answer to that question. That's the answer to all typing things, I think. I don't know, to be honest.
>> Brian Holt: I'm pretty sure TypeScript came first.
>> Speaker 2: Can you nest shape in shape?
>> Brian Holt: Yes. Yep, it goes as deep as you want to.