WEBVTT

0
00:00.750 --> 00:07.740
In this lesson I'm going to show you how to separate out a React app into even smaller components which

1
00:07.740 --> 00:13.230
are more specialized. And in the process we're going to learn how to use the React developer tools to

2
00:13.230 --> 00:17.610
help debug and manage all of these components. And to begin

3
00:17.640 --> 00:23.140
I've got a copy of the website that we had at the end of the previous cochallenge.

4
00:23.370 --> 00:32.520
So go ahead and fork this starting project and we'll get started by splitting out some of our components.

5
00:32.520 --> 00:39.720
Notice how in our card component, we've got things here which might work better as a single component

6
00:40.020 --> 00:43.170
because in the future we might want to reuse it.

7
00:43.320 --> 00:50.550
And one of the most obvious choices is this avatar image because there might be other parts of our website

8
00:50.580 --> 00:54.660
where we might need a circular image with a white border.

9
00:54.990 --> 01:01.170
So it makes sense to create a custom component and separate it out. In order to do that

10
01:01.170 --> 01:10.740
we're going to extract this image element and I'm going to create a new file called Avatar and then

11
01:10.800 --> 01:16.320
add all of the boilerplate code and I'm going to return this image element.

12
01:16.320 --> 01:22.590
So let's cut it out of here and put it into our avatar function right here.

13
01:22.610 --> 01:31.100
Now if we head back into our card.jsx and we import our avatar component and then replace it

14
01:31.160 --> 01:33.760
where it used to be.

15
01:33.940 --> 01:41.050
Now notice at this point our app breaks because when we copied over that image element it had its source

16
01:41.140 --> 01:48.760
set as the props.image whereas in our new avatar component, we haven't actually yet added the props

17
01:48.880 --> 01:54.500
inputs and we haven't passed any properties to that avatar component.

18
01:54.640 --> 02:01.180
So pause the video and have a think about this and see if you can solve this problem and make the errors

19
02:01.180 --> 02:01.650
go away.

20
02:03.170 --> 02:04.100
I'll give you a hint.

21
02:04.160 --> 02:10.820
You need to think about how to pass over that image property to the newly created avatar component.

22
02:14.200 --> 02:14.530
All right.

23
02:14.630 --> 02:22.610
So in our card component, we know that we get past some properties and these properties come from our

24
02:22.670 --> 02:23.120
App.

25
02:23.120 --> 02:23.930
js

26
02:24.140 --> 02:28.680
and its name, image, telephone and e-mail.

27
02:28.700 --> 02:32.170
Now the image property corresponds to the image URL

28
02:32.200 --> 02:39.380
that's from our contacts.js which is the URL that we want to insert into our avatar image elements

29
02:39.430 --> 02:40.380
source.

30
02:40.460 --> 02:42.830
So we have to pass it down two levels

31
02:42.830 --> 02:43.490
right?

32
02:43.520 --> 02:50.540
So first it's from app to card and then it's from card to Avatar.

33
02:52.280 --> 02:56.960
At this point especially if you have a lot of properties and a lot of components, it can start to get

34
02:56.960 --> 02:58.770
a bit confusing.

35
02:58.850 --> 03:04.370
Now if you really think about it though, we know that we can dig around and see that we've got this prop

36
03:04.370 --> 03:09.480
called image which is being passed almost like an attribute to the card component.

37
03:09.710 --> 03:19.970
And we can pick it up inside here and pass it over as the props.image. And now inside the avatar

38
03:19.970 --> 03:27.620
component, there's now a property called image which we can pick up inside here as long as we add props

39
03:27.740 --> 03:33.670
as an input parameter and we can pick it up inside here and everything's all good again.

40
03:33.920 --> 03:39.170
But there's a much easier way of finding out the names of properties and which components rendered them.

41
03:40.690 --> 03:44.190
If you open up this right sided pane here,

42
03:44.260 --> 03:49.150
if you take a look down here you see a section called the React DevTools.

43
03:49.150 --> 03:55.150
And this might remind you a little bit of our Chrome developer tools and it works in a similar way.

44
03:55.150 --> 04:02.080
So instead of showing the entire HTML DOM tree, it actually shows you your React DOM tree so you can

45
04:02.080 --> 04:08.920
see that we've got an app component at the top of the tree which then split into three card components

46
04:09.010 --> 04:15.150
that we've got on screen and then inside each card component we've got an avatar component.

47
04:15.280 --> 04:20.770
And what's really helpful about these React dev tools is we can peek at the props that are being passed

48
04:20.770 --> 04:23.330
around to each of these components.

49
04:23.350 --> 04:30.190
So for example if I was coding up the card component and I wanted to know which properties I can tap

50
04:30.190 --> 04:36.640
into using props.something I can just click on one of these card components and on the right here

51
04:36.670 --> 04:42.870
I see all of the props that it gets passed and I can see that it's being rendered by the app component.

52
04:43.630 --> 04:49.660
And now that I've got the names and the values of each of these props, I can then go ahead inserting

53
04:49.660 --> 04:53.200
them inside each of my HTML elements.

54
04:53.230 --> 04:59.950
Now I find that code sandbox's React dev tools tends to be quite buggy and sometimes it just doesn't show

55
04:59.950 --> 05:01.330
what it's supposed to.

56
05:01.330 --> 05:08.640
So what I prefer to work on is the actual React dev tools that you can install on Chrome or Firefox.

57
05:08.770 --> 05:15.700
And also if you're working with your local environment so using a local editors such as VS code or

58
05:15.700 --> 05:23.090
Atom, you're going to need this installed anyways. I recommend using Chrome for the entirety of this course.

59
05:23.110 --> 05:27.970
So if you head over to the Chrome web store and search for the React developer tools that's offered

60
05:27.970 --> 05:35.130
by Facebook, you can go ahead and add it to Chrome just by clicking on the add extension button. And once

61
05:35.130 --> 05:39.300
it's done you'll see this little symbol show up next to your search bar.

62
05:39.300 --> 05:45.930
Now if you're using Firefox there's also a React developer tools add-on that you can use and it works

63
05:45.960 --> 05:54.060
exactly the same way. Once you've got this installed then you can actually just simply open up the Chrome

64
05:54.060 --> 06:01.110
developer tools or Firefox developer tools by going to view, developer and developer tools or using the

65
06:01.110 --> 06:03.670
shortcut as you're probably used to by now.

66
06:03.690 --> 06:09.060
So inside here you'll notice right at the end there's a tab called components and it's got this little

67
06:09.060 --> 06:10.630
React symbol next to it.

68
06:10.710 --> 06:18.180
And this is going to be showing our React components on screen. The first time you install the React component,

69
06:18.180 --> 06:19.970
I recommend refreshing the website

70
06:19.980 --> 06:22.940
sSo it actually starts working. And when it does

71
06:22.980 --> 06:29.850
you can see it'll either color itself in red or in blue depending on whether if you're in the developer

72
06:29.850 --> 06:32.520
mode or if you're in the deployment mode.

73
06:33.000 --> 06:40.200
Once this has been activated in our components tab you should be able to see our React component tree.

74
06:40.230 --> 06:43.730
So here you can even use this little select tool.

75
06:43.890 --> 06:49.130
Not this one which is going to select the HTML elements, but this one inside the components tab.

76
06:49.320 --> 06:52.940
And this is going to allow you to select your React components.

77
06:52.980 --> 06:58.890
So for example if I click here it's going to select my avatar components in the tree and you can imagine

78
06:58.890 --> 07:04.230
if you have a very big and complex website with hundreds of components rendered then this can become

79
07:04.230 --> 07:05.460
really helpful.

80
07:05.610 --> 07:11.490
And when I've got my avatar component selected, you can see that it gets a property called img which

81
07:11.490 --> 07:18.830
is the URL of the image. Now if I was to develop my avatar.jsx file,

82
07:18.950 --> 07:25.490
it's quite easy for me to actually go ahead and to know which properties I can tap into when I write

83
07:25.490 --> 07:28.030
props.something.

84
07:28.070 --> 07:32.960
Now a cool thing about this React dev tool is that it works on other websites that you haven't developed

85
07:32.960 --> 07:33.680
as well.

86
07:33.710 --> 07:40.310
For example, if I go to airbnb.com you can see that the color has now changed its become a black

87
07:40.310 --> 07:47.840
and blue and this represents a deployed version of React, so react is in production mode. And if we go

88
07:47.840 --> 07:54.020
ahead and open up our developer tools again and we go to components then we can see that AirBnB is also

89
07:54.020 --> 07:57.550
comprised of a whole bunch of React components.

90
07:58.040 --> 08:04.160
And if we go ahead and use our selector tool maybe we can scroll down and take a look at each of these

91
08:04.250 --> 08:06.540
tile elements that they've got here right?

92
08:07.010 --> 08:10.460
So these seem very much like classic components.

93
08:10.670 --> 08:16.160
And if we click on it you can see they've got a component called E and it's got all of these props like

94
08:16.220 --> 08:22.310
aspect ratio and alt as well as a source URL just like what we have.

95
08:23.270 --> 08:29.450
So the React developer tools makes it a lot easier to debug what's actually going on when your app goes

96
08:29.450 --> 08:29.960
wrong,

97
08:29.960 --> 08:33.240
so when it's not doing something you're expecting it to.

98
08:33.260 --> 08:40.790
For example if inside my avatar component instead of tapping into the props.image instead I thought

99
08:40.790 --> 08:48.080
maybe I had it as an image URL, then I'll notice that in my preview that I don't actually get an image

100
08:48.080 --> 08:55.280
shown. But using my React dev tools I can go ahead and select the image and then take a look at the props

101
08:55.280 --> 08:57.710
that are showing up and I can see, "Oh right.

102
08:57.710 --> 09:03.670
So the URL is actually under a prop called img instead of image URL".

103
09:03.890 --> 09:06.310
So I go ahead and fix that and then bam!

104
09:06.440 --> 09:09.390
Of course my images now start showing up.

105
09:09.500 --> 09:15.290
So we're going to be using the React developer tools to debug our website in the future as well so that

106
09:15.290 --> 09:18.920
when things go wrong, we'll be able to inspect it and know how to fix it.

107
09:20.220 --> 09:27.240
Now if you're wondering where all of the HTML elements are in our tree because if we look at our card

108
09:27.240 --> 09:33.420
component we can see those divs, there's <h2>s and all of these are being filtered out to only show the

109
09:33.420 --> 09:34.920
React components.

110
09:35.040 --> 09:40.020
And this is very useful when you're developing for React because you're unlikely to want to inspect

111
09:40.410 --> 09:46.200
on those HTML native components. But if you do want them switched on then you can click on this little

112
09:46.380 --> 09:50.970
settings icon go to the components and switch off the filter.

113
09:50.970 --> 09:56.160
So all of these host items then get shown such as your divs and <h1>s.

114
09:56.670 --> 10:03.240
But normally I will actually have that filter on just so that my tree is a lot cleaner.

115
10:03.240 --> 10:08.730
Another thing that's quite helpful in the React developer tools is you can go ahead and click on this

116
10:08.730 --> 10:14.370
part which shows you the source code for this component and it brings up the file that's actually rendering

117
10:14.370 --> 10:20.850
that component so that you can inspect it inside your browser. And you can even change the values of

118
10:20.850 --> 10:29.200
some of these components just by going into the props and clicking into here and adding a new URL

119
10:30.390 --> 10:35.930
like so. Coming back to these reusable React components,

120
10:36.040 --> 10:42.640
one of the most important things when you're creating a website is having an idea of how you would like

121
10:42.640 --> 10:50.080
to create the component structure or the component tree because there are many places that can be reusable

122
10:50.080 --> 10:50.970
components.

123
10:51.040 --> 10:59.230
For example our paragraph which represents these detail elements in our contact cards I'm using them

124
10:59.380 --> 11:02.260
more than once and in more than one place.

125
11:02.410 --> 11:08.680
Whenever you find yourself creating the same thing over and over again such as this paragraph element

126
11:08.740 --> 11:15.160
with the same class and same styling applied to it, then it's usually a good idea to separate it out into

127
11:15.160 --> 11:21.820
a separate component and have properties pass to it so that it can render custom pieces of information.

128
11:23.080 --> 11:23.950
As a challenge

129
11:23.950 --> 11:32.200
I want you to create a custom detail component and that is going to replace these two paragraph tags.

130
11:32.680 --> 11:38.560
And then I want you to pass these different pieces of information over to that detail component and

131
11:38.620 --> 11:44.650
use the React dev tools to inspect for the props and make sure that it works properly.

132
11:44.860 --> 11:47.620
So pause the video now and try to complete this challenge.

133
11:51.480 --> 11:51.830
All right.

134
11:51.860 --> 11:57.650
So the end result is instead of having these paragraph tags, I want to have components called detail.

135
11:58.220 --> 12:04.490
And for these detailed components, I'm going to pass over a single property which I'm going to call the

136
12:04.580 --> 12:12.590
detail info. And I'm going to set them to equal the value of the telephone number and the email. Inside

137
12:12.680 --> 12:13.600
this detail

138
12:13.610 --> 12:20.390
I'm going to say props.tel and then I'm going to make another copy of this detail component

139
12:20.420 --> 12:26.690
and this one's going to be props.email and that should theoretically replace these two lines.

140
12:26.690 --> 12:32.500
So let's cut those out and go ahead and create a new file called detail.

141
12:32.510 --> 12:41.270
jsx and inside here I'm going to paste those two paragraph tags as a template but I'm also going

142
12:41.270 --> 12:49.670
to get hold of the input statement, I'm going to create the detail component as a function and then it's

143
12:49.670 --> 12:59.890
going to hopefully return some semblance of this and then I'm going to export it as the default. So inside

144
12:59.950 --> 13:04.210
my detail component I'm not going to be returning to paragraph elements,

145
13:04.210 --> 13:07.630
I just want one so I can delete that other one.

146
13:07.630 --> 13:16.600
And inside this particular detail element I'm going to need to add the props as an input parameter so

147
13:16.600 --> 13:19.860
that way I can tap into any of the props that are passed over.

148
13:19.990 --> 13:22.610
And now just to make my errors go away

149
13:22.630 --> 13:28.330
I'm going to go back into my card.jsx and then import that detail component.

150
13:32.670 --> 13:39.030
But unfortunately as you can see right now, I don't actually get any details showing up.

151
13:39.030 --> 13:42.930
So this is the moment for our React dev tools to really shine.

152
13:42.930 --> 13:50.740
If we take a look at our detail component and on the right hand side we see our props being passed over.

153
13:50.910 --> 13:52.720
It's listed under a property called 

154
13:52.740 --> 13:59.040
detailInfo using props.tel which is what I copied over from my card

155
13:59.040 --> 14:01.170
.jsx is not going to fly.

156
14:01.650 --> 14:08.460
Instead I have to change this to the name of the property I've got over here which is detailInfo. And

157
14:08.460 --> 14:16.380
as soon as I do that then my details start showing up and now I've got two detail components each getting

158
14:16.380 --> 14:23.970
some properties passed over, the telephone and the email, and they're being rendered as a separate component.

159
14:24.570 --> 14:32.160
So effectively, we can split our website into smaller and smaller components so that we end up with a

160
14:32.160 --> 14:40.910
bunch of components like a pallet of components that we can then customize and use as needed.

161
14:40.950 --> 14:47.880
So if we needed a calendar component, then we can simply just use it and then edit it to have different

162
14:47.880 --> 14:49.650
information inside.

163
14:49.800 --> 14:52.390
And this really is the power of React,

164
14:52.620 --> 15:00.660
making it faster and easier to develop the front end of your web application. And a good example of this

165
15:00.780 --> 15:06.810
is even though we've got these Avatar components nested inside our card as default,

166
15:06.810 --> 15:08.410
but let's say that somewhere else

167
15:08.430 --> 15:16.500
let's say in our app component we decided that I wanted a Avatar image of myself just under the h1 my

168
15:16.500 --> 15:17.240
contacts.

169
15:17.700 --> 15:29.100
Well, all I would have to do is just import my avatar component and then go ahead and insert it wherever

170
15:29.100 --> 15:29.790
it is I want,

171
15:29.790 --> 15:39.300
so just below my h. And then all I have to do is provide the props that the Avatar component needs which

172
15:39.300 --> 15:40.560
is something called image.

173
15:40.650 --> 15:45.480
So I have to get an image URL and search for me.

174
15:46.170 --> 15:53.730
This seems to be a picture of me and let's just copy the image address and use it as the property called

175
15:53.930 --> 16:01.590
img for my avatar image. And now if we go over to our React app, you can see that I've now got this avatar

176
16:01.590 --> 16:06.540
component at the top in the app level of my tree,

177
16:06.570 --> 16:12.630
so just above all of the cards. And I'm able to add it in with all the styling all of the other bells

178
16:12.630 --> 16:20.010
and whistles just by creating that single avatar component and providing it the necessary props to customize

179
16:20.010 --> 16:20.740
it.

180
16:20.820 --> 16:22.770
So this is really really powerful.

181
16:22.770 --> 16:30.030
This idea of a palette of components and the React developer tools really make it easy to actually see

182
16:30.030 --> 16:36.020
what's going on with each of these components, to view them, their properties, see the entire component

183
16:36.020 --> 16:36.660
tree,

184
16:36.660 --> 16:38.600
find the ones that you want,

185
16:38.940 --> 16:40.040
look at the source code

186
16:40.050 --> 16:45.720
if you need to fix things and we're going to be using a lot of this as we're developing our more complex

187
16:45.720 --> 16:54.140
React apps. Now in the next lesson though, we're going to sort out a big eyesore in our app that is all

188
16:54.140 --> 16:55.090
of this.

189
16:55.100 --> 17:02.910
Notice how we're writing so much repetitive code here: contacts[0].name, contacts[0], contacts

190
17:02.910 --> 17:03.710
[1],

191
17:03.710 --> 17:09.590
this is very painful to look at. But in the next lesson we're going to learn about mapping components

192
17:09.950 --> 17:17.030
so that we end up with much more simplified code that uses loops rather than these hardcoded values.

193
17:17.030 --> 17:19.490
So for all of that and more, I'll see you there.