Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

What's New in React 16

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

New Return Types

4:54 with Guil Hernandez

React 16 no longer requires that a render method returns a single React element. You can render multiple sibling elements without a wrapping element by returning an array. This eliminates the need for an extra element just to wrap your component tree. The other new return types React 16 supports are strings and numbers.

Updates

React v16.2.0 provides a first-class <Fragment> component that can be used in place of arrays. This lets you return multiple children from a component’s render method. Read all about it in the docs.

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

    React 16 supports new return types that let you render less DOM nodes. 0:00
    For example, 0:04
    React no longer requires that a render method returns a single React element. 0:05
    You're able to render multiple sibling elements without a wrapping element, 0:11
    by returning an array. 0:15
    In my project, I'll create a file named JSTeachers.js. 0:17
    Here I'll import React from react and 0:24
    I'll create the JSTeachers component with const JSTeachers. 0:28
    Then export it with export default JSTeachers. 0:41
    This component will return an array of list items. 0:47
    So let's add return, followed by an array, and 0:50
    inside the array I'll add three list items. 0:55
    The first one will be Treasure, 1:00
    After that I'll add a list item for Guil. 1:07
    And a list item for James. 1:16
    Now since the function is returning an array, 1:20
    you should give each item in the array a unique key prop, 1:23
    otherwise React will display a console warning about key props. 1:27
    So I'll give the first list item a key of 1, 1:32
    The second one a key 2, and the third the key 3. 1:38
    So, now I can render the list items returned by JSTeachers 1:44
    inside another component alongside other list items. 1:49
    So, for example inside Teachers.js, 1:53
    I'll import JSTeachers with import JSTeachers 1:58
    from JSTeachers. 2:03
    Then in the return if I include the JSTeachers component 2:07
    anywhere inside the UL, React merges them inside the same list. 2:13
    So if you have a look at the output you'll see that the resulting DOM is a UL 2:19
    with all the teacher names. 2:24
    And just like any functional component created with an arrow function, 2:33
    you can simplify the function by using an implicit return. 2:38
    Now let's look at another example of how React can return multiple sibling 2:53
    components via an array. 2:57
    In app.js I'll change the component return statement to an array. 2:59
    I'll delete the parent App div. 3:09
    Then return the Header with the key head. 3:15
    The Teachers component with the key teach. 3:25
    And the Footer component with the key foot. 3:31
    And since we're returning an array, 3:39
    make sure you add a comma between the components. 3:41
    Again notice how the array lets us return more than a single component. 3:45
    No need to wrap them in a parent element. 3:51
    The other new return types React 16 supports are strings and numbers. 3:54
    In the Header component, for example, 3:59
    I can return a string without having to wrap it in a paragraph span or div. 4:02
    Or it's valid to return just a number, for instance, 2017 in the Footer. 4:16
    And since I'm just returning a string and a number from the functions, I'm not using 4:25
    any JSX, I don't even need to import react in the Header.js and the Footer.js files. 4:31
    The components will still render, so as you can see, eliminating divs or 4:40
    any extra element added just to wrap your React component tree or 4:45
    returned content leads to overall cleaner and smaller components. 4:49

    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