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

 work, we can finally write our first app.

. It has interactions, asynchronous events and works with the dependencies we already know.

Here's what our app will like in the end:

We need to create three components for this app.

The HTML structure of our app looks like this:

<div
  style="display: flex; flex-direction: column; align-items: center;">
  <h1>Pomodoro Timer</h1>
  <button>Start timer</button>
  <h2>No Timer Running.</h2>
</div>

In the different states of our app, only the styles and text of the elements will change. Let's go through the components "bottom-up".

 component, because it's the simplest of all. Next, the 

 component, because it's more complex than the 

 component and needed by the last one we'll implement: the 

 component is the simplest component in this app: it displays text and a button. It doesn't even have to handle the button click event itself so it can be a 

var Idle = function(props) {
  return (
    <React.Fragment>
      <button onClick={props.onStart}>Start timer</button>
      <h2>No Timer Running.</h2>
    </React.Fragment>
  );
};

 component, so they are rendered without any wrapping element into the DOM later.

The most interesting component. It handles the actual timer count-down, so it has to be a 

Let's build it up method by method. We'll start by creating the 

# Lesson 10 - Example App

Now that we know how **class components** work, we can finally write our first app.

Our first app is a _Pomodoro timer_. It has interactions, asynchronous events and works with the dependencies we already know.

## Pomodoro Timer

A [Pomodoro timer](https://en.wikipedia.org/wiki/Pomodoro_Technique) helps divide time into chunks.

There are two types of time-chunks:

1.  Work time, which has a duration of 25 minutes
2.  Pause time, which has a duration of 5 minutes

The use-case is as follows:

-   The user starts the timer; then they work for 25 minutes
-   The timer switches automatically to pause and the user has to pause for 5 minutes
-   The timer switches back to work and the whole cycle restarts
-   The user can stop the timer at any time

Here's what our app will like in the end:

![The Pomodoro App](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/10-example-app/timer-app.png)

## Implementation

We need to create three components for this app.

-   `PomodoroApp` - The root component of our app
-   `Timer` - The component that counts down for a specific duration
-   `Idle` - The component that is displayed when the timer isn't running

The HTML structure of our app looks like this:

```html
<div
  style="display: flex; flex-direction: column; align-items: center;">
  <h1>Pomodoro Timer</h1>
  <button>Start timer</button>
  <h2>No Timer Running.</h2>
</div>
```

In the different states of our app, only the styles and text of the elements will change. Let's go through the components "bottom-up".

First, the `Idle` component, because it's the simplest of all. Next, the `Timer` component, because it's more complex than the `Idle` component and needed by the last one we'll implement: the `PomodoroApp` component.

### The `Idle` Component

The `Idle` component is the simplest component in this app: it displays text and a button. It doesn't even have to handle the button click event itself so it can be a **functional component**.

```javascript { actualFilename=code/example-app/idle-component.html endLine=20 startLine=13 statedFilename=example-app/idle-component.html url=https&#x3A;//gitlab.com/fullstackio/books/react-from-zero-book/react-from-zero/code/example-app/idle-component.html#L13 }
var Idle = function(props) {
  return (
    <React.Fragment>
      <button onClick={props.onStart}>Start timer</button>
      <h2>No Timer Running.</h2>
    </React.Fragment>
  );
};
```

We pass the `onClick` event to the `onStart` prop and wrap the two elements into a `React.Fragment` component, so they are rendered without any wrapping element into the DOM later.

The `<Idle>` component looks like this:

![The Idle Component](https://d2uusema5elisf.cloudfront.net/books/react-from-zero/images/10-example-app/idle.png)

### The `Timer` Component

The most interesting component. It handles the actual timer count-down, so it has to be a **class component**.

Let's build it up method by method. We'll start by creating the `Timer` component with just a `render()` method.