In this lesson, I'm going to show you how to separate out a React app into even smaller components which
are more specialized. And in the process, we're going to learn how to use the React Developer Tools to
help debug and manage all of these components. And to begin
I've got a copy of the website that we had at the end of the previous code challenge.
So go ahead and fork this starting project and we'll get started by splitting out some of our components.
Notice how in our Card component, we've got things here which might work better as a single component
because in the future we might want to reuse it.
And one of the most obvious choices is this avatar image, because there might be other parts of our website
where we might need a circular image with a white border.
So it makes sense to create a custom component and separate it out. In order to do that,
we're going to extract this img element, and I'm going to create a new file called, Avatar, and then
add all of the boilerplate code, and I'm going to return this img element.
So let's cut it out of here and put it into our Avatar() function right here.
Now, if we head back into our card.jsx and we import our Avatar component, and then replace it
where it used to be.
Now, notice at this point our app breaks, because when we copied over that img element, it had its src
set as the props.image, whereas in our new Avatar component, we haven't actually yet added the props
inputs, and we haven't passed any properties to that avatar component.
So pause the video and have a think about this, and see if you can solve this problem and make the errors
go away.
I'll give you a hint.
You need to think about how to pass over that img property to the newly created Avatar component.
All right.
So in our Card component, we know that we get passed some properties, and these properties come from our
App.
js,
and its name, img, tel, and e-mail.
Now the img property corresponds to the imgURL
that's from our contacts.js which is the URL that we want to insert into our Avatar img element's
src.
So we have to pass it down two levels,
right?
So first it's from App to Card, and then it's from Card to Avatar.
At this point, especially if you have a lot of properties and a lot of components, it can start to get
a bit confusing.
Now if you really think about it though, we know that we can dig around and see that we've got this prop
called img which is being passed almost like an attribute to the Card component,
and we can pick it up inside here and pass it over as the props.img. And now inside the Avatar
component, there's now a property called img which we can pick up inside here as long as we add props
as an input parameter, and we can pick it up inside here and everything's all good again.
But there's a much easier way of finding out the names of properties and which components rendered them.
If you open up this right sided pane here,
if you take a look down here you see a section called the React DevTools.
And this might remind you a little bit of our Chrome Developer Tools and it works in a similar way.
So instead of showing the entire HTML DOM tree, it actually shows you your React DOM tree. So you can
see that we've got an App component at the top of the tree, which then splits into three Card components
that we've got on screen, and then inside each Card component, we've got an Avatar component.
And what's really helpful about these React DevTools is we can peek at the props that are being passed
around to each of these components.
So for example if I was coding up the Card component and I wanted to know which properties I can tap
into using props.something, I can just click on one of these Card components, and on the right here,
I see all of the props that it gets passed and I can see that it's being rendered by the App component.
And now that I've got the names and the values of each of these props, I can then go ahead inserting
them inside each of my HTML elements.
Now, I find that CodeSandbox's React DevTools tends to be quite buggy, and sometimes it just doesn't show
what it's supposed to.
So what I prefer to work on is the actual React Dev Tools that you can install on Chrome or Firefox.
And also if you're working with your local environment, so using a local editor such as VS Code or
Atom, you're going to need this installed anyways. I recommend using Chrome for the entirety of this course.
So if you head over to the chrome web store and search for the React Developer Tools that's offered
by Facebook, you can go ahead and Add it to Chrome just by clicking on the, Add extension button. And once
it's done, you'll see this little symbol show up next to your search bar.
Now if you're using Firefox there's also a React Developer Tools add-on that you can use and it works
exactly the same way. Once you've got this installed then you can actually just simply open up the Chrome
Developer Tools or Firefox Developer Tools by going to View, Developer and Developer Tools or using the
shortcut as you're probably used to by now.
So inside here you'll notice right at the end there's a tab called, Components, and it's got this little
React symbol next to it.
And this is going to be showing our React components on screen. And the first time you install the React component,
I recommend refreshing the website
so it actually starts working. And when it does,
you can see it'll either color itself in red, or in blue depending on whether if you're in the Developer
mode or if you're in the Deployment mode.
Once this has been activated in our Components tab, you should be able to see our React component tree.
So here you can even use this little select tool,
not this one which is going to select the HTML elements, but this one inside the Components tab.
And this is going to allow you to select your React components.
So for example, if I click here it's going to select my Avatar components in the tree and you can imagine
if you have a very big and complex website with hundreds of components rendered then this can become
really helpful.
And when I've got my Avatar component selected, you can see that it gets a property called img which
is the URL of the image. Now if I was to develop my Avatar.jsx file,
it's quite easy for me to actually go ahead and to know which properties I can tap into when I write
props.something.
Now a cool thing about this React Dev Tool is that it works on other websites that you haven't developed
as well.
For example, if I go to airbnb.com you can see that the color has now changed, it's become a black
and blue, and this represents a deployed version of React, so React is in production mode. And if we go
ahead and open up our Developer Tools again, and we go to components, then we can see that Airbnb is also
comprised of a whole bunch of React components.
And if we go ahead and use our selector tool maybe we can scroll down and take a look at each of these
tile elements that they've got here, right?
So these seem very much like classic components.
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,
aspect ratio, and alt, as well as a src URL, just like what we have.
So the React Developer Tools, make it a lot easier to debug what's actually going on when your app goes
wrong,
so when it's not doing something you're expecting it to.
For example, if inside my Avatar component, instead of tapping into the props.img, instead I thought
maybe I had it as an imgURL, then I'll notice that in my preview that I don't actually get an image
shown. But using my React Dev Tools, I can go ahead and select the image and then take a look at the props
that are showing up, and I can see, "Oh right.
So the URL is actually under a prop called img instead of imgURL".
So I go ahead and fix that and then bam!
Of course my images now start showing up.
So we're going to be using the React Developer Tools to debug our website in the future as well, so that
when things go wrong, we'll be able to inspect it and know how to fix it.
Now if you're wondering where all of the HTML elements are in our tree, because if we look at our Card
component we can see there's divs, there's h2's, and all of these are being filtered out to only show the
React components.
And this is very useful when you're developing for React because you're unlikely to want to inspect
on those HTML native components. But if you do want them switched on then you can click on this little
settings icon, go to the Components, and switch off the filter.
So all of these host items then get shown such as your div's and h1's.
But normally, I will actually have that filter on just so that my tree is a lot cleaner.
Another thing that's quite helpful in the React Developer Tools is you can go ahead and click on this
part which shows you the source code for this component, and it brings up the file that's actually rendering
that component so that you can inspect it inside your browser. And you can even change the values of
some of these components, just by going into the props and clicking into here, and adding a new URL,
like so. Coming back to these reusable React components,
one of the most important things when you're creating your website, is having an idea of how you would like
to create the component structure or the component tree, because there are many places that can be reusable
components.
For example, in our paragraph which represents these detail elements in our contact cards, I'm using them
more than once and in more than one place.
Whenever you find yourself creating the same thing over, and over again, such as this paragraph element
with the same class and same styling applied to it, then it's usually a good idea to separate it out into
a separate component and have properties pass to it so that it can render custom pieces of information.
As a challenge,
I want you to create a custom detail component and that is going to replace these two paragraph tags.
And then I want you to pass these different pieces of information over to that detail component and
use the React Dev Tools to inspect for the props, and make sure that it works properly.
So pause the video now and try to complete this challenge.
All right.
So the end result is instead of having these paragraph tags, I want to have components called, Detail.
And for these Detail components, I'm going to pass over a single property which I'm going to call the
detail info. And I'm going to set them to equal the value of the tel number and the email. Inside
this detail
I'm going to say props.tel, and then I'm going to make another copy of this Detail component,
and this one's going to be props.email and that should theoretically replace these two lines.
So let's cut those out and go ahead and create a new file called Detail.jsx,
and inside here, I'm going to paste those two paragraph tags as a template, but I'm also going
to get hold of the input statement, I'm going to create the Detail component as a function, and then it's
going to hopefully return some semblance of this, and then I'm going to export it as the default. So inside
my Detail component I'm not going to be returning to paragraph elements,
I just want one so I can delete that other one.
And inside this particular Detail element, I'm going to need to add the props as an input parameter, so
that way I can tap into any of the props that are passed over.
And now just to make my errors go away,
I'm going to go back into my Card.jsx and then import that Detail component.
But unfortunately, as you can see right now, I don't actually get any details showing up.
So this is the moment for our React Dev Tools to really shine.
If we take a look at our Detail component, and on the right-hand side we see our props being passed over,
it's listed under a property called
detailInfo, using props.tel which is what I copied over from my Card.jsx,
is not going to fly.
Instead, I have to change this to the name of the property I've got over here, which is detailInfo. And
as soon as I do that then my details start showing up. And now I've got two Detail components, each getting
some properties passed over, the tel and the email, and they're being rendered as a separate component.
So effectively, we can split our website into smaller, and smaller components so that we end up with a
bunch of components like a pallet of components that we can then customize and use as needed.
So if we needed a calendar component, then we can simply just use it and then edit it to have different
information inside.
And this really is the power of React,
making it faster and easier to develop the front end of your web application. And a good example of this
is even though we've got these Avatar components nested inside our card as default,
but let's say that somewhere else,
let's say in our App component, we decided that I wanted an Avatar image of myself just under the h1, "My
contacts",
well, all I would have to do is just import my Avatar component and then go ahead and insert it wherever
it is I want,
so just below my h1, and then all I have to do is provide the props that the Avatar component needs which
is something called img.
So I have to get the imgURL.. and search for me.
This seems to be a picture of me, and let's just copy the image address and use it as the property called
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
component at the top in the App level of my tree,
so just above all of the cards. And I'm able to add it in with all the styling, all of the other bells
and whistles, just by creating that single Avatar component and providing it the necessary props to customize
it.
So this is really really powerful.
This idea of a palette of components and the React Developer Tools really make it easy to actually see
what's going on with each of these components, to view them, their properties, see the entire component
tree,
find the ones that you want,
look at the source code
if you need to fix things, and we're going to be using a lot of this as we're developing more complex
React apps. Now in the next lesson though, we're going to sort out a big eyesore in our app that is all
of this.
Notice how we're writing so much repetitive code here: contacts[0].name, contacts[0], contacts[1]
,
this is very painful to look at. But in the next lesson, we're going to learn about mapping components
so that we end up with much more simplified code that uses loops rather than these hard-coded values.
So for all of that and more, I'll see you there.