How This Book Is Structured

What's the point of React?

Lesson 0 - Object Elements

Lesson 1 - Element Factory

Lesson 2 - JSX

Lesson 3 - Nested Elements

Lesson 4 - Components

Lesson 5 - Props

Lesson 6 - Prop Types

Lesson 7 - Nested Components

Lesson 8 - Class Components

Lesson 9 - Lifecycle Methods

Lesson 10 - Example App

Lesson 11 - More Lifecycle Methods

Lesson 12 - Refactoring Components

Lesson 14 - Refs

Lesson 15 - Simple Integration

Lesson 16 - Advanced Integration

Lesson 18 - ES215

Virtual DOM Primer

Changelog

A gentle introduction to React, using the JavaScript you already know

React from Zero

ECMAScript is the name of the specification of JavaScript. When new language features are added to JavaScript, they usually come from proposals to this specification.

In June 2015 the 6th version of ECMAScript was released, called ECMAScript 2015 or short ES2015.

When the 6th version was released, it was the most significant change to the language ever. It added new syntax for:

Since React wanted to be future proof and these changes were effectively standardized and soon to be readily available in all major browsers, the React team decided to incorporate them into the React code-base and emphasize their use in their docs.

While I think this is the right approach, this led to a few problems for people who wanted to start with React -- especially when they only know the previous versions of JavaScript.

People now had to learn React, JSX, and the new ES2015 concepts, not to speak of the whole tooling used to build and ship a React application. This often leads to students being overwhelmed or thinking some new language features are required or even part of React.

 we've tried to teach React and JSX concepts 

. While this should bring people a solid understanding of how React works, 

Because the default way to use React is with ES2015, production code-bases can confuse people who learned React without ES2015.

So in this lesson, I show you how the ES5 examples you learned can be mapped to the ES2015 code you will encounter at work.

Let's start with the basics. There are two new ways to declare variables: 

# Lesson 18 - ES215

ECMAScript is the name of the specification of JavaScript. When new language features are added to JavaScript, they usually come from proposals to this specification.

In June 2015 the 6th version of ECMAScript was released, called ECMAScript 2015 or short ES2015.

When the 6th version was released, it was the most significant change to the language ever. It added new syntax for:

-   classes
-   functions
-   block scoped and immutable variable declarations
-   promises
-   and much more.

Since React wanted to be future proof and these changes were effectively standardized and soon to be readily available in all major browsers, the React team decided to incorporate them into the React code-base and emphasize their use in their docs.

While I think this is the right approach, this led to a few problems for people who wanted to start with React -- especially when they only know the previous versions of JavaScript.

People now had to learn React, JSX, and the new ES2015 concepts, not to speak of the whole tooling used to build and ship a React application. This often leads to students being overwhelmed or thinking some new language features are required or even part of React.

In **React From Zero** we've tried to teach React and JSX concepts **without needing to learn ES2015**. While this should bring people a solid understanding of how React works, **it does bring other problems**.

Because the default way to use React is with ES2015, production code-bases can confuse people who learned React without ES2015.

So in this lesson, I show you how the ES5 examples you learned can be mapped to the ES2015 code you will encounter at work.

## Block Scope Variables

Let's start with the basics. There are two new ways to declare variables: `let` and `const`.