React in Action
Mark Tielens Thomas
  • May 2018
  • ISBN 9781617293856
  • 360 pages
  • printed in black & white

Read this. Work with React. Never look back.

Michal Paszkiewicz, Transport for London

React in Action introduces front-end developers to the React framework and related tools. This clearly written, example-rich book begins by introducing you to React, diving into some of the fundamental ideas in React, and working with components. In the second section, you'll explore the different ways that data works in React as well as learning more about components. You'll also find several useful appendixes covering related topics like React tooling and the React ecosystem.

Table of Contents detailed table of contents

Part 1: Meet React

1. Meet React

1.1. Meet React

1.1.1. Who this book is for

1.1.2. A note on tooling

1.1.3. Who uses React?

1.2. What does React not do?

1.2.1. Tradeoffs of React

1.3. The Virtual DOM

1.3.1. The DOM

1.3.2. The virtual DOM

1.3.3. Updates & diffing

1.3.4. Virtual DOM: need for speed?

1.4. Components: The fundamental unit of React

1.4.1. Components in General

1.4.2. Components in React: encapsulated and reusable

1.5. React for Teams

1.6. Summary

2. <Hello World />: our first component

2.1. Introducing React components

2.1.1. Understanding the application data

2.1.2. Multiple Components: composition & parent-child relationships

2.1.3. Establishing component relationships

2.2. Creating components in React

2.2.1. Creating React Elements

2.2.2. Rendering Our First Component

2.2.3. Creating React components

2.2.4. Creating React Classes

2.2.5. The Render Method

2.2.6. Property validation via PropTypes

2.3. The life and times of a component

2.3.1. A React state of mind

2.3.2. Setting initial state

2.4. Meet JSX

2.4.1. Creating Components Using JSX

2.4.2. Benefits of JSX & Differences from HTML

2.5. Summary

Part 2: Components & Data in React

3. Data and data flow in React

3.1. Introducing state

3.1.1. What is state?

3.1.2. Mutable and immutable state

3.2. State in React

3.2.1. Mutable state in React: component state

3.2.2. Immutable state in React: props

3.2.3. Working with Props: PropTypes and default props

3.2.4. Stateless functional components

3.3. Component Communication

3.4. One-way data flow

3.5. Summary

4. Rendering & lifecycle methods in React

4.1. Getting set up with the Letters Social repo

4.1.1. Getting the source code

4.1.2. Which version of node should I use?

4.1.3. Note on tooling and CSS

4.1.4. Deploying

4.1.5. The API server and database

4.1.6. Running the app

4.2. The render process and lifecycle methods

4.2.1. Introducing lifecycle methods

4.2.2. Types of lifecycle methods

4.2.3. Initial & ?will? methods

4.2.4. Mounting components

4.2.5. Updating methods

4.2.6. Unmounting methods

4.2.7. Catching errors

4.3. Starting to create Letters Social

4.4. Summary

5. Working with forms in React

5.1. Creating posts in Letters Social

5.1.1. Data requirements

5.1.2. Component overview & hierarchy

5.2. Forms in React

5.2.1. Getting started with forms

5.2.2. Form elements & events

5.2.3. Updating state in forms

5.2.4. Controlled & uncontrolled components

5.2.5. Form validation and sanitization

5.3. Creating new posts

5.4. Summary

6. Integrating third-party libraries with React

6.1. Sending posts to the Letters Social API

6.2. Enhancing our component with maps

6.2.1. Creating the DisplayMap component using refs

6.2.2. Creating the LocationTypeAhead component

6.2.3. Updating the Create Post and adding maps to posts

6.3. Summary

7. Routing in React

7.1. What is routing?

7.1.1. Routing in modern front-end web applications

7.2. Creating a router

7.2.1. Component routing

7.2.2. Creating the <Route /> component

7.2.3. Starting to build the <Router/> component

7.2.4. Matching URL paths and parameterized routing

7.2.5. Adding routes to the Router component

7.3. Summary

8. More Routing & integrating Firebase

8.1. Using the router

8.1.1. Creating a page for a post

8.1.3. Creating a <NotFound/> component

8.2. Integrating Firebase

8.2.1. Ensuring a user is logged in

8.3. Summary

9. Testing React components

9.1. What is testing?

9.1.1. Types of testing

9.1.2. Why test?

9.2. Testing React components with Jest, Enzyme, and React-test-renderer

9.3. Writing our first tests

9.3.1. Getting started with Jest

9.3.2. Testing a stateless functional component

9.3.3. Testing the CreatePost component without Enzyme

9.3.4. Test coverage

9.4. Summary

Part 3: React Applications

10. Redux application architecture

10.1. The Flux application architecture

10.1.1. Meet Redux: a variation on Flux

10.1.2. Getting set up for Redux

10.2. Creating actions in Redux

10.2.1. Defining action types

10.2.2. Creating actions in Redux

10.2.3. Creating the Redux store and dispatching actions

10.2.4. Asynchronous actions and middleware

10.2.5. To Redux or not to Redux?

10.2.6. Testing Actions

10.2.7. Creating custom Redux middleware for crash reporting

10.3. Summary

11. More Redux & integrating Redux with React

11.1. Reducers determine how state should change

11.1.1. State shape and initial state

11.1.2. Setting up reducers to respond to incoming action

11.1.3. Combining reducers together in our store

11.1.4. Testing reducers

11.2. Bringing React & Redux together

11.2.1. Containers vs. Presentational components

11.2.2. Using <Provider /> to connect components to the Redux store

11.2.3. Binding actions to component event-handlers

11.2.4. Updating our tests

11.3. Summary

12. React on the server & integrating React Router

12.1. What is server-side rendering?

12.1.1. Digging into server-side rendering

12.2. Why render on the server?

12.3. You might not need SSR

12.4. Rendering Components on the server

12.5. Switching to React Router

12.5.1. Setting up React router

12.6. Handling authenticated routes with React router

12.7. Server rendering with data-fetching

12.8. Summary

13. An Introduction to React Native

13.1. Introducing React Native

13.2. React and React Native

13.3. When to use React Native

13.4. The simplest ?Hello World!?

13.5. Where to go next

13.6. Summary

13.7. Chapter 1

13.7.1. Exercise 1.1

13.8. Chapter 2

13.8.1. Exercise 2.1

13.8.2. Exercise 2.2

13.8.3. Exercise 2.3

13.8.4. Exercise 2.4

About the Technology

Facebook created React to help deliver amazing user experiences on a website with thousands of components and an incomprehensible amount of traffic. The same powerful tools are available to you too! The key is a clever design for managing state, data flow, and rendering, so your application is easy to think about and runs smoothly. Add an incredibly rich ecosystem of components and libraries, and you’ve got a recipe for building web apps that will delight both developers and users.

About the book

React in Action teaches you to think like a pro about user interfaces and building them with React. This practical book gets you up and running quickly with hands-on examples in every chapter. You’ll master core topics like rendering, lifecycle methods, JSX, data flow, forms, routing, integrating with third-party libraries, and testing. And the included application design ideas will help make your apps pop. As you learn to integrate React into full-stack applications, you’ll explore state management with Redux and server-side rendering, and even dabble in React Native for mobile UIs.

What's inside

  • React from the ground up
  • Implementing a routing system with components
  • Server-side rendering in Node.js
  • Working with third-party libraries
  • Testing React components

About the reader

Written for developers familiar with HTML, CSS, and JavaScript.

About the author

Mark Thomas is an experienced software engineer who works daily with React, JavaScript, and Node.js. He loves clean code, beautiful systems, and good coffee.


FREE domestic shipping on three or more pBooks

One stop—for concepts as well as for real-world examples and integrations.

Phaneendra Bommareddy, Openlogix

A must-have for anyone wanting to create applications using React and Redux!

Andrew Courter, Pivotal

Easy to follow, clearly demonstrates all necessary steps, includes plenty of code examples, and never leaves you in the dark.

Olivier Ducatteeuw, University of Leuven