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.