At this point I think you can agree with me.
This app component does not look good.
So in this video we're going to walk through these series of steps that you're going to go through every
single time to create a reusable component.
All right so here is the flow.
Here's the series of steps.
So this is what we're going to do to make a very usable and configurable component.
The first thing we're going to do is identify the GSX that already exists inside of our application
that somehow appears to be duplicated.
Now if we go back over into our codebase over here without a doubt we know that this div with class
name of comment all the way down to the closing part of that tag right there.
That thing is basically duplicated three times.
Now of course we know that very very well because we did a copy paste in the last video.
But I think you probably understand what's going on here.
We want to find or isolate some portion of our application or some GSX that appears to be copy pasted
either in a single component or in many places inside of our project.
The next we're going to do is try to provide a name for the component that we're going to generate.
We're going to eventually take that duplicated GSX and put it into a brand new stand alone component.
And one of the most important things around that process is giving that component a good meaningful
name.
Now in this case I would say that the purpose of this GSX right here is to display a single comment
or maybe details about a single comment.
So I might give this thing the name of something like component or see me comment detail because that's
what it's doing it's giving the details on a single comment.
The next it will do is then create a new file to house the component that we're going to create to kind
of duplicate the GSX inside of our application.
This file is going to have the same name as the component.
So we are going to now make a new file called comment detail inside of our Cercy folder.
All right.
So I'm going to flip back over to my code editor inside the Cercy folder.
I'm going to make a new file called comment detail.
J.S. like so now I want you to take a look at the nomenclature or the style of the name I provided right
here.
Usually real components are written in uppercase or kind of proper form.
So that is comment detail for the name of this file as opposed to something like.
Comment detail or comment detail or anything else like that.
So simply comment detail with a capital C and a capital D.
So now that we've created this file with the appropriate name we're going to create a new component
inside that file and we're going to move that duplicated GSX over to this new component and this process
is going to be a little bit longer.
So let's do this right now.
Inside this file I have to first import the re-act library out the very top.
Then after that I can make a new function that is going to serve as this comment detailed component
so I'll say Konst Calment detail that's going to be an arrow function like so.
And then inside of your I'll put a return statement with a set of parentheses like so because remember
that's what we always do.
Anytime we know that we're going to have a big block of GSX And then finally I'm going to go back over
to where we have that kind of duplicated GSX.
And I'm going to take that duplicated stuff right here.
So everything from div class name comment all the way down to the closing div right there.
So a total of about 13 lines or so and I'm going to cut that and then take it over and paste it inside
of my comment detail like so
then I'll go ahead and save the file.
OK so that's it.
We just extracted a touch of CSX out to a separate components but we're not quite done just yet.
So last thing we do is now make sure that this new component is configurable by using reacts props system
to react prop's system is a very important system for us to understand.
And this is a system in a topic that we're going to spend a pretty good amount of time on before we
talk about exactly what prop's are.
I want you to take a look at the GSX that we just put into our comment detail component at present it
has a hardcoded author a hard code at a time and a hard coded comment content inside of your as well.
Chances are not every single comment that we want to show inside of our application is going to have
an identical author.
Time and content assigned to it.
So anytime that we now try to show this comment detail on the screen as a component we probably are
going to want to be able to customize it when we create that component.
And that's what this entire prop's system is all about.
It allows us to configure exactly how a component behaves or the content that it shows.
Now let's take a quick pause right here when we come back the next section will start to expand on this
Propp system a little bit more.