‫To finish this component, let's now
‫add type checking to the components props using proptypes.
‫So with proptypes, we can basically specify the type
‫of value that we expect the consumer
‫of the component to pass in for each of the props.
‫For example, we can define that this max rating
‫here really must be a number and nothing else.
‫And this is what we call type checking.
‫So again, checking each type of the prop
‫and specifying what type they need to have.
‫Now, if you really care about this, you should actually just
‫use TypeScript instead of JavaScript.
‫Now I will show you how to use react built
‫in proptypes because it actually does make a lot
‫of sense for this reusable component,
‫but I will not do this in the rest
‫of the course for all the components that we're gonna build
‫because that just takes too much time
‫and also developers these days don't really do this anymore.
‫Again, if this is really important for your app,
‫you can just use TypeScript instead of JavaScript
‫which is what many teams
‫and many developers started doing again instead
‫of using proptypes.
‫But anyway, let's now actually use proptypes
‫and for that we import the proptypes object
‫from the proptypes package.
‫So there's no need to install this proptypes package here
‫in this case because Create-React-App already comes
‫with this package pre-installed.
‫But we do need to import it here.
‫So just as we did here, because it is actually
‫a separate package from React itself.
‫Now, okay. And now in order to do the type checking,
‫let's use our component.
‫So that's star rating.
‫And then on this component
‫we specify the proptypes property.
‫And here it's important that we write it with a lower case.
‫So proptypes net then here we then assign
‫those proptypes an object.
‫So, again, we imported proptypes here with the capital P
‫but the property name here is with this lowercase p.
‫Okay. And now here for each of the props,
‫we can specify the type.
‫So let's say max rating.
‫And so that's exactly the name
‫of the prop that we have here.
‫And then now we actually use that proptypes object
‫that we imported in the very beginning.
‫And so now all we need to do is to use one
‫of the validators that is inside this object.
‫So here we can simply say proptypes.number, and that's it.
‫So let's say that here we import this star rating
‫and instead of specifying a number, we specify a string.
‫And so then here we get this problem or this warning here
‫which says invalid prop of max rating.
‫And that's because it has the type
‫of string instead of the expected number.
‫And it is these warnings right here that will then
‫allow other developers to catch bugs like this
‫because, I mean, no one would specify this here on purpose
‫but by mistake, we might end up here with a string.
‫So, for example, also this could happen.
‫So we could specify five here, but as a string
‫and then we would still get the same problem.
‫Now, the code does actually work with this here somehow.
‫So JavaScript is somehow able to coerce the types
‫into a number.
‫But, again, here we get this warning
‫because we really should specify this not as a string,
‫but as a number.
‫And so then, of course, this disappears.
‫Now, we can also chain the is required property here
‫which just as the name says
‫will then make this prop required.
‫So somewhere here, we probably have one without.
‫Yeah, so this one doesn't have the max rating.
‫And then immediately we get this warning down here.
‫All right, but in our case, we actually
‫have some default values
‫for all of our props already defined.
‫And so it doesn't make sense then to mark
‫any of them as required.
‫So by default, you shouldn't use this one.
‫So instead just use default values
‫for all or most of your props.
‫But, anyway, now let's keep going
‫and let's make this really complete.
‫So the default rating should also be a number.
‫Then the color should be a string.
‫And so we basically have one of these validators here
‫for all the types that we can imagine.
‫So this one is also a number.
‫Then we have the messages.
‫And so here we have PropTypes.array.
‫Let's see what else we have.
‫So we also have the class name, which is a string.
‫So here I wrote the wrong one.
‫So always use the uppercase proptypes.
‫And now finally, the onset rating prop.
‫So proptypes and this one is a func,
‫which stands for function.
‫Okay. And besides these two, we also have .boo
‫which stands for a boolean.
‫So if it's a true or false value,
‫and we also have object.
‫So in this case, we have none of these.
‫And so this one is just a function.
‫Okay. And that's actually all that we have to do.
‫And as you see here, adding proptypes is also a nice way
‫of documenting our components because this type
‫definition right here makes it really obvious what kind
‫of data we are expecting.
‫But as I said in the very beginning,
‫I will not start using this in all components from now on.
‫So this was mostly just to show you
‫that you can use this yourself
‫in case that you have some component like this
‫which you want to make highly reusable
‫across multiple applications
‫or even just inside one application.
‫And if at the same time you don't want to switch
‫to TypeScript, but in any case with this,
‫we finished our reusable component,
‫and we also reached the end of this section.
‫All we have left to do is one final coding challenge
‫to practice what we just learned here in the section.