1
00:00:01,110 --> 00:00:03,480
‫To finish this component, let's now

2
00:00:03,480 --> 00:00:08,253
‫add type checking to the components props using proptypes.

3
00:00:09,720 --> 00:00:13,500
‫So with proptypes, we can basically specify the type

4
00:00:13,500 --> 00:00:16,560
‫of value that we expect the consumer

5
00:00:16,560 --> 00:00:21,180
‫of the component to pass in for each of the props.

6
00:00:21,180 --> 00:00:24,780
‫For example, we can define that this max rating

7
00:00:24,780 --> 00:00:29,070
‫here really must be a number and nothing else.

8
00:00:29,070 --> 00:00:32,580
‫And this is what we call type checking.

9
00:00:32,580 --> 00:00:35,910
‫So again, checking each type of the prop

10
00:00:35,910 --> 00:00:39,270
‫and specifying what type they need to have.

11
00:00:39,270 --> 00:00:42,660
‫Now, if you really care about this, you should actually just

12
00:00:42,660 --> 00:00:45,780
‫use TypeScript instead of JavaScript.

13
00:00:45,780 --> 00:00:48,510
‫Now I will show you how to use react built

14
00:00:48,510 --> 00:00:52,020
‫in proptypes because it actually does make a lot

15
00:00:52,020 --> 00:00:54,750
‫of sense for this reusable component,

16
00:00:54,750 --> 00:00:57,000
‫but I will not do this in the rest

17
00:00:57,000 --> 00:01:00,810
‫of the course for all the components that we're gonna build

18
00:01:00,810 --> 00:01:03,030
‫because that just takes too much time

19
00:01:03,030 --> 00:01:07,230
‫and also developers these days don't really do this anymore.

20
00:01:07,230 --> 00:01:10,230
‫Again, if this is really important for your app,

21
00:01:10,230 --> 00:01:13,590
‫you can just use TypeScript instead of JavaScript

22
00:01:13,590 --> 00:01:15,237
‫which is what many teams

23
00:01:15,237 --> 00:01:19,004
‫and many developers started doing again instead

24
00:01:19,004 --> 00:01:21,690
‫of using proptypes.

25
00:01:21,690 --> 00:01:25,048
‫But anyway, let's now actually use proptypes

26
00:01:25,048 --> 00:01:30,048
‫and for that we import the proptypes object

27
00:01:31,783 --> 00:01:35,433
‫from the proptypes package.

28
00:01:37,950 --> 00:01:41,700
‫So there's no need to install this proptypes package here

29
00:01:41,700 --> 00:01:45,540
‫in this case because Create-React-App already comes

30
00:01:45,540 --> 00:01:48,150
‫with this package pre-installed.

31
00:01:48,150 --> 00:01:50,760
‫But we do need to import it here.

32
00:01:50,760 --> 00:01:54,120
‫So just as we did here, because it is actually

33
00:01:54,120 --> 00:01:57,750
‫a separate package from React itself.

34
00:01:57,750 --> 00:02:01,620
‫Now, okay. And now in order to do the type checking,

35
00:02:01,620 --> 00:02:05,010
‫let's use our component.

36
00:02:05,010 --> 00:02:06,570
‫So that's star rating.

37
00:02:06,570 --> 00:02:08,550
‫And then on this component

38
00:02:08,550 --> 00:02:11,610
‫we specify the proptypes property.

39
00:02:11,610 --> 00:02:15,273
‫And here it's important that we write it with a lower case.

40
00:02:16,350 --> 00:02:20,490
‫So proptypes net then here we then assign

41
00:02:20,490 --> 00:02:22,623
‫those proptypes an object.

42
00:02:23,520 --> 00:02:27,510
‫So, again, we imported proptypes here with the capital P

43
00:02:27,510 --> 00:02:31,323
‫but the property name here is with this lowercase p.

44
00:02:32,580 --> 00:02:35,790
‫Okay. And now here for each of the props,

45
00:02:35,790 --> 00:02:37,473
‫we can specify the type.

46
00:02:38,790 --> 00:02:41,133
‫So let's say max rating.

47
00:02:42,270 --> 00:02:43,770
‫And so that's exactly the name

48
00:02:43,770 --> 00:02:45,423
‫of the prop that we have here.

49
00:02:46,320 --> 00:02:50,100
‫And then now we actually use that proptypes object

50
00:02:50,100 --> 00:02:52,860
‫that we imported in the very beginning.

51
00:02:52,860 --> 00:02:55,590
‫And so now all we need to do is to use one

52
00:02:55,590 --> 00:02:58,980
‫of the validators that is inside this object.

53
00:02:58,980 --> 00:03:03,980
‫So here we can simply say proptypes.number, and that's it.

54
00:03:07,440 --> 00:03:12,090
‫So let's say that here we import this star rating

55
00:03:12,090 --> 00:03:16,293
‫and instead of specifying a number, we specify a string.

56
00:03:17,280 --> 00:03:21,570
‫And so then here we get this problem or this warning here

57
00:03:21,570 --> 00:03:25,050
‫which says invalid prop of max rating.

58
00:03:25,050 --> 00:03:26,880
‫And that's because it has the type

59
00:03:26,880 --> 00:03:30,033
‫of string instead of the expected number.

60
00:03:31,050 --> 00:03:34,020
‫And it is these warnings right here that will then

61
00:03:34,020 --> 00:03:37,803
‫allow other developers to catch bugs like this

62
00:03:37,803 --> 00:03:42,540
‫because, I mean, no one would specify this here on purpose

63
00:03:42,540 --> 00:03:45,960
‫but by mistake, we might end up here with a string.

64
00:03:45,960 --> 00:03:48,720
‫So, for example, also this could happen.

65
00:03:48,720 --> 00:03:51,960
‫So we could specify five here, but as a string

66
00:03:51,960 --> 00:03:55,260
‫and then we would still get the same problem.

67
00:03:55,260 --> 00:03:58,410
‫Now, the code does actually work with this here somehow.

68
00:03:58,410 --> 00:04:01,740
‫So JavaScript is somehow able to coerce the types

69
00:04:01,740 --> 00:04:03,060
‫into a number.

70
00:04:03,060 --> 00:04:04,920
‫But, again, here we get this warning

71
00:04:04,920 --> 00:04:09,810
‫because we really should specify this not as a string,

72
00:04:09,810 --> 00:04:11,310
‫but as a number.

73
00:04:11,310 --> 00:04:13,533
‫And so then, of course, this disappears.

74
00:04:15,420 --> 00:04:20,370
‫Now, we can also chain the is required property here

75
00:04:20,370 --> 00:04:22,470
‫which just as the name says

76
00:04:22,470 --> 00:04:24,993
‫will then make this prop required.

77
00:04:25,860 --> 00:04:29,760
‫So somewhere here, we probably have one without.

78
00:04:29,760 --> 00:04:32,100
‫Yeah, so this one doesn't have the max rating.

79
00:04:32,100 --> 00:04:36,000
‫And then immediately we get this warning down here.

80
00:04:36,000 --> 00:04:38,580
‫All right, but in our case, we actually

81
00:04:38,580 --> 00:04:40,500
‫have some default values

82
00:04:40,500 --> 00:04:43,380
‫for all of our props already defined.

83
00:04:43,380 --> 00:04:45,750
‫And so it doesn't make sense then to mark

84
00:04:45,750 --> 00:04:48,030
‫any of them as required.

85
00:04:48,030 --> 00:04:51,360
‫So by default, you shouldn't use this one.

86
00:04:51,360 --> 00:04:53,640
‫So instead just use default values

87
00:04:53,640 --> 00:04:56,565
‫for all or most of your props.

88
00:04:56,565 --> 00:04:59,283
‫But, anyway, now let's keep going

89
00:04:59,283 --> 00:05:01,803
‫and let's make this really complete.

90
00:05:02,670 --> 00:05:06,411
‫So the default rating should also be a number.

91
00:05:06,411 --> 00:05:11,411
‫Then the color should be a string.

92
00:05:12,734 --> 00:05:16,260
‫And so we basically have one of these validators here

93
00:05:16,260 --> 00:05:18,813
‫for all the types that we can imagine.

94
00:05:20,280 --> 00:05:22,983
‫So this one is also a number.

95
00:05:25,410 --> 00:05:26,913
‫Then we have the messages.

96
00:05:27,750 --> 00:05:31,893
‫And so here we have PropTypes.array.

97
00:05:33,330 --> 00:05:34,893
‫Let's see what else we have.

98
00:05:35,820 --> 00:05:40,113
‫So we also have the class name, which is a string.

99
00:05:44,910 --> 00:05:47,400
‫So here I wrote the wrong one.

100
00:05:47,400 --> 00:05:50,850
‫So always use the uppercase proptypes.

101
00:05:50,850 --> 00:05:55,850
‫And now finally, the onset rating prop.

102
00:05:56,340 --> 00:05:59,760
‫So proptypes and this one is a func,

103
00:05:59,760 --> 00:06:01,203
‫which stands for function.

104
00:06:02,370 --> 00:06:06,817
‫Okay. And besides these two, we also have .boo

105
00:06:08,340 --> 00:06:10,080
‫which stands for a boolean.

106
00:06:10,080 --> 00:06:12,420
‫So if it's a true or false value,

107
00:06:12,420 --> 00:06:14,493
‫and we also have object.

108
00:06:15,420 --> 00:06:17,370
‫So in this case, we have none of these.

109
00:06:18,510 --> 00:06:20,583
‫And so this one is just a function.

110
00:06:21,600 --> 00:06:25,230
‫Okay. And that's actually all that we have to do.

111
00:06:25,230 --> 00:06:29,460
‫And as you see here, adding proptypes is also a nice way

112
00:06:29,460 --> 00:06:33,180
‫of documenting our components because this type

113
00:06:33,180 --> 00:06:36,660
‫definition right here makes it really obvious what kind

114
00:06:36,660 --> 00:06:39,270
‫of data we are expecting.

115
00:06:39,270 --> 00:06:41,760
‫But as I said in the very beginning,

116
00:06:41,760 --> 00:06:46,170
‫I will not start using this in all components from now on.

117
00:06:46,170 --> 00:06:48,360
‫So this was mostly just to show you

118
00:06:48,360 --> 00:06:50,340
‫that you can use this yourself

119
00:06:50,340 --> 00:06:53,340
‫in case that you have some component like this

120
00:06:53,340 --> 00:06:55,697
‫which you want to make highly reusable

121
00:06:55,697 --> 00:06:58,110
‫across multiple applications

122
00:06:58,110 --> 00:07:00,960
‫or even just inside one application.

123
00:07:00,960 --> 00:07:04,020
‫And if at the same time you don't want to switch

124
00:07:04,020 --> 00:07:07,710
‫to TypeScript, but in any case with this,

125
00:07:07,710 --> 00:07:10,710
‫we finished our reusable component,

126
00:07:10,710 --> 00:07:13,710
‫and we also reached the end of this section.

127
00:07:13,710 --> 00:07:17,820
‫All we have left to do is one final coding challenge

128
00:07:17,820 --> 00:07:21,153
‫to practice what we just learned here in the section.