Bummer! You have been redirected as the page you requested could not be found.

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 Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library

Understanding State Recap

3:38 with Laura Coronel

Let’s go over the key concepts you learned in this stage.

    Related Discussions

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

    Sign up

    In this stage, we covered some essential concepts of React. 0:00
    Let's take a moment to recap what we learned so far. 0:04
    We started by exploring the concept of state in React. 0:08
    State is the heart of every React application, 0:12
    representing the data that changes over time. 0:15
    I introduced you to your very first hook, the useState hook, 0:18
    which helps us create and maintain the state. 0:23
    Remember, there is one main rule to using hooks. 0:26
    They can only be called at the top level of your components. 0:30
    Next, we explored event handling in React. 0:35
    Events are an integral part of creating interactive applications, 0:39
    and I showed you how to handle them effectively. 0:43
    We created the incrementQuantity event handler to perform some action 0:47
    when a user clicks the increment button. 0:52
    This event handler alone does nothing without tying it to an event. 0:55
    So we pass the increment button the onClick event, so 0:59
    that each time the button is clicked, the increment quantity event handler will run. 1:03
    Once we understood event handling, 1:09
    we learn how to update state based on those events. 1:12
    With the event handlers created, 1:15
    we used useState set function to modify the state with ease. 1:18
    And remember, if you're ever updating state based on the previous state, 1:23
    be sure to pass the set function a callback function. 1:27
    This ensures that React updates state in a more reliable way. 1:31
    As our understanding of state grew, 1:36
    we also explored the difference between application state and component state. 1:38
    The quantity state in our Counter component is considered to be a component 1:44
    state, because it's not visible or shared outside of the component. 1:49
    On the other hand, the item state in our App component is an application state. 1:54
    The item state is visible to multiple components. 2:00
    We even allowed our item component to be able to remove items from 2:03
    state by passing it the handleRemoveItem event handler as a prop. 2:08
    In this course, we built the basic functionality of the grocery list. 2:14
    For now, we're able to add items manually in the initial app state. 2:19
    We can remove items, modify the quantity, and 2:23
    see the total number of items in our list. 2:27
    You have the foundational knowledge to begin building and contributing to all 2:30
    sorts of React applications, but there's a whole lot more to learn about in React. 2:35
    In the follow-up course, you'll be introduced to new key concepts and 2:40
    features of React and best practices for building and working with components. 2:45
    Once you've completed that course, I encourage you to revisit your 2:50
    Grocery List app and apply your newfound skills by adding your own cool features. 2:54
    Perhaps you can add an input field that allows you to add more items directly 3:00
    within the browser, making it more user friendly, or 3:05
    add an edit button to conveniently correct any misspelled item names. 3:08
    The possibilities are endless. 3:13
    You will find a link to that course along with other helpful React courses and 3:15
    workshops in the teacher's notes with this video. 3:20
    And there's one more thing. 3:24
    We're here for you. 3:26
    Have questions about anything we covered? 3:27
    Reach out to the Treehouse staff or 3:30
    connect with fellow learners in the community. 3:32
    Thanks everyone, and happy coding. 3:35

    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