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

Stage 2 Walk-through: What Is a Component

2:30 with Laura Coronel

A component is a piece of UI that you can reuse. Just like you're able to reuse code in JavaScript with functions, a component lets you reuse code that renders a part of your UI. Being able to split your UI code into independent, reusable pieces, and think about each piece in isolation is one of the most embraced features of React.

Resources

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
    Hey there, in the previous stage, you learned how to create React elements 0:04
    which serve as the fundamental building blocks of React applications. 0:09
    This stage is all about thinking in and understanding components, 0:13
    which are at the heart of React. 0:17
    Now you might be wondering what exactly is a component? 0:20
    Well think of a component as a reusable piece of user interface. 0:24
    Just as you can reuse code and JavaScript with functions, 0:29
    components enable you to reuse code that renders specific parts of your UI. 0:33
    Being able to split your UI code into independent reusable pieces. 0:39
    And think about each piece in isolation is one of the most embrace features of React. 0:44
    To begin, let's take a look at what we're going to build. 0:51
    In this course, we're going to begin building a grocery list application. 0:54
    This application will allow you to adjust item quantities, remove items, 1:00
    and display dynamic information, such as the total number of items on your list. 1:05
    The first step we'll take in building our grocery list app, 1:12
    is to think about the application in small, simple components. 1:15
    Using the Chrome Dev Tools inspector in the browser, 1:19
    I'll highlight the key sections of the app. 1:23
    Firstly, the header section contains the title and 1:26
    the total number of items on the list. 1:29
    Below the header, there's a list of items accompanied by buttons that 1:33
    enable you to increase or decrease the quantity of each item. 1:37
    Lastly, we have the container component that encompasses the entire app. 1:42
    Initially our app will consist of four components, a header component, 1:48
    an item component that can be reused to display each item with a counter 1:53
    component, and the container component that brings everything together. 1:58
    As you build React projects, you'll find that breaking your app into smaller 2:04
    components offers several advantages. 2:09
    It allows you to extract repeated code segments, such as items and 2:12
    quantities, into reusable components. 2:17
    Additionally, working with several small components is often more manageable 2:21
    than dealing with a single larger component. 2:26

    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