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 I just push up v3-7, so if you are following me along, that's where we are. And we are now going to fix all of our linting errors, and hopefully from here on out, I won't make you ignore lint errors anymore. Believe me, it pains my soul to see the red outline on there, I just can't even.
[00:00:17] So I'm going to help you also be able to not even. So what's going on here is there is a package that used to be included with React in and of itself called propTypes. As of 15.5, they are no longer packaged with React. This is an effort to kind of trim down the internal library of what React includes and doesn't include.
[00:00:46] It still isn't quite a clean break, because there are certain parts of React that still rely on propTypes if you want to be able to use them, so that's an ongoing effort. But they stripped out propTypes and they also stripped out something called createClass, which we are not using at all today cuz it's been deprecated.
[00:01:06] And they stripped out a couple of other things. So I'm gonna show you first how to use propTypes, because it is useful for you to know. Eventually we're going to get to using Flow. And once we get to using Flow, that kind of supersedes our need for propTypes.
[00:01:24] But I would say that using propTypes is more popular than using Flow. So it's useful for you to have that knowledge, and then we can get rid of them. So I want you to go and say import shape and string from prop-types. So prop-types is the actual library that used to be included with React in and of itself.
[00:01:53] And only a month or two ago was it stripped out, okay? Then we're gonna do underneath here, underneath ShowCard we're gonna say ShowCard.propTypes,
>> Brian Holt: And I guess I should say propTypes are by no means required, notice this is a linting error, right? And our app still builds, it still runs just fine.
[00:02:25] What propTypes are gonna do is kind of a two fold thing for you. First of all, it's going to be a run time check for you, to see if you're including the right properties into ShowCard. So what we're gonna do here, is we're gonna say show,
>> Brian Holt: shape, and then we're going to identify all the different properties that we expect to be on the show.
[00:02:51] So we expect there to be at poster, that's gonna be string.isRequired. We're gonna do title, which is also going to be a string.isRequired. Then we're gonna do year, which is a string as well, and that's going to be Required. And description which is going to be a string.isRequired as well as the show itself is required.
[00:03:24] No more linting errors, right? So they all went away. So let's talk about what actually propTypes are. So we did shape, right? Shape just means object, right? And I totally could just do I think this works, so I could do shape like that.
>> Brian Holt: Yep, yep, yep, yep, okay, so we could do this, right?
[00:03:58] And you could just say it's going to be an object, and you would do this if you had a case of it was an object and you didn't know what it was gonna look like coming in. However, we know what it's gonna look like, and so we're also going to identify the things that are inside of shape, right?
[00:04:10] So we're gonna identify poster, title, year, and description. If you do not put an isRequired, then as you might imagine, it's optional, right? So it means that it's not going to send you an error saying, hey you forgot this. I kind of wish that they had done isRequired as being the default and then isOptional, because usually things are required.
[00:04:40]
>> Brian Holt: Also according to the Airbnb config, if it's optional you have to give it a default prop.
>> Brian Holt: And you would do default props the same way, you would say showcard.defaultprops equals whatever you want them to be by default.
>> Brian Holt: Okay, so any questions? And then the other thing I wanted to say about propTypes.
[00:05:03] These run time checks are not incredibly useful, they're kind of useful in that it'll tell you in the consoles like hey, you forgot this, right? The real use for these is that it's documentation, right? Anyone that comes in and looks at this component is gonna look instantly down at the propTypes.
[00:05:16] It's like okay, it's gonna take in a show and it's gonna have poster, title, year, and description. It's just like a summary of what the API for that particular component is. That is, I'm gonna say 95% of the use case. Cuz again, runtime checks, by the time it's in runtime, you see they're broken and you know it or not, right?
[00:05:34] Sometimes it'll be useful, it's like I didn't know it wasn't including that. What happens if I say foo, and it's a string that's required, right? So now if I go into here, and I refresh, yeah, ignore the show.foo thing, worry about that later.
>> Brian Holt: Maybe let's do it this way,
[00:06:11]
>> Brian Holt: Refresh again.
>> Brian Holt: Okay, so right here this is what I'm talking about. It's gonna say, hey, you said foo was required. No, ignore that too.
>> Brian Holt: It should give you an error saying, I wonder if it's just being covered up by ESLint. But in any case, it should send you an error into the console saying hey, this is not there, and it should be there.
[00:06:45] So that's kind of the point. Yeah?
>> Speaker 2: Can you give us an example of default propTypes?
>> Brian Holt: Yeah, we'll see if I can remember off the top of my head, I think it just looks like this. And,
>> Brian Holt: We'll be using it later for sure.
>> Brian Holt: And let's just put it out here for fun
[00:07:44]
>> Brian Holt: So default props, I think that's what it should be.
>> Brian Holt: Yeah, so you can see right there it's rendering out stuff right there, right? So just saying like hey, if you don't pass in these props, this is the default prop type. So again, these are not technically required by React, but they are required by the Airbnb ESLint rules that we're using.
[00:08:09] Reason being is that it just eliminates a class of problem that you can have, right? How many times have you gone to say, props.show.description.toUppercase and it was undefined instead of being a string and so you got a runtime error. So it'll just eliminate the class of error. In other words, its kinda annoying, but ultimately useful.