1
00:00:00,000 --> 00:00:05,020
[MUSIC]

2
00:00:05,020 --> 00:00:08,370
Facebook recently announced
the release of React 16,

3
00:00:08,370 --> 00:00:11,490
a complete rewrite of the React library.

4
00:00:11,490 --> 00:00:16,075
The new core architecture, code-named
Fiber, keeps most of the API intact and

5
00:00:16,075 --> 00:00:20,395
backward compatible, so you can update
existing apps without running into issues.

6
00:00:20,395 --> 00:00:24,005
Fiber introduces lots of new
highly anticipated features and

7
00:00:24,005 --> 00:00:25,885
improvements to React.

8
00:00:25,885 --> 00:00:28,965
I'm Gill, a developer and
teacher here at Treehouse.

9
00:00:28,965 --> 00:00:33,240
In this workshop I'll get you up to
speed with what's new in React 16.

10
00:00:33,240 --> 00:00:36,930
You'll learn new features that let you
catch and handle JavaScript errors and

11
00:00:36,930 --> 00:00:41,470
React components, render elements
into different locations in the DOM

12
00:00:41,470 --> 00:00:44,650
outside of the main
component tree with portals.

13
00:00:44,650 --> 00:00:49,015
Return multiple elements without having to
wrap them in a parent element using new

14
00:00:49,015 --> 00:00:52,064
render return types like arrays,
strings and numbers.

15
00:00:52,064 --> 00:00:56,867
Also return null from set state to
prevent unnecessary state updates

16
00:00:56,867 --> 00:00:58,698
an re-renders and more.

17
00:00:58,698 --> 00:01:02,010
Before we start I'm going to assume
you know the basics of React.

18
00:01:02,010 --> 00:01:05,890
So if you're not familiar with how React
works be sure to check the teacher's notes

19
00:01:05,890 --> 00:01:09,170
for links to a Treehouse courses and
workshops that will teach you React.

20
00:01:10,910 --> 00:01:13,690
You can start using React 16 today.

21
00:01:13,690 --> 00:01:18,070
When you install React in a project or
create a new app with the create React app

22
00:01:18,070 --> 00:01:23,630
tool, it will automatically install
the latest version of React and React DOM.

23
00:01:23,630 --> 00:01:27,520
As I mentioned earlier,
React 16 is the backwards compatible.

24
00:01:27,520 --> 00:01:30,580
So if you're currently running your
apps on a previous version of React

25
00:01:30,580 --> 00:01:32,240
without any console errors or

26
00:01:32,240 --> 00:01:36,270
deprecation warnings, updating to
React 16 will not break your apps.

27
00:01:36,270 --> 00:01:38,610
It should be a seamless transition.

28
00:01:38,610 --> 00:01:42,370
Now with the ground up rewrite comes
a few minor breaking changes, but

29
00:01:42,370 --> 00:01:46,770
React engineers assure us that the changes
only affect uncommon use cases.

30
00:01:46,770 --> 00:01:49,350
And they don't expect
them to break most apps.

31
00:01:49,350 --> 00:01:53,670
You can view all the breaking changes in
the link I posted in the teacher's notes.

32
00:01:53,670 --> 00:01:58,320
A welcome change is that React is
now available under the MIT license.

33
00:01:58,320 --> 00:02:03,110
The uncertainties created by Facebook's
previous BSD+Patent's open source

34
00:02:03,110 --> 00:02:07,670
license was a concern to many developers,
startups and companies using React.

35
00:02:07,670 --> 00:02:10,220
So now React licensing is more flexible.

36
00:02:10,220 --> 00:02:13,720
You can use React in your project without
having to worry about the previous

37
00:02:13,720 --> 00:02:14,870
patent's clause.

38
00:02:14,870 --> 00:02:19,247
Now if you are not able to upgrade
immediately to version 16,

39
00:02:19,247 --> 00:02:22,975
React 15.6.2,
was also published under MIT.

40
00:02:22,975 --> 00:02:27,331
And remember, the React 16 update does
not mean that what you've learned so

41
00:02:27,331 --> 00:02:29,990
far about React is immediately obsolete.

42
00:02:29,990 --> 00:02:34,040
The API itself hasn't changed, and most
of the skills you've learned are still

43
00:02:34,040 --> 00:02:37,250
important, fundamental skills
you'll continue to use.

44
00:02:37,250 --> 00:02:40,330
So if you ready to get started,
in the next video you'll learn a new

45
00:02:40,330 --> 00:02:43,220
component life cycle method and
error handling features

46
00:02:43,220 --> 00:02:46,520
that lets you catch in manage errors
when rendering React components.