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

Now that we've learned what we can do with 

Functional components are fine for a large part of our application, but somewhere we have to store state.

Remember, functional components only have their 

 have to come from the parent. If we think this chain of 

 passed down to the end, we notice that there has to be a place where the first 

To create a stateful component, we have to create a 

, because they can have their own state, but not all class components have state, so this name is missleading.

For example, say we wanted to create a component which keeps track of a counter and we click on a button to increment that counter. Look at this component:

function Counter(props) {
  return (
    <div>
      <span>{props.count}</span>
      <button onClick={props.onClick}>+ 1</button>
    </div>
  );
}

 prop to pass data up. But parent has to handle the click 

. There is no way to store the value of the counter (the 

 as functional component, we can create the 

 handler that increments this variable; and then pass them into the 

 component, but we would have no way to tell React that we need to re-render these two components.

# Lesson 8 - Class Components

Now that we've learned what we can do with **functional components**, it is time to add _state_!

Functional components are fine for a large part of our application, but somewhere we have to store state.

Remember, functional components only have their `props` to control their behavior and these `props` have to come from the parent. If we think this chain of `props` passed down to the end, we notice that there has to be a place where the first `props` are created somehow.

## Class Components

To create a stateful component, we have to create a **class** instead of a simple **function**.

T> Class Components are also called **stateful components**, because they can have their own state, but not all class components have state, so this name is missleading.

For example, say we wanted to create a component which keeps track of a counter and we click on a button to increment that counter. Look at this component:

```javascript
function Counter(props) {
  return (
    <div>
      <span>{props.count}</span>
      <button onClick={props.onClick}>+ 1</button>
    </div>
  );
}
```

![Counter Component](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/08-component-classes/counter-component.png)

Above, we display the `count` prop and use the `onClick` prop to pass data up. But parent has to handle the click **and** pass a updated `count` down to the `Counter`. There is no way to store the value of the counter (the _state_) in this component.

If we  define `Parent` as functional component, we can create the `count` variable and the `onClick` handler that increments this variable; and then pass them into the `props` of our `Counter` component, but we would have no way to tell React that we need to re-render these two components.