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

Remember that the Virtual DOM lets us write our code as if we overwrite our DOM nodes, while still getting good performance.

 nested to resemble the structure of a DOM.

React then takes this VDOM, runs a diff algorithm with the previous version and calculates the minimum of changes that are needed to make the DOM look like the new VDOM.

This approach allows you to focus on your data and UI and frees you from meddling with the details of DOM updates - all while getting super-fast performance.

. To that end, let's write a simple VDOM implementation.

This version will just mimic the most fundamental React function (and wont do any "diffing", a speed optimization), but 

var simpleVDom = {
  type: "p",
  props: {},
  children: ["Hello, World!"]
};

# Virtual DOM Primer

Remember that the Virtual DOM lets us write our code as if we overwrite our DOM nodes, while still getting good performance.

The **virtual DOM** (VDOM), is just a fancy name for **plain old JavaScript objects** nested to resemble the structure of a DOM.

React then takes this VDOM, runs a diff algorithm with the previous version and calculates the minimum of changes that are needed to make the DOM look like the new VDOM.

This approach allows you to focus on your data and UI and frees you from meddling with the details of DOM updates - all while getting super-fast performance.

## A simple virtual DOM implementation

The spirit of this tutorial is to **demystify the magic behind React**. To that end, let's write a simple VDOM implementation.

This version will just mimic the most fundamental React function (and wont do any "diffing", a speed optimization), but **it helps to understand what is happening** when you tell React to _render_ your app.

Lets say our VDOM looks like this:

```javascript { actualFilename=code/simple-vdom/index.html endLine=45 startLine=41 statedFilename=simple-vdom/index.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/simple-vdom/index.html#L41 }
var simpleVDom = {
  type: "p",
  props: {},
  children: ["Hello, World!"]
};
```