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

, which make up the main selling point of React.

Functional components are sometimes also called 

 because they can't have their own state.

var data = "world";
var reactElement = (
  <div>
    <h1>Hello</h1>
    <h2>{data}</h2>
  </div>
);

 somewhere to render the example, but the 

 within the JSX of another element, we would have to wrap the variable 

 in curly braces (we'll remove this restriction below).

# Lesson 4 - Components

Now that we know the ins and outs of _elements_, we can move to **components**, which make up the main selling point of React.

Components allow encapsulating **elements** and **behavior** for _reuse_ in our application.

## Functional Components

The most basic version is a **functional component**. They are simply a function with `UpperCase` name.

T> Functional components are sometimes also called **stateless components** because they can't have their own state.

Let us take a simple example with some `data` and nested elements:

```javascript { actualFilename=code/react-from-zero/04-components.html endLine=23 startLine=17 statedFilename=react-from-zero/04-components.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/react-from-zero/04-components.html#L17 }
var data = "world";
var reactElement = (
  <div>
    <h1>Hello</h1>
    <h2>{data}</h2>
  </div>
);
```

![Nested Elements](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/04-components/component.png)

We could now use `reactElement` somewhere to render the example, but the `data` it uses isn't encapsulated **and** if we wanted to use `reactElement` within the JSX of another element, we would have to wrap the variable `reactElement` in curly braces (we'll remove this restriction below).