In this lesson I'm going to show you how to separate out a React app into even smaller components which 1
are more specialized. And in the process we're going to learn how to use the React developer tools to 2
help debug and manage all of these components. And to begin 3
I've got a copy of the website that we had at the end of the previous cochallenge. 4
So go ahead and fork this starting project and we'll get started by splitting out some of our components. 5
Notice how in our card component, we've got things here which might work better as a single component 6
because in the future we might want to reuse it. 7
And one of the most obvious choices is this avatar image because there might be other parts of our website 8
where we might need a circular image with a white border. 9
So it makes sense to create a custom component and separate it out. In order to do that 10
we're going to extract this image element and I'm going to create a new file called Avatar and then 11
add all of the boilerplate code and I'm going to return this image element. 12
So let's cut it out of here and put it into our avatar function right here. 13
Now if we head back into our card.jsx and we import our avatar component and then replace it 14
where it used to be. 15
Now notice at this point our app breaks because when we copied over that image element it had its source 16
set as the props.image whereas in our new avatar component, we haven't actually yet added the props 17
inputs and we haven't passed any properties to that avatar component. 18
So pause the video and have a think about this and see if you can solve this problem and make the errors 19
go away. 20
I'll give you a hint. 21
You need to think about how to pass over that image property to the newly created avatar component. 22
All right. 23
So in our card component, we know that we get past some properties and these properties come from our 24
App. 25
js 26
and its name, image, telephone and e-mail. 27
Now the image property corresponds to the image URL 28
that's from our contacts.js which is the URL that we want to insert into our avatar image elements 29
source. 30
So we have to pass it down two levels 31
right? 32
So first it's from app to card and then it's from card to Avatar. 33
At this point especially if you have a lot of properties and a lot of components, it can start to get 34
a bit confusing. 35
Now if you really think about it though, we know that we can dig around and see that we've got this prop 36
called image which is being passed almost like an attribute to the card component. 37
And we can pick it up inside here and pass it over as the props.image. And now inside the avatar 38
component, there's now a property called image which we can pick up inside here as long as we add props 39
as an input parameter and we can pick it up inside here and everything's all good again. 40
But there's a much easier way of finding out the names of properties and which components rendered them. 41
If you open up this right sided pane here, 42
if you take a look down here you see a section called the React DevTools. 43
And this might remind you a little bit of our Chrome developer tools and it works in a similar way. 44
So instead of showing the entire HTML DOM tree, it actually shows you your React DOM tree so you can 45
see that we've got an app component at the top of the tree which then split into three card components 46
that we've got on screen and then inside each card component we've got an avatar component. 47
And what's really helpful about these React dev tools is we can peek at the props that are being passed 48
around to each of these components. 49
So for example if I was coding up the card component and I wanted to know which properties I can tap 50
into using props.something I can just click on one of these card components and on the right here 51
I see all of the props that it gets passed and I can see that it's being rendered by the app component. 52
And now that I've got the names and the values of each of these props, I can then go ahead inserting 53
them inside each of my HTML elements. 54
Now I find that code sandbox's React dev tools tends to be quite buggy and sometimes it just doesn't show 55
what it's supposed to. 56
So what I prefer to work on is the actual React dev tools that you can install on Chrome or Firefox. 57
And also if you're working with your local environment so using a local editors such as VS code or 58
Atom, you're going to need this installed anyways. I recommend using Chrome for the entirety of this course. 59
So if you head over to the Chrome web store and search for the React developer tools that's offered 60
by Facebook, you can go ahead and add it to Chrome just by clicking on the add extension button. And once 61
it's done you'll see this little symbol show up next to your search bar. 62
Now if you're using Firefox there's also a React developer tools add-on that you can use and it works 63
exactly the same way. Once you've got this installed then you can actually just simply open up the Chrome 64
developer tools or Firefox developer tools by going to view, developer and developer tools or using the 65
shortcut as you're probably used to by now. 66
So inside here you'll notice right at the end there's a tab called components and it's got this little 67
React symbol next to it. 68
And this is going to be showing our React components on screen. The first time you install the React component, 69
I recommend refreshing the website 70
sSo it actually starts working. And when it does 71
you can see it'll either color itself in red or in blue depending on whether if you're in the developer 72
mode or if you're in the deployment mode. 73
Once this has been activated in our components tab you should be able to see our React component tree. 74
So here you can even use this little select tool. 75
Not this one which is going to select the HTML elements, but this one inside the components tab. 76
And this is going to allow you to select your React components. 77
So for example if I click here it's going to select my avatar components in the tree and you can imagine 78
if you have a very big and complex website with hundreds of components rendered then this can become 79
really helpful. 80
And when I've got my avatar component selected, you can see that it gets a property called img which 81
is the URL of the image. Now if I was to develop my avatar.jsx file, 82
it's quite easy for me to actually go ahead and to know which properties I can tap into when I write 83
props.something. 84
Now a cool thing about this React dev tool is that it works on other websites that you haven't developed 85
as well. 86
For example, if I go to airbnb.com you can see that the color has now changed its become a black 87
and blue and this represents a deployed version of React, so react is in production mode. And if we go 88
ahead and open up our developer tools again and we go to components then we can see that AirBnB is also 89
comprised of a whole bunch of React components. 90
And if we go ahead and use our selector tool maybe we can scroll down and take a look at each of these 91
tile elements that they've got here right? 92
So these seem very much like classic components. 93
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
aspect ratio and alt as well as a source URL just like what we have. 95
So the React developer tools makes it a lot easier to debug what's actually going on when your app goes 96
wrong, 97
so when it's not doing something you're expecting it to. 98
For example if inside my avatar component instead of tapping into the props.image instead I thought 99
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
shown. But using my React dev tools I can go ahead and select the image and then take a look at the props 101
that are showing up and I can see, "Oh right. 102
So the URL is actually under a prop called img instead of image URL". 103
So I go ahead and fix that and then bam! 104
Of course my images now start showing up. 105
So we're going to be using the React developer tools to debug our website in the future as well so that 106
when things go wrong, we'll be able to inspect it and know how to fix it. 107
Now if you're wondering where all of the HTML elements are in our tree because if we look at our card 108
component we can see those divs, there's s and all of these are being filtered out to only show the 109
React components. 110
And this is very useful when you're developing for React because you're unlikely to want to inspect 111
on those HTML native components. But if you do want them switched on then you can click on this little 112
settings icon go to the components and switch off the filter. 113
So all of these host items then get shown such as your divs and s. 114
But normally I will actually have that filter on just so that my tree is a lot cleaner. 115
Another thing that's quite helpful in the React developer tools is you can go ahead and click on this 116
part which shows you the source code for this component and it brings up the file that's actually rendering 117
that component so that you can inspect it inside your browser. And you can even change the values of 118
some of these components just by going into the props and clicking into here and adding a new URL 119
like so. Coming back to these reusable React components, 120
one of the most important things when you're creating a website is having an idea of how you would like 121
to create the component structure or the component tree because there are many places that can be reusable 122
components. 123
For example our paragraph which represents these detail elements in our contact cards I'm using them 124
more than once and in more than one place. 125
Whenever you find yourself creating the same thing over and over again such as this paragraph element 126
with the same class and same styling applied to it, then it's usually a good idea to separate it out into 127
a separate component and have properties pass to it so that it can render custom pieces of information. 128
As a challenge 129
I want you to create a custom detail component and that is going to replace these two paragraph tags. 130
And then I want you to pass these different pieces of information over to that detail component and 131
use the React dev tools to inspect for the props and make sure that it works properly. 132
So pause the video now and try to complete this challenge. 133
All right. 134
So the end result is instead of having these paragraph tags, I want to have components called detail. 135
And for these detailed components, I'm going to pass over a single property which I'm going to call the 136
detail info. And I'm going to set them to equal the value of the telephone number and the email. Inside 137
this detail 138
I'm going to say props.tel and then I'm going to make another copy of this detail component 139
and this one's going to be props.email and that should theoretically replace these two lines. 140
So let's cut those out and go ahead and create a new file called detail. 141
jsx and inside here I'm going to paste those two paragraph tags as a template but I'm also going 142
to get hold of the input statement, I'm going to create the detail component as a function and then it's 143
going to hopefully return some semblance of this and then I'm going to export it as the default. So inside 144
my detail component I'm not going to be returning to paragraph elements, 145
I just want one so I can delete that other one. 146
And inside this particular detail element I'm going to need to add the props as an input parameter so 147
that way I can tap into any of the props that are passed over. 148
And now just to make my errors go away 149
I'm going to go back into my card.jsx and then import that detail component. 150
But unfortunately as you can see right now, I don't actually get any details showing up. 151
So this is the moment for our React dev tools to really shine. 152
If we take a look at our detail component and on the right hand side we see our props being passed over. 153
It's listed under a property called 154
detailInfo using props.tel which is what I copied over from my card 155
.jsx is not going to fly. 156
Instead I have to change this to the name of the property I've got over here which is detailInfo. And 157
as soon as I do that then my details start showing up and now I've got two detail components each getting 158
some properties passed over, the telephone and the email, and they're being rendered as a separate component. 159
So effectively, we can split our website into smaller and smaller components so that we end up with a 160
bunch of components like a pallet of components that we can then customize and use as needed. 161
So if we needed a calendar component, then we can simply just use it and then edit it to have different 162
information inside. 163
And this really is the power of React, 164
making it faster and easier to develop the front end of your web application. And a good example of this 165
is even though we've got these Avatar components nested inside our card as default, 166
but let's say that somewhere else 167
let's say in our app component we decided that I wanted a Avatar image of myself just under the h1 my 168
contacts. 169
Well, all I would have to do is just import my avatar component and then go ahead and insert it wherever 170
it is I want, 171
so just below my h. And then all I have to do is provide the props that the Avatar component needs which 172
is something called image. 173
So I have to get an image URL and search for me. 174
This seems to be a picture of me and let's just copy the image address and use it as the property called 175
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
component at the top in the app level of my tree, 177
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
and whistles just by creating that single avatar component and providing it the necessary props to customize 179
it. 180
So this is really really powerful. 181
This idea of a palette of components and the React developer tools really make it easy to actually see 182
what's going on with each of these components, to view them, their properties, see the entire component 183
tree, 184
find the ones that you want, 185
look at the source code 186
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
React apps. Now in the next lesson though, we're going to sort out a big eyesore in our app that is all 188
of this. 189
Notice how we're writing so much repetitive code here: contacts[0].name, contacts[0], contacts 190
[1], 191
this is very painful to look at. But in the next lesson we're going to learn about mapping components 192
so that we end up with much more simplified code that uses loops rather than these hardcoded values. 193
So for all of that and more, I'll see you there.