Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React by Example

Well done!

You have completed React by Example!

Sign up for Treehouse Back to Library

Refactor App Components

1:37 with Guil Hernandez and Joel Kraft

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.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up