1 00:00:00,520 --> 00:00:04,930 React 16 supports new return types that let you render less DOM nodes. 2 00:00:04,930 --> 00:00:05,590 For example, 3 00:00:05,590 --> 00:00:11,070 React no longer requires that a render method returns a single React element. 4 00:00:11,070 --> 00:00:15,630 You're able to render multiple sibling elements without a wrapping element, 5 00:00:15,630 --> 00:00:17,070 by returning an array. 6 00:00:17,070 --> 00:00:24,102 In my project, I'll create a file named JSTeachers.js. 7 00:00:24,102 --> 00:00:28,238 Here I'll import React from react and 8 00:00:28,238 --> 00:00:35,229 I'll create the JSTeachers component with const JSTeachers. 9 00:00:41,638 --> 00:00:45,995 Then export it with export default JSTeachers. 10 00:00:47,370 --> 00:00:50,670 This component will return an array of list items. 11 00:00:50,670 --> 00:00:55,040 So let's add return, followed by an array, and 12 00:00:55,040 --> 00:01:00,380 inside the array I'll add three list items. 13 00:01:00,380 --> 00:01:03,976 The first one will be Treasure, 14 00:01:07,458 --> 00:01:12,202 After that I'll add a list item for Guil. 15 00:01:16,000 --> 00:01:17,718 And a list item for James. 16 00:01:20,815 --> 00:01:23,885 Now since the function is returning an array, 17 00:01:23,885 --> 00:01:27,583 you should give each item in the array a unique key prop, 18 00:01:27,583 --> 00:01:32,422 otherwise React will display a console warning about key props. 19 00:01:32,422 --> 00:01:36,066 So I'll give the first list item a key of 1, 20 00:01:38,350 --> 00:01:42,220 The second one a key 2, and the third the key 3. 21 00:01:44,880 --> 00:01:49,630 So, now I can render the list items returned by JSTeachers 22 00:01:49,630 --> 00:01:53,510 inside another component alongside other list items. 23 00:01:53,510 --> 00:01:58,170 So, for example inside Teachers.js, 24 00:01:58,170 --> 00:02:03,985 I'll import JSTeachers with import JSTeachers 25 00:02:03,985 --> 00:02:07,850 from JSTeachers. 26 00:02:07,850 --> 00:02:13,320 Then in the return if I include the JSTeachers component 27 00:02:13,320 --> 00:02:18,380 anywhere inside the UL, React merges them inside the same list. 28 00:02:19,740 --> 00:02:24,724 So if you have a look at the output you'll see that the resulting DOM is a UL 29 00:02:24,724 --> 00:02:26,705 with all the teacher names. 30 00:02:33,650 --> 00:02:38,640 And just like any functional component created with an arrow function, 31 00:02:38,640 --> 00:02:42,746 you can simplify the function by using an implicit return. 32 00:02:53,403 --> 00:02:57,694 Now let's look at another example of how React can return multiple sibling 33 00:02:57,694 --> 00:02:59,950 components via an array. 34 00:02:59,950 --> 00:03:06,179 In app.js I'll change the component return statement to an array. 35 00:03:09,350 --> 00:03:12,509 I'll delete the parent App div. 36 00:03:15,550 --> 00:03:21,044 Then return the Header with the key head. 37 00:03:25,350 --> 00:03:29,022 The Teachers component with the key teach. 38 00:03:31,770 --> 00:03:36,394 And the Footer component with the key foot. 39 00:03:39,310 --> 00:03:41,075 And since we're returning an array, 40 00:03:41,075 --> 00:03:43,404 make sure you add a comma between the components. 41 00:03:45,580 --> 00:03:51,070 Again notice how the array lets us return more than a single component. 42 00:03:51,070 --> 00:03:53,490 No need to wrap them in a parent element. 43 00:03:54,570 --> 00:03:59,480 The other new return types React 16 supports are strings and numbers. 44 00:03:59,480 --> 00:04:02,523 In the Header component, for example, 45 00:04:02,523 --> 00:04:07,993 I can return a string without having to wrap it in a paragraph span or div. 46 00:04:16,060 --> 00:04:22,572 Or it's valid to return just a number, for instance, 2017 in the Footer. 47 00:04:25,465 --> 00:04:31,297 And since I'm just returning a string and a number from the functions, I'm not using 48 00:04:31,297 --> 00:04:37,302 any JSX, I don't even need to import react in the Header.js and the Footer.js files. 49 00:04:40,735 --> 00:04:45,540 The components will still render, so as you can see, eliminating divs or 50 00:04:45,540 --> 00:04:49,727 any extra element added just to wrap your React component tree or 51 00:04:49,727 --> 00:04:54,240 returned content leads to overall cleaner and smaller components.