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