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

Stage 3 Walk-through: What Is Props

3:10 with Laura Coronel

Join me for a sneak peek into Stage 3 of our course. In this video, I'll be walking you through what you can expect to learn in this exciting stage. We'll dive into the world of React props and learn how to iterate and render using the powerful map() method.

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
    At its simplest, React is a library for creating and updating HTML elements. 0:04
    Our application so far is not that useful. 0:11
    It consists of a static user interface. 0:14
    To make our Grocery List app more customizable and interactive, 0:17
    we need a way to adjust quantities and check off items. 0:22
    In React, we use properties, commonly referred to as props, 0:26
    to customize our components and pass dynamic information into them. 0:30
    HTML elements accept attributes that give them further meaning and 0:35
    additional behavior. 0:40
    Attributes provide extra bits of information to the browser, 0:42
    like an element's ID, class name, or an image's alt text, for example. 0:46
    Similar to how HTML elements accept attributes to provide additional 0:52
    meaning and behavior, every React component and 0:57
    element can receive a list of attributes called properties or props. 1:00
    Props play an essential role in React as they enable us to pass data into 1:06
    components. 1:11
    Most components in your UI will be configured using props. 1:12
    For example, you'll add functionality to a component, 1:17
    have it behave a certain way, and display its contents with props. 1:20
    Using props involve two main steps. 1:25
    Writing props in a component's JSX tag using an attribute syntax. 1:28
    Then the component needs to be able to take in that information and 1:35
    use it in some way. 1:40
    If you remember earlier when we viewed the object representation 1:42
    of a DOM node in the console, it had a built-in property called props. 1:46
    This props object contains the attributes passed to it, along with its children. 1:51
    Every React element and 1:57
    component has a props object containing the list of props provided to it. 1:58
    We can inspect a component's props using React DevTools. 2:04
    By opening React DevTools and selecting the App component, 2:09
    you can view the props in the right pane. 2:12
    Currently, the props for our Header component are empty, 2:16
    since we haven't passed any props to it. 2:20
    In this stage, we'll pass props to the header item and counter components. 2:23
    This will allow our total items count to be dynamic, so 2:29
    that it updates depending on how many items are on the list. 2:32
    By supplying props to the item and counter components, 2:37
    we'll learn how to reuse components and effortlessly display multiple items. 2:40
    We'll store the item data in an array and use the map method to iterate over 2:47
    the array dynamically generating multiple item components. 2:52
    This approach allows us to create dynamic lists of items, 2:57
    making our applications more flexible and scalable. 3:02
    All right, we'll get started in the next video 3:05

    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