1
00:00:00,180 --> 00:00:02,310
- One of the hardest parts
about developing code

2
00:00:02,310 --> 00:00:04,140
is that as your projects start to grow

3
00:00:04,140 --> 00:00:05,340
and grow in complexity

4
00:00:05,340 --> 00:00:07,290
and you get more and
more people on your team,

5
00:00:07,290 --> 00:00:09,180
it becomes impossible to memorize

6
00:00:09,180 --> 00:00:11,910
and know everything about
the project you're working on

7
00:00:11,910 --> 00:00:13,320
which means it's incredibly important

8
00:00:13,320 --> 00:00:15,390
that you have good tooling
set up to make it easy

9
00:00:15,390 --> 00:00:17,700
for you to able to read the
code, see what's going on,

10
00:00:17,700 --> 00:00:20,280
and be able to detect any
mistakes that you have.

11
00:00:20,280 --> 00:00:23,040
But if you don't have any type
safety set up in your project

12
00:00:23,040 --> 00:00:25,440
it can become incredibly
difficult to actually check

13
00:00:25,440 --> 00:00:27,960
for all these different
problems and prevent some bugs.

14
00:00:27,960 --> 00:00:29,790
So I wanna look at this
code really quickly.

15
00:00:29,790 --> 00:00:31,920
Everything looks like
it's working just fine

16
00:00:31,920 --> 00:00:33,600
but we have a glaring bug in the code

17
00:00:33,600 --> 00:00:35,850
that's not actually super apparent to us.

18
00:00:35,850 --> 00:00:37,110
We look at our code here, you can see

19
00:00:37,110 --> 00:00:39,150
that we have a child
component which takes a name

20
00:00:39,150 --> 00:00:41,130
and age and then a child inside of it.

21
00:00:41,130 --> 00:00:43,020
And that all looks perfectly fine.

22
00:00:43,020 --> 00:00:44,430
If we go over to our actual code,

23
00:00:44,430 --> 00:00:45,810
everything in here looks perfectly fine.

24
00:00:45,810 --> 00:00:48,210
We're rendering out the name,
we're rendering the age out.

25
00:00:48,210 --> 00:00:50,220
Then we're rendering out what
their age will be in 10 years

26
00:00:50,220 --> 00:00:51,810
by just adding 10 to their age.

27
00:00:51,810 --> 00:00:54,360
And then we're rendering
out the children as well.

28
00:00:54,360 --> 00:00:57,210
Just by looking at the
code, everything looks fine,

29
00:00:57,210 --> 00:00:59,340
especially if you just look
at one component on its own.

30
00:00:59,340 --> 00:01:00,660
This component looks fine.

31
00:01:00,660 --> 00:01:01,590
There's no errors.

32
00:01:01,590 --> 00:01:03,060
We can ignore these errors up here

33
00:01:03,060 --> 00:01:05,100
for now 'cause that's just
related to prop types.

34
00:01:05,100 --> 00:01:07,380
And if we look at this, you can
see again there's no errors.

35
00:01:07,380 --> 00:01:09,030
Everything looks perfectly fine

36
00:01:09,030 --> 00:01:10,530
by just reading it and looking at it.

37
00:01:10,530 --> 00:01:12,480
But if we look at the output,
obviously something's wrong.

38
00:01:12,480 --> 00:01:14,130
Our name is fine, our age is fine,

39
00:01:14,130 --> 00:01:16,230
but our age in 10 years
is slightly different.

40
00:01:16,230 --> 00:01:18,120
I hope I'm not that old in 10 years.

41
00:01:18,120 --> 00:01:20,430
And then down here the
children are printing out fine.

42
00:01:20,430 --> 00:01:21,630
So the problem that we're running into

43
00:01:21,630 --> 00:01:23,160
is we have a tight problem.

44
00:01:23,160 --> 00:01:25,200
We are expecting this
age that gets passed in

45
00:01:25,200 --> 00:01:26,033
to be a number.

46
00:01:26,033 --> 00:01:29,550
So when we add 10 to it, we
expect it to go from 28 to 38.

47
00:01:29,550 --> 00:01:32,700
But the age is actually being
passed in as a string here.

48
00:01:32,700 --> 00:01:34,917
So what's happening is
we're adding our string 28

49
00:01:34,917 --> 00:01:36,540
and we're putting 10 at the end of it.

50
00:01:36,540 --> 00:01:39,210
And that gives us the string of 2810.

51
00:01:39,210 --> 00:01:40,590
This is obviously a problem

52
00:01:40,590 --> 00:01:42,690
and all of those red squiggly
lines that we've seen

53
00:01:42,690 --> 00:01:44,970
up until now that talk
about React prop types,

54
00:01:44,970 --> 00:01:47,280
that's to try to prevent
this problem inside

55
00:01:47,280 --> 00:01:48,990
of a JavaScript code base.

56
00:01:48,990 --> 00:01:50,640
Now in React there are two main ways

57
00:01:50,640 --> 00:01:51,870
to deal with type safety.

58
00:01:51,870 --> 00:01:53,100
You can do number one

59
00:01:53,100 --> 00:01:54,900
which is going to be doing prop types.

60
00:01:54,900 --> 00:01:57,900
And number two is to use some
type of type safe library.

61
00:01:57,900 --> 00:01:59,940
TypeScript is probably
the most popular thing

62
00:01:59,940 --> 00:02:01,410
that you can use, but
you can use something

63
00:02:01,410 --> 00:02:02,970
like JS Doc as well.

64
00:02:02,970 --> 00:02:04,890
Personally I'm going to
be covering TypeScript

65
00:02:04,890 --> 00:02:06,870
in this course because it's
currently by far the most

66
00:02:06,870 --> 00:02:09,390
popular and it's the one that
I think is the most useful

67
00:02:09,390 --> 00:02:10,920
but you can use whatever you want.

68
00:02:10,920 --> 00:02:12,750
Now in this video though,
I am going to be covering

69
00:02:12,750 --> 00:02:15,210
prop types because that is
one of the options you have.

70
00:02:15,210 --> 00:02:17,100
I will say though, if you have the option

71
00:02:17,100 --> 00:02:20,580
to use TypeScript 100% of the
time, use TypeScript instead.

72
00:02:20,580 --> 00:02:22,440
And the main reason for that is prop types

73
00:02:22,440 --> 00:02:25,260
are a runtime check, which
means it checks your types

74
00:02:25,260 --> 00:02:27,930
while your code is running and
TypeScript checks your code

75
00:02:27,930 --> 00:02:31,020
before it actually runs,
which is a massive benefit.

76
00:02:31,020 --> 00:02:32,340
But I'm gonna be talking about prop types

77
00:02:32,340 --> 00:02:34,650
because they are useful if
you can't use TypeScript

78
00:02:34,650 --> 00:02:36,690
or any other typing type of code.

79
00:02:36,690 --> 00:02:38,730
Prop types is like the
last resort you can use

80
00:02:38,730 --> 00:02:41,100
to add a little bit of
extra safety to your code.

81
00:02:41,100 --> 00:02:43,500
So in order to use prop types
in React, what we need to do

82
00:02:43,500 --> 00:02:45,420
is we need to install
the prop types library.

83
00:02:45,420 --> 00:02:46,410
So I'm gonna do that real quick.

84
00:02:46,410 --> 00:02:50,310
npm I prop types, and this is a library

85
00:02:50,310 --> 00:02:51,420
that's maintained by React.

86
00:02:51,420 --> 00:02:53,820
So it's you know, going to be
great and work all the time.

87
00:02:53,820 --> 00:02:55,890
npm run dev, that's going to be fine.

88
00:02:55,890 --> 00:02:57,360
Now to actually use prop types,

89
00:02:57,360 --> 00:02:58,888
all we need to do is take our component,

90
00:02:58,888 --> 00:02:59,721
(keys clacking)

91
00:02:59,721 --> 00:03:01,110
- And we have a prop types property

92
00:03:01,110 --> 00:03:01,950
that we can define on it.

93
00:03:01,950 --> 00:03:03,360
So we can say prop and then Types

94
00:03:03,360 --> 00:03:05,700
with a capital T set that equal to.

95
00:03:05,700 --> 00:03:07,890
And then here we can
actually get our prop types.

96
00:03:07,890 --> 00:03:11,520
And if we come up to the top
here and we import prop types

97
00:03:11,520 --> 00:03:14,550
from that prop types
library, now we have access

98
00:03:14,550 --> 00:03:16,710
to everything inside of
our different prop types.

99
00:03:16,710 --> 00:03:19,860
So I can come down here and I
can say like prop types dot,

100
00:03:19,860 --> 00:03:20,700
let's do it outside of here

101
00:03:20,700 --> 00:03:22,200
so I can actually get auto complete.

102
00:03:22,200 --> 00:03:23,460
Prop types dot.

103
00:03:23,460 --> 00:03:25,050
And you can see we have a
bunch of different options.

104
00:03:25,050 --> 00:03:26,700
So for example, I can say
that we have a number,

105
00:03:26,700 --> 00:03:28,410
we have a string and so on.

106
00:03:28,410 --> 00:03:30,870
If I spell string properly,
there we go, string.

107
00:03:30,870 --> 00:03:32,250
So what you need to do inside of here

108
00:03:32,250 --> 00:03:33,690
is just define all your different types.

109
00:03:33,690 --> 00:03:34,950
So what are the props we take in?

110
00:03:34,950 --> 00:03:36,780
We take a name and age and children.

111
00:03:36,780 --> 00:03:40,500
So I can say name is going
to be a propTypes.string.

112
00:03:40,500 --> 00:03:42,120
I can do the exact same thing with our age

113
00:03:42,120 --> 00:03:44,253
which is a propTypes.number.

114
00:03:45,270 --> 00:03:46,440
There we go, just like that.

115
00:03:46,440 --> 00:03:47,970
And the really nice thing
is you can see immediately

116
00:03:47,970 --> 00:03:49,350
our red squiggly lines are going away

117
00:03:49,350 --> 00:03:51,420
'cause we're actually
typing our different props.

118
00:03:51,420 --> 00:03:53,160
And then finally our children here,

119
00:03:53,160 --> 00:03:55,890
this one is going to be propTypes dot.

120
00:03:55,890 --> 00:03:57,810
And we have a few different
options you can use here.

121
00:03:57,810 --> 00:03:59,550
Node just means it's something
that you can actually

122
00:03:59,550 --> 00:04:01,710
render out, which is
what we want in our case.

123
00:04:01,710 --> 00:04:02,610
So we're gonna do that.

124
00:04:02,610 --> 00:04:03,900
But something else that you could do

125
00:04:03,900 --> 00:04:07,140
in this place as well is
passing the text element

126
00:04:07,140 --> 00:04:08,430
and that's going to be specifically

127
00:04:08,430 --> 00:04:09,870
for like a React component

128
00:04:09,870 --> 00:04:12,060
and not just something
that can be rendered out.

129
00:04:12,060 --> 00:04:13,290
So let's change this back to node

130
00:04:13,290 --> 00:04:14,580
'cause that's what we really care about.

131
00:04:14,580 --> 00:04:15,510
Give that a quick save.

132
00:04:15,510 --> 00:04:18,120
And now you'll notice no
errors at all are in my code

133
00:04:18,120 --> 00:04:21,150
and it's because again, prop
types only run in runtime.

134
00:04:21,150 --> 00:04:22,950
So they only run when your code is running

135
00:04:22,950 --> 00:04:24,630
and they print out errors to your console.

136
00:04:24,630 --> 00:04:26,760
So if we inspect our page and
we go to our console, boom,

137
00:04:26,760 --> 00:04:29,220
we get a warning failed
prop type, invalid prop.

138
00:04:29,220 --> 00:04:31,470
Age of type string should be a number.

139
00:04:31,470 --> 00:04:33,540
So it's pretty much telling
my age I patched in a string,

140
00:04:33,540 --> 00:04:34,890
it should be a number.

141
00:04:34,890 --> 00:04:37,320
Now if I go ahead into here my app,

142
00:04:37,320 --> 00:04:39,690
and I change this to an actual number,

143
00:04:39,690 --> 00:04:41,940
we'll now notice our code
works properly over here

144
00:04:41,940 --> 00:04:42,900
just like we expect.

145
00:04:42,900 --> 00:04:44,190
And if I inspect my page

146
00:04:44,190 --> 00:04:45,750
and I just clear this
out and do a refresh,

147
00:04:45,750 --> 00:04:47,310
you'll notice that
there are no more errors

148
00:04:47,310 --> 00:04:48,750
which is exactly what we want.

149
00:04:48,750 --> 00:04:50,520
So I was able to detect the error

150
00:04:50,520 --> 00:04:52,080
but only if I was looking at my console.

151
00:04:52,080 --> 00:04:54,300
So it's obviously not ideal
because I need to be looking

152
00:04:54,300 --> 00:04:55,320
in the console actively

153
00:04:55,320 --> 00:04:56,760
to find any of these different errors.

154
00:04:56,760 --> 00:04:59,130
And that's the reason again
that I prefer to use TypeScript

155
00:04:59,130 --> 00:05:02,400
or some other typing checker
as opposed to prop types.

156
00:05:02,400 --> 00:05:04,830
Now by default when you
define a prop it's optional.

157
00:05:04,830 --> 00:05:06,030
So for example, if I came in here

158
00:05:06,030 --> 00:05:07,950
and I removed my name property,

159
00:05:07,950 --> 00:05:10,950
you can see if I save, if I
inspect my page, not V source,

160
00:05:10,950 --> 00:05:13,740
if I inspect my page, go to
the console, we get no errors.

161
00:05:13,740 --> 00:05:15,240
If I wanna make it prop required

162
00:05:15,240 --> 00:05:16,860
I need to need to call dot required

163
00:05:16,860 --> 00:05:19,020
on the end of it,
isRequired just like that.

164
00:05:19,020 --> 00:05:20,640
And now if I save and I inspect

165
00:05:20,640 --> 00:05:21,990
you'll notice I now get an error saying

166
00:05:21,990 --> 00:05:24,750
that name was marked as required
but it's not passed along.

167
00:05:24,750 --> 00:05:25,950
So you can add different things

168
00:05:25,950 --> 00:05:27,930
to the end here to make them
a little bit more specific.

169
00:05:27,930 --> 00:05:29,580
So for example, I can
make my string required

170
00:05:29,580 --> 00:05:31,290
by passing along, is it required?

171
00:05:31,290 --> 00:05:33,120
Now I really briefly just
want to kind of go through

172
00:05:33,120 --> 00:05:34,860
a bunch of different types
that you can check for.

173
00:05:34,860 --> 00:05:37,110
So one type that you can
check for is any that's just

174
00:05:37,110 --> 00:05:39,120
saying this can be
literally anything at all.

175
00:05:39,120 --> 00:05:40,740
So it doesn't matter
if I pass it a string,

176
00:05:40,740 --> 00:05:42,450
if I pass it a number, if I pass it,

177
00:05:42,450 --> 00:05:44,010
you know a Boolean like true false,

178
00:05:44,010 --> 00:05:45,900
it doesn't matter as long
as you pass something,

179
00:05:45,900 --> 00:05:47,550
that's fine, that's all that matters.

180
00:05:47,550 --> 00:05:48,840
It's literally just anything at all.

181
00:05:48,840 --> 00:05:50,250
It just has to exist.

182
00:05:50,250 --> 00:05:52,370
We also have the ability
to do any other basic types

183
00:05:52,370 --> 00:05:54,030
of like Boolean and so on.

184
00:05:54,030 --> 00:05:55,260
All of those that you're used to

185
00:05:55,260 --> 00:05:56,580
are going to be inside of here.

186
00:05:56,580 --> 00:05:59,640
And then we also have
arrays and we have objects.

187
00:05:59,640 --> 00:06:00,873
So if we do object like this

188
00:06:00,873 --> 00:06:04,110
it's just saying it expects
us to pass in an object.

189
00:06:04,110 --> 00:06:06,780
But if we do shape of
or actually just shape,

190
00:06:06,780 --> 00:06:08,760
that'll allow us to pass in a specific way

191
00:06:08,760 --> 00:06:10,230
we want our object to look like.

192
00:06:10,230 --> 00:06:12,720
So by just doing object,
that's just saying

193
00:06:12,720 --> 00:06:15,990
accept literally anything
that is an object at all.

194
00:06:15,990 --> 00:06:17,760
But if we say shape inside of here,

195
00:06:17,760 --> 00:06:19,440
we can pass it what we
want the shape to be.

196
00:06:19,440 --> 00:06:22,290
So for example, if I
change this to like address

197
00:06:22,290 --> 00:06:24,990
and I wanted it to have a
street that is a string,

198
00:06:24,990 --> 00:06:29,520
well I could just say
propTypes.string, just like that.

199
00:06:29,520 --> 00:06:33,180
And let's just say I wanted
it to also have a city

200
00:06:33,180 --> 00:06:37,380
and we'll just give
that a propTypes.string.

201
00:06:37,380 --> 00:06:38,850
There we go.

202
00:06:38,850 --> 00:06:40,950
Let's say that I wanna make this required.

203
00:06:42,480 --> 00:06:43,590
Whoops, required.

204
00:06:43,590 --> 00:06:44,423
There we go.

205
00:06:44,423 --> 00:06:45,900
And I also wanna make
both of these required.

206
00:06:45,900 --> 00:06:47,350
So isRequired and isRequired.

207
00:06:49,260 --> 00:06:50,093
There we go.

208
00:06:50,093 --> 00:06:51,810
So now I'm obviously going
to get a bunch of errors

209
00:06:51,810 --> 00:06:54,450
in my console because I don't
have that address property.

210
00:06:54,450 --> 00:06:55,283
So there we go.

211
00:06:55,283 --> 00:06:56,910
Obviously I should pass along my address.

212
00:06:56,910 --> 00:07:00,150
So if I come into here I can
say address just like that.

213
00:07:00,150 --> 00:07:01,800
I need to pass it as an object.

214
00:07:01,800 --> 00:07:03,750
So I also know that I
need a city and a street.

215
00:07:03,750 --> 00:07:05,370
And you'll notice I do get auto complete

216
00:07:05,370 --> 00:07:06,990
because of these prop
types, which is really nice.

217
00:07:06,990 --> 00:07:09,210
So the prop types can at least
help you with auto complete,

218
00:07:09,210 --> 00:07:10,350
which is really great.

219
00:07:10,350 --> 00:07:13,230
Let's come in here with the
city, we'll just say Hi,

220
00:07:13,230 --> 00:07:17,250
and we'll say street, it's
just gonna be Main Street.

221
00:07:17,250 --> 00:07:18,120
There we go.

222
00:07:18,120 --> 00:07:19,380
And now that'll get rid of the errors.

223
00:07:19,380 --> 00:07:21,030
So if we inspect our
page, go to the console

224
00:07:21,030 --> 00:07:23,220
you can see we have no errors
when we refresh our page

225
00:07:23,220 --> 00:07:24,450
which is what we expect.

226
00:07:24,450 --> 00:07:27,060
So again, shape is for specifically
defining what the shape

227
00:07:27,060 --> 00:07:27,990
of your object can be,

228
00:07:27,990 --> 00:07:29,700
and you can make as much
nesting as you want.

229
00:07:29,700 --> 00:07:32,130
For example, if I wanted
this to be a shape as well,

230
00:07:32,130 --> 00:07:33,780
I could just come in here with a shape

231
00:07:33,780 --> 00:07:35,910
and again nest further inside that.

232
00:07:35,910 --> 00:07:38,670
Now in order to do an array,
this is just going to be array

233
00:07:38,670 --> 00:07:40,350
and that's just saying literally anything

234
00:07:40,350 --> 00:07:41,940
that's an array is going to be fine.

235
00:07:41,940 --> 00:07:44,070
And then we have arrayOf,
and that essentially

236
00:07:44,070 --> 00:07:46,770
allows to just find what we
want our array to look like.

237
00:07:46,770 --> 00:07:49,170
So if I wanted to pass
in an array of strings

238
00:07:49,170 --> 00:07:51,150
I would just say propTypes.string.

239
00:07:51,150 --> 00:07:52,500
And that's going to gimme an array.

240
00:07:52,500 --> 00:07:55,170
And the array must be
filled with only strings.

241
00:07:55,170 --> 00:07:56,730
Now commonly you may want to have an array

242
00:07:56,730 --> 00:07:57,750
that has multiple types.

243
00:07:57,750 --> 00:07:58,860
Like let's say I wanna have an array

244
00:07:58,860 --> 00:08:01,080
with strings or I want to have numbers.

245
00:08:01,080 --> 00:08:04,440
Well I can use the propTypes.oneOf type

246
00:08:04,440 --> 00:08:07,140
and I could use the oneOf
type inside of here.

247
00:08:07,140 --> 00:08:08,250
And now I'm saying I want it to be

248
00:08:08,250 --> 00:08:12,210
either a string or I
want it to be an array.

249
00:08:12,210 --> 00:08:15,120
Or actually no, I want it
to be a number like that.

250
00:08:15,120 --> 00:08:17,400
Put this inside of an array
so I'm passing an array

251
00:08:17,400 --> 00:08:19,020
of those different values to it.

252
00:08:19,020 --> 00:08:21,720
Make sure I get all my
parentheses correct,

253
00:08:21,720 --> 00:08:22,830
give this a save.

254
00:08:22,830 --> 00:08:23,663
There we go.

255
00:08:23,663 --> 00:08:25,170
So now I'm essentially
saying I have an array

256
00:08:25,170 --> 00:08:27,210
of a specific type and that type is one

257
00:08:27,210 --> 00:08:29,220
of either a string or a number.

258
00:08:29,220 --> 00:08:30,810
The nice thing about
these prop types library

259
00:08:30,810 --> 00:08:32,730
is that it reads relatively like English.

260
00:08:32,730 --> 00:08:35,160
So it's a little bit easy
to see what's going on.

261
00:08:35,160 --> 00:08:36,990
Now let's say I wanted
to have like an enum.

262
00:08:36,990 --> 00:08:39,390
For example, let's say
I have a status here

263
00:08:39,390 --> 00:08:41,820
and I wanted it to be
either loading or error.

264
00:08:41,820 --> 00:08:44,610
What I can do is I can say propTypes.oneOf

265
00:08:44,610 --> 00:08:46,380
not oneOf type, but oneOf,

266
00:08:46,380 --> 00:08:48,450
and this I can just pass
it an array of values.

267
00:08:48,450 --> 00:08:51,540
So I could say like loading and error

268
00:08:51,540 --> 00:08:53,400
and now this status must be one of these.

269
00:08:53,400 --> 00:08:56,070
So if I try to pass along a status

270
00:08:56,070 --> 00:08:57,690
and you see I get auto complete

271
00:08:57,690 --> 00:08:58,523
or actually it doesn't look like

272
00:08:58,523 --> 00:08:59,700
I'm actually getting auto complete on this

273
00:08:59,700 --> 00:09:01,710
which is a little bit
annoying, but you can see

274
00:09:01,710 --> 00:09:03,840
if I pass in loading,
everything will work fine.

275
00:09:03,840 --> 00:09:06,390
If I inspect my page, go to my console

276
00:09:06,390 --> 00:09:07,800
make sure I get rid of this address prop

277
00:09:07,800 --> 00:09:11,340
which is no longer there,
clear this out, refresh.

278
00:09:11,340 --> 00:09:12,420
You see I get no errors.

279
00:09:12,420 --> 00:09:14,010
But if I try to pass
along something that's not

280
00:09:14,010 --> 00:09:15,000
one of those statuses,

281
00:09:15,000 --> 00:09:16,170
you can see immediately we get an error

282
00:09:16,170 --> 00:09:17,940
because it's not loading or error.

283
00:09:17,940 --> 00:09:19,860
So it's really great for
different status related stuff

284
00:09:19,860 --> 00:09:20,850
that you want to do.

285
00:09:20,850 --> 00:09:22,500
Now the final different
type that you can deal with

286
00:09:22,500 --> 00:09:26,280
is the exact type, exact
is very similar to shape

287
00:09:26,280 --> 00:09:28,470
except for the way it works
is it allows you to pass

288
00:09:28,470 --> 00:09:30,810
in an object that only has these props.

289
00:09:30,810 --> 00:09:32,820
So let's say that we want to
have here an object that has

290
00:09:32,820 --> 00:09:37,317
a name which is a
propTypes.string, just like that.

291
00:09:37,317 --> 00:09:39,150
And we don't want it to
have any other properties.

292
00:09:39,150 --> 00:09:40,500
Actually let's do age as well.

293
00:09:40,500 --> 00:09:43,080
propTypes.number.

294
00:09:43,080 --> 00:09:44,370
There we go.

295
00:09:44,370 --> 00:09:46,890
And we'll just call this obj for object.

296
00:09:46,890 --> 00:09:49,170
So what I can do inside of here, obj,

297
00:09:49,170 --> 00:09:50,490
that's going to be an object.

298
00:09:50,490 --> 00:09:52,410
And this object is going to have a name

299
00:09:52,410 --> 00:09:54,213
which is going to be Kyle.

300
00:09:55,297 --> 00:09:57,540
And we'll do age 28.

301
00:09:57,540 --> 00:09:59,580
So it has all the properties
that we expect it to.

302
00:09:59,580 --> 00:10:01,350
Let's get rid of all the
other stuff we don't need.

303
00:10:01,350 --> 00:10:03,870
And now if I inspect, go to
my console, clear this out,

304
00:10:03,870 --> 00:10:06,180
refresh, you notice we
get no errors at all.

305
00:10:06,180 --> 00:10:08,070
Now if I add another property onto here,

306
00:10:08,070 --> 00:10:09,570
let's just, doesn't matter what it is,

307
00:10:09,570 --> 00:10:12,030
just any other property you'll
notice we now get an error

308
00:10:12,030 --> 00:10:12,863
because it's saying

309
00:10:12,863 --> 00:10:14,970
that we only expect there
to be a name and an age

310
00:10:14,970 --> 00:10:17,880
but we're getting this other
random property being added on.

311
00:10:17,880 --> 00:10:20,070
So exact lets you only define

312
00:10:20,070 --> 00:10:22,140
that it has specific keys in it

313
00:10:22,140 --> 00:10:24,390
and it does not allow random other keys.

314
00:10:24,390 --> 00:10:26,550
While if I used shape here instead,

315
00:10:26,550 --> 00:10:27,720
they both work exactly the same

316
00:10:27,720 --> 00:10:29,910
but shape allows me to
have extra properties.

317
00:10:29,910 --> 00:10:31,993
For example, now when I refresh this

318
00:10:31,993 --> 00:10:33,720
you'll notice we get no error at all.

319
00:10:33,720 --> 00:10:35,490
And that's because it's
saying I just expect it

320
00:10:35,490 --> 00:10:36,630
to have these two properties.

321
00:10:36,630 --> 00:10:38,850
I don't care about any
other properties that has,

322
00:10:38,850 --> 00:10:40,350
as long as it has these two properties.

323
00:10:40,350 --> 00:10:41,490
That's all that matters.

324
00:10:41,490 --> 00:10:43,260
And that right there is
a really quick overview

325
00:10:43,260 --> 00:10:45,060
of everything you need
to know about prop types.

326
00:10:45,060 --> 00:10:46,230
You can go a little bit deeper

327
00:10:46,230 --> 00:10:48,630
if you want by reading through
the prop types documentation

328
00:10:48,630 --> 00:10:51,480
but that covers pretty
much 95% of your use cases.

329
00:10:51,480 --> 00:10:53,550
And if for some reason you're
using class components,

330
00:10:53,550 --> 00:10:54,990
prop types work exactly the same,

331
00:10:54,990 --> 00:10:56,730
you just define them
directly on the component.

332
00:10:56,730 --> 00:10:57,930
So it works exactly the same

333
00:10:57,930 --> 00:11:00,450
between class and function components.

334
00:11:00,450 --> 00:11:01,710
Now in the next couple videos I'm gonna be

335
00:11:01,710 --> 00:11:03,600
covering how you can
use TypeScript and React

336
00:11:03,600 --> 00:11:05,490
and all the different things
you need to know about it.

337
00:11:05,490 --> 00:11:06,323
And if you can,

338
00:11:06,323 --> 00:11:08,973
I highly recommend using
TypeScript over prop types.