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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up