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

Refactoring is a big part of the software development process, and 

React's component system helps us with this task

, and we can change their implementation as we wish (as long as we don't change the 

Take this example which renders a table that shows a list of people in rooms:

function ViewBefore(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>Room</th>
          <th>People</th>
        </tr>
      </thead>
      <tbody>
        {props.rooms.map(function(room, k) {
          return (
            <tr key={k}>
              <td>{room.name}</td>
              <td>{room.people}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

# Lesson 12 - Refactoring Components

Refactoring is a big part of the software development process, and **React's component system helps us with this task**.

Most of the time, **one component maps to one file**, and we can change their implementation as we wish (as long as we don't change the `props` interface).

## Changing Implementations

Take this example which renders a table that shows a list of people in rooms:

```javascript { actualFilename=code/react-from-zero/12-component-refactor.html endLine=49 startLine=20 statedFilename=react-from-zero/12-component-refactor.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/react-from-zero/12-component-refactor.html#L20 }
function ViewBefore(props) {
  return (
    <table>
      <thead>
        <tr>
          <th>Room</th>
          <th>People</th>
        </tr>
      </thead>
      <tbody>
        {props.rooms.map(function(room, k) {
          return (
            <tr key={k}>
              <td>{room.name}</td>
              <td>{room.people}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Kay Plößer