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

Nesting Components

3:12 with Laura Coronel

In this video, I'll teach you how to nest components. Nesting components is a core principle in React. You'll usually have parent components with one or many child components. This gives the parent component the ability to control how its child components are rendered.

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

    How did it go? 0:00
    In the previous video, I presented you with a challenge to create a Counter 0:01
    component by using the quantity code inside the item component. 0:06
    Now I'll share with you my solution, 0:11
    let's begin by creating a new function called Counter. 0:14
    Inside this function, include the return keyword, 0:19
    followed by a set of parentheses to enclose the JSX. 0:23
    Next, let's cut the div with the className quantity from the Item component and 0:27
    paste it inside the parentheses of our new Counter function. 0:33
    Now that we have completed the Counter component, 0:40
    we need a way to display it inside the Item component. 0:43
    React components can make use of or refer to other React components. 0:48
    For example, you can render the Counter component within the Item component 0:53
    just by using the Counter tag inside Item's return statement. 0:59
    When a component contains another component like this, it's called nesting. 1:04
    Nesting component is a fundamental concept in React, where parent components, 1:09
    such as Item, can have one or multiple child components. 1:16
    This allows the parent component to control how its child 1:21
    components are rendered. 1:25
    You'll learn a whole lot more about that in the next stage. 1:27
    Typically, React applications have a single top-level component that 1:31
    wraps the entire application and combines all the main components together. 1:36
    Let's create a new component called App to fulfill this purpose. 1:42
    The App component will return a div with a className grocery-list. 1:49
    Within this div, we'll render our Header component using a self-closing Header tag. 1:55
    To display the list of items, we'll first add a JSX comment 2:02
    to indicate the beginning of our grocery list. 2:07
    Then we'll render one item component for now by utilizing the Item tag. 2:11
    Normally, root.render is responsible for 2:18
    rendering your top-level component into the DOM. 2:21
    So let's pass our App component to root.render by using its JSX tag. 2:25
    Let's save the file, and over in the browser we can see that our entire 2:32
    application is now mounted in the DOM. 2:36
    When it comes to dividing your components in a React application, 2:39
    there are no strict rules. 2:43
    Similar to writing any other code, how and when to break it down into 2:45
    components can vary based on personal or team preferences. 2:50
    Having a few large and unwieldy components has its pros and 2:54
    cons, just like having too many small components does. 2:59
    The key is to strike a balance. 3:03
    Remember, you can always restructure your code as you progress if you feel like it's 3:06
    not divided well. 3:11

    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