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 the previous chapter, we explained how you define React elements with plain JavaScript objects. There isn't much to them, but they are a bit cumbersome to work with, primarily because many of the required keys are often empty or always have the same values.

In this short chapter, we'll learn about a way to get rid of this boilerplate code.

React provides you with a helper function called 

 attributes to your element definitions every time you call it.

In the previous lesson, this was how we created an element manually:

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

# Lesson 1 - Element Factory

In the previous chapter, we explained how you define React elements with plain JavaScript objects. There isn't much to them, but they are a bit cumbersome to work with, primarily because many of the required keys are often empty or always have the same values.

In this short chapter, we'll learn about a way to get rid of this boilerplate code.

React provides you with a helper function called `React.createElement()`. It adds `$$type` and `ref` attributes to your element definitions every time you call it.

## A Simple Element

In the previous lesson, this was how we created an element manually:

```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."
    }
  };
```