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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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