We have a fully functioning RSVP app built in React! There is still room for improvement, though. In this video, I want to challenge you to refactor the application.
[MUSIC] 0:00 We have a working app now but there are still room for improvement. 0:05 React provides us with the ability to break our app in to components. 0:08 A feature we can use to organize and simplified the app structure. 0:12 In fact, back when we're planning this app, 0:16 we planned some components that we haven't implemented yet. 0:18 So in this video, I wanna challenge you to refactor our application. 0:22 Refactoring, you may recall, 0:25 is to change the code of a program without changing its functionality. 0:28 So here are the components I want you to create, the Header, GuestInputForm, 0:33 and ConfirmedFilter components. 0:37 Once you're done, those components will fit into this overall structure. 0:39 The app will be divided into two larger components. 0:44 The header component and the main content component. 0:46 We've already broken the guest list into components. 0:50 So for this task, we'll focus only on the components you see highlighted here. 0:54 Let's look at the code to get a better idea of what you'll be working with. 0:57 Here in App.js, this header element will become a header component. 1:04 And the form inside will be the guest input form component. 1:10 Below, this div with the class of main will become the main content component. 1:14 And this label element will become the confirmed filter. 1:16 Remember, when you're breaking this components up, the data and 1:16 event handler still need to be pass down to the right page elements. 1:18 So good luck and in the next video, 1:19 I'll show you how I extracted this component's out. 1:20
You need to sign up for Treehouse in order to download course files.Sign up