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

In order for React to render an object into the DOM, we need to describe 

Our approach here is going to be a little different than what you've seen in other tutorials: instead of showing you how to use React as a black box, we're going to start at the bottom and work our way up.

 React and connect it to "everyday" JavaScript. To that end, we'll start by creating a 

 which React can use to render an element on our screen.

First I want to show you a simple element object, it only uses the parts that are required by React.

A simple paragraph element implemented as React element would look like this:

  var anotherElement = {
    $$typeof: magicValue,
    ref: null,
    type: "p",
    props: {
      children: "A nice text paragraph."
    }
  };

# Lesson 0 - Object Elements

In order for React to render an object into the DOM, we need to describe _what_ we need to be rendered.

Our approach here is going to be a little different than what you've seen in other tutorials: instead of showing you how to use React as a black box, we're going to start at the bottom and work our way up.

We're trying to _demystify_ React and connect it to "everyday" JavaScript. To that end, we'll start by creating a **basic JavaScript object** that represents an _element_ which React can use to render an element on our screen.



## A Simple Element

First I want to show you a simple element object, it only uses the parts that are required by React.

A simple paragraph element implemented as React element would look like this:

```javascript { actualFilename=code/react-from-zero/00-object-elements.html endLine=68 startLine=61 statedFilename=react-from-zero/00-object-elements.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/react-from-zero/00-object-elements.html#L61 }
  var anotherElement = {
    $$typeof: magicValue,
    ref: null,
    type: "p",
    props: {
      children: "A nice text paragraph."
    }
  };
```