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 cochallenge.
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 image 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 image 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 image element it had its source
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 image property to the newly created avatar component.
All right.
So in our card component, we know that we get past some properties and these properties come from our
App.
js
and its name, image, telephone and e-mail.
Now the image property corresponds to the image URL
that's from our contacts.js which is the URL that we want to insert into our avatar image elements
source.
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 image 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.image. And now inside the avatar
component, there's now a property called image 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 split 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 dev tools 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 code sandbox's React dev tools 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 editors 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. The first time you install the React component,
I recommend refreshing the website
sSo 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 its 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 source URL just like what we have.
So the React developer tools makes 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.image instead I thought
maybe I had it as an image URL, 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 image URL".
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 those divs, there's 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 divs and 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 a 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 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 detailed 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 telephone 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 telephone 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 a 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 h. And then all I have to do is provide the props that the Avatar component needs which
is something called image.
So I have to get an image URL 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 our 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 hardcoded values.
So for all of that and more, I'll see you there.