Learning React

Kirupa Chinnathambi has spent most of his life trying to teach others to love web development as much as he does. In 1999, before blogging was even a word, he started posting tutorials on kirupa.com. In the years since then, he has written hundreds of articles, penned a few books (none as good as this one, of course!), and recorded a bunch of videos you can find on YouTube. When he isn’t writing or talking about web development, he spends his waking hours helping make the web more awesome as a Program Manager at Microsoft. In his nonwaking hours, he is probably sleeping—or writing about himself in the third person. You can find him on Twitter (twitter.com/kirupa), Facebook (facebook.com/kirupa), or email (kirupa@kirupa.com). Feel free to contact him anytime.

1 Introducing React

Old-School Multipage Design

New-School Single-Page Apps

Meet React

Automatic UI State Management

Lightning-Fast DOM Manipulation

APIs to Create Truly Composable UIs

Visuals Defined Entirely in JavaScript

Just the V in an MVC Architecture

2 Building Your First React App

Dealing with JSX

Getting Your React On

Displaying Your Name

It’s All Still Familiar

Changing the Destination

Styling It Up!

3 Components in React

Quick Review of Functions

Changing How We Deal with UI

Meet the React Component

Creating a Hello, World! Component

Specifying Properties

First Part: Updating the Component Definition

Second Part: Modifying the Component Call

Dealing with Children

4 Styling in React

Displaying Some Vowels

Styling React Content Using CSS

Understand the Generated HTML

Just Style It Already!

Styling Content the React Way

Creating a Style Object

Actually Styling Our Content

Making the Background Color Customizable

5 Creating Complex Components

From Visuals to Components

Identifying the Major Visual Elements

Identifying the Components

Creating the Components

The Card Component

The Square Component

The Label Component

Passing Properties, Again!

Why Component Composability Rocks

6 Transferring Properties

Problem Overview

Detailed Look at the Problem

Meet the Spread Operator

A Better Way to Transfer Properties

7 Meet JSX...Again!

What Happens with JSX?

JSX Quirks to Remember

Evaluating Expressions

Returning Multiple Elements

You Can’t Specify CSS Inline Comments

Capitalization, HTML Elements, and Components

Your JSX Can Be Anywhere

8 Dealing with State in React

Using State

Our Starting Point

Getting Our Counter On

Setting the Initial State Value

Starting Our Timer and Setting State

Rendering the State Change

Optional: The Full Code

9 Going from Data to UI in React

The Example

Your JSX Can Be Anywhere, Part II

Dealing with Arrays

10 Events in React

Listening and Reacting to Events

Starting Point

Making the Button Click Do Something

Event Properties

Meet Synthetic Events

Doing Stuff with Event Properties

More Eventing Shenanigans

You Can’t Directly Listen to Events on Components

Listening to Regular DOM Events

The Meaning of this Inside the Event Handler

React...Why? Why?

Browser Compatibility

Improved Performance

11 The Component Lifecycle

Meet the Lifecycle Methods

See the Lifecycle Methods in Action

The Initial Rendering Phase

Getting the Default Props

Getting the Default State

componentWillMount

render

componentDidMount

The Updating Phase

Dealing with State Changes

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

Dealing with Prop Changes

The Unmounting Phase

12 Accessing DOM Elements in React

The Colorizer Example

Meet Refs

Using Portals

13 Setting Up Your React Dev Environment Easily

Meet Create React

Making Sense of What Happened

Creating Our HelloWorld App

Creating a Production Build

14 Working with External Data in React

Web Request 101

It’s React Time!

Getting Started

Getting the IP Address

Kicking the Visuals Up a Notch

15 Building an Awesome Todo List App in React

Getting Started

Creating the Initial UI

Building the Rest of the App

Adding Items

Displaying the Items

Styling our App

Removing Items

Animation! Animation! Animation!

16 Creating a Sliding Menu in React

How the Sliding Menu Works

Setting Up the Sliding Menu

Getting Started

Showing and Hiding the Menu

Creating the Button

Creating the Menu

17 Avoiding Unnecessary Renders in React

About the render Method

Optimizing render Calls

Getting an Example Going

Seeing the render Calls

Overriding a Component Update

Using PureComponent

18 Creating a Single-Page App in React Using React Router

The Example

Getting Started

Building Our Single-Page App

Displaying the Initial Frame

Creating Our Content Pages

Using React Router

It’s the Little Things

Fixing Our Routing

Adding Some CSS

Highlighting the Active Link

19 Introduction to Redux

What Is Redux?

Building a Simple App Using Redux

It’s Redux Time

Lights! Camera! Action!

Our Reducer

Store Stuff

20 Using Redux with React

Managing React State with Redux

How Redux and React Overlap

Getting Started

Building the App