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

When I hear people complain about React, it's mainly due to 

, the non-standard syntax extension created for writing markup in JavaScript.

If you've used other frameworks like Vue or Ember, you are probably used to template languages like HTMLBars. These are languages with their own semantics and syntax embedded into JavaScript with strings.

The React team went in a different direction: 

 to create markup, but also added a JSX as 

 to the mix. So you can still use your JavaScript know-how, but also use a syntax that more closely resembles HTML.

 to run in a browser. Which is the second frequent complaint about React: people think they can't use it without an extra build step.

While this is technically true (if you're going to use JSX), there are ways to use JSX compilers like Babel, directly in the browser with a 

 down to an older version of JavaScript, so that the new features can be used in older browsers that don't implement them natively.

compiles down JSX to regular JavaScript function calls

 function we discussed in the last chapter).

# Lesson 2 - JSX

When I hear people complain about React, it's mainly due to **JSX**, the non-standard syntax extension created for writing markup in JavaScript.

If you've used other frameworks like Vue or Ember, you are probably used to template languages like HTMLBars. These are languages with their own semantics and syntax embedded into JavaScript with strings.

The React team went in a different direction: **they tried to use JavaScript directly** to create markup, but also added a JSX as **syntax extension** to the mix. So you can still use your JavaScript know-how, but also use a syntax that more closely resembles HTML.

## JSX Compilation

The drawback here is that **it needs an extra compile step** to run in a browser. Which is the second frequent complaint about React: people think they can't use it without an extra build step.

While this is technically true (if you're going to use JSX), there are ways to use JSX compilers like Babel, directly in the browser with a `<script>` tag.

T> Babel is a **JavaScript compiler**; it is used to compile _new JavaScript features_ down to an older version of JavaScript, so that the new features can be used in older browsers that don't implement them natively.
T>
T>In this case, it **compiles down JSX to regular JavaScript function calls** (using the `React.createElement()` function we discussed in the last chapter).