Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In the last video, I challenged you to refactor the RSVP app into smaller components. This video covers one solution to the challenge.
In the last video I challenged you to
refactor the app into smaller components.
0:00
How'd it go?
0:04
This task might have taken some time and
thought to accomplish.
0:05
The MainContent component especially
had a lot of properties to accept and
0:09
pass to it's children.
0:13
I designed this task to give you
some practice with components and
0:14
get you comfortable passing
data around in a React app.
0:17
Each of these
0:20
two components
0:25
are serving to
0:30
organize the app
0:35
into sections.
0:41
So because they're just passing the props
down the children I didn't rename any
0:46
of the props.
0:51
Next, let's look at the Header
component and Header.js.
0:51
Here I imported
a GuestInputForm component,
0:55
which renders the form below.
0:59
I'm passing the props right
through to the GuestInputForm and
1:02
validating them at the bottom
with propType declarations.
1:06
If I open the GuestInputForm
component in GuestInputForm.js,
1:09
you can see the props are going
to the elements that use them.
1:14
And they're validated by
declaring them with propTypes.
1:18
Next, let's open the MainContent
component here in MainContent.js.
1:21
And you can see that I'm
importing these three components,
1:26
ConfirmedFilter, GuestList and
Counter, at the top.
1:30
And validating with propTypes, as usual.
1:34
Finally, I'll show you what I have for
1:36
the ConfirmedFilter component
in ConfirmedFilter.js.
1:39
And this follows the same pattern
the other components to do.
1:45
I'll just let you compare
it to what you have.
1:48
So go ahead and
pause the video if that helps.
1:50
I want to point out that we now
have a lot of components in the src
1:52
directory at this point.
1:56
Now, it's just a matter of style,
1:58
but you could just put them into
folders to organize them a little.
2:00
So let's create two folders,
a Header folder and a MainContent folder.
2:03
I'll put the Header and GuestInputForm
components inside the Header folder
2:15
Then I'll put the MainContent
component and
2:26
all its children inside
the MainContent folder.
2:30
So ConfirmedFilter, Counter, Guest,
2:35
GuestList, GuestName and PendingGuest.
2:40
Because these folder names
are exactly the same as the top-level
2:45
components of each directory,
we can rename the Header and
2:51
MainContent component files to Index and
they will be imported into the main app.
2:56
So let me show you what I mean.
3:03
I'll change Header.js to Index.js.
3:05
And I'll change
MainContent.js To Index.js.
3:12
Now let's have a look at App.js.
3:18
So, before we changed
the file structure just now,
3:24
these lines pointed to JavaScript files
named Header.js and MainContent.js.
3:28
Now, those files don't exist, but
the folders with the same names do.
3:33
So when the interpreter looks into
the folders, it will look for
3:38
a file called index.js by default,
and load it.
3:42
So, we don't need to change
the code at all here.
3:45
If you look at the browser now,
you'll see some errors saying the index
3:49
components we just
organized can't be found.
3:53
So, to fix this, I just need to stop
the development server, and restart.
3:56
And in the browser, you can see
that the app works as expected.
4:02
Now, I'll let you try one on your own.
4:05
Looking over the MainContent folder,
there are still a number of files here.
4:07
So pause the video if you'd like to and
create a GuestList folder replicating
4:12
the same pattern we did with
the Header and MainContent components.
4:17
All right, so
inside the MainContent folder,
4:22
I'll create a new folder named GuestList.
4:27
Then I'll move the Guest,
GuestName, GuestList and
4:31
PendingGuest components
inside this new folder.
4:37
I'll rename GuestList.js, Index.js.
4:42
Go over to my terminal,
stop and restart the server.
4:48
And it works.
4:55
Now we have our components
organized into a few folders, and
4:57
the app structure is
a little easier to navigate.
5:01
So there's still one bug
in our application, and
5:04
it has to do with the indexes we're
using to handle guest events.
5:07
See if you can spot it.
5:12
In the next video, we'll fix it.
5:13
You need to sign up for Treehouse in order to download course files.
Sign up