"From Bootstrap to WordPress" was retired on November 30, 2017. You are now viewing the recommended replacement.

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