Contents

About the Author

About the Technical Reviewers

Acknowledgments

Introduction

Chapter 1: Getting Started

Before You Get Started

Node.js and npm

JavaScript ES6

Defining React

React’s Benefits

Reactive Rendering is Simple

Component-Oriented Development Using Pure JavaScript

Flexible Abstraction of the Document Model

Building Your First React App

React Development Workflow

Creating Your First Component

Saving a little typing

Dynamic Values

Composing Components

Props

Presenting the Kanban Board App

Defining Component Hierarchy

The Importance of Props

Building the Components

Introducing State

Kanban App: Togglable Cards

Summary

Chapter 2: Inside the DOM Abstraction

Events in React

DOM Event Listeners

Kanban App: Managing the DOM Event

Digging Deeper in JSX

JSX vs. HTML

Differences Between JSX and HTML

JSX Quirks

Kanban App: Indicating Whether a Card Is Open or Closed

Blank Space

Comments in JSX

Rendering Dynamic HTML

Kanban App: Rendering Markdown

React Without JSX

React Elements in Plain JavaScript

Element Factories

Custom Factories

Inline Styling

Defining Inline Styles

Kanban App: Card Color via Inline Styling

Working With Forms

Controlled Components

Special Cases

Uncontrolled Components

Kanban App: Creating a Task Form

Virtual DOM Under the Hood

Keys

Kanban App: Keys

Refs

Summary

Chapter 3: Architecting Applications with Components

Prop Validation

Default Prop Values

Built-in propType Validators

Kanban App: Defining Prop Types

Custom PropType Validators

Component Composition Strategies and Best Practices

Stateful and Pure Components

Which Components Should Be Stateful?

Data Flow and Component Communication

Component Lifecycle

Lifecycle Phases and Methods

Lifecycle Functions in Practice: Data Fetching

A Brief Talk About Immutability

Immutability in Plain JavaScript

Nested Objects

React Immutability Helper

Kanban App: Adding (a Little) Complexity

Summary

Chapter 4: Sophisticated Interactions

Animation in React

CSS Transition and Animation 101

React CSSTransitionGroup

Drag and Drop

React DnD Implementation Overview

A React DnD Sample Implementation

Kanban App: Animations and Drag-and-Drop Support

Card Toggle Animation

Card Dragging

Summary

Chapter 5: Routing

Implementing Routing the “Naive” Way

React Router

Index Route

Routes with Parameters

Setting Active Links

Passing Props

Decoupling the UI from the URL

Changing Routes Programmatically

Histories

Kanban App: Routing

Summary

Chapter 6: Architecting React Applications with Flux

What Is Flux?

Stores

Actions

Dispatcher

The Unrealistic, Minimal Flux App

The Bank Account Application

Flux Utils

Flux Utils Stores

Container Component Higher Order Function

Asynchronous Flux

waitFor: Coordinating Store Update Order

Asynchronous Data Fetching

AirCheap Application

Setup: Project Organization and Basic Files

Creating the API Helper and ActionCreators for Fetching Airports

AirportStore

App Component

Finishing the AirCheap application: Loading Tickets

Evolving Your Async Data Fetching Implementation

AppDispatcher’s dispatchAsync

Kanban App: Moving to a Flux Architecture

Refactor: Creating Flux Basic Structure and Moving Files

Moving the Data Fetching to the Flux Architecture

Implementing the FetchCards Action, API Method Call, and Store Callback

Moving All Card and Task Manipulations to the Flux Architecture

Preparing for the Functionality Migration

Components

Removing All Component State

Summary

Chapter 7: Performance Tuning

How the Reconciliation Process Works

Batching

Sub-Tree Rendering

React Perf

The Performance Test Application

Installing and Using ReactPerf

shouldComponentUpdate

shallowCompare Add-on

Summary

Chapter 8: Isomorphic React Applications

Node.js and Express

Node.js and Express “Hello World”

Isomorphic React Basics

Creating the Project Structure

Rendering React Components on the Server

Mounting React on the Client

Routing

Setting Up Internal Routes

Dynamic Data Fetching

Rendering Routes

Summary

Chapter 9: Testing React Components

Jest

React Test Utilities

Rendering a Component for Testing

Transversing and Finding Children

Simulating Events

Shallow Rendering

Summary

Index