Refactor App Components: Solution

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