ReactJS Documentation

This Book

1. Recommended Resources
2. Recommended Books

Getting Started

1. Try React
2. Learn React
3. Staying Informed
4. Versioned Documentation
5. Something Missing?

Add React to a Website

1. Add React in One Minute
2. Optional: Try React with JSX

Create a New React App

1. You Might Not Need a Toolchain
2. Recommended Toolchains
3. Creating a Toolchain from Scratch

CDN Links

Release Channels

Hello World

1. How to Read This Guide
2. Knowledge Level Assumptions
3. Let’s Get Started!

Introducing JSX

Rendering Elements

1. Rendering an Element into the DOM
2. Updating the Rendered Element
3. React Only Updates What’s Necessary

Components and Props

1. Function and Class Components
2. Rendering a Component
3. Composing Components
4. Extracting Components
5. Props are Read-Only

State and Lifecycle

1. Converting a Function to a Class
2. Adding Local State to a Class
3. Adding Lifecycle Methods to a Class
4. Using State Correctly
5. The Data Flows Down

Handling Events

1. Passing Arguments to Event Handlers

Conditional Rendering

Lists and Keys

1. Keys

Forms

1. Controlled Components
2. The textarea Tag
3. The select Tag
4. The file input Tag
5. Handling Multiple Inputs
6. Controlled Input Null Value
7. Alternatives to Controlled Components
8. Fully-Fledged Solutions

Lifting State Up

1. Adding a Second Input
2. Writing Conversion Functions
3. Lifting State Up
4. Lessons Learned

Composition vs Inheritance

1. Containment
2. Specialization
3. So What About Inheritance?

Thinking in React

1. Start With A Mock
2. Step 1: Break The UI Into A Component Hierarchy
3. Step 2: Build A Static Version in React
4. Step 3: Identify The Minimal (but complete) Representation Of UI State
5. Step 4: Identify Where Your State Should Live
6. Step 5: Add Inverse Data Flow
7. And That’s It

Accessibility

1. Why Accessibility?
2. Standards and Guidelines
3. Semantic HTML
4. Accessible Forms
5. Focus Control
6. Mouse and pointer events
7. More Complex Widgets
8. Other Points for Consideration
9. Development and Testing Tools

Code Splitting

1. Bundling
2. Code Splitting
3. import()
4. React.lazy
5. Route-based code splitting
6. Named Exports

Context

1. When to Use Context
2. Before You Use Context
3. API
4. Examples
5. Caveats
6. Legacy API

Error Boundaries

1. Introducing Error Boundaries
2. Live Demo
3. Where to Place Error Boundaries
4. New Behavior for Uncaught Errors
5. Component Stack Traces
6. How About try/catch?
7. How About Event Handlers?
8. Naming Changes from React 15

Forwarding Refs

1. Forwarding refs to DOM components
2. Note for component library maintainers
3. Forwarding refs in higher-order components
4. Displaying a custom name in DevTools

Fragments

1. Motivation
2. Usage

Higher Order Components

1. Use HOCs For Cross-Cutting Concerns
2. Don’t Mutate the Original Component. Use Composition.
3. Convention: Pass Unrelated Props Through to the Wrapped Component
4. Convention: Maximizing Composability
5. Convention: Wrap the Display Name for Easy Debugging
6. Caveats

Integrating with Other Libraries

1. Integrating with DOM Manipulation Plugins
2. Integrating with Other View Libraries
3. Integrating with Model Layers

JSX In Depth

1. Specifying The React Element Type
2. Props in JSX
3. Children in JSX

Optimizing Performance

1. Use the Production Build
2. Profiling Components with the Chrome Performance Tab
3. Profiling Components with the DevTools Profiler
4. Virtualize Long Lists
5. Avoid Reconciliation
6. shouldComponentUpdate In Action
7. Examples
8. The Power Of Not Mutating Data

Portals

1. Usage
2. Event Bubbling Through Portals

Profiler API

1. Usage
2. onRender Callback

React Without ES6

1. Declaring Default Props
2. Setting the Initial State
3. Autobinding
4. Mixins

React Without JSX

Reconciliation

1. Motivation
2. The Diffing Algorithm
3. Tradeoffs

Refs and the DOM

Render Props

1. Use Render Props for Cross-Cutting Concerns
2. Using Props Other Than render
3. Caveats

Static Type Checking

1. Flow
2. TypeScript
3. Reason
4. Kotlin
5. Other Languages

Strict Mode

Typechecking With PropTypes

Uncontrolled Components

1. The file input Tag

Web Components

1. Using Web Components in React
2. Using React in your Web Components

React Top-Level API

1. Overview
2. Reference

React Component

1. Overview
2. Reference
3. Other APIs
4. Class Properties
5. Instance Properties

ReactDOM

1. Overview
2. Reference

ReactDOMServer

1. Overview
2. Reference

DOM Elements

1. Differences In Attributes
2. All Supported HTML Attributes

SyntheticEvent

1. Overview
2. Supported Events
3. Reference

Test Utilities

1. Overview
2. Reference
3. Other Utilities

Test Renderer

1. Overview
2. Reference
3. Ideas

JavaScript Environment Requirements

Glossary of React Terms

1. Single-page Application
2. ES6, ES2015, ES2016, etc
3. Compilers
4. Bundlers
5. Package Managers
6. CDN
7. JSX
8. Elements
9. Components
10. Lifecycle Methods
11. Keys
12. Refs
13. Events
14. Reconciliation

Introducing Hooks

1. Video Introduction
2. No Breaking Changes
3. Motivation
4. Gradual Adoption Strategy
5. Frequently Asked Questions
6. Next Steps

Hooks at a Glance

1. State Hook
2. Effect Hook
3. Rules of Hooks
4. Building Your Own Hooks
5. Other Hooks
6. Next Steps

Using the State Hook

1. Equivalent Class Example
2. Hooks and Function Components
3. What’s a Hook?
4. Declaring a State Variable
5. Reading State
6. Updating State
7. Recap
8. Next Steps

Using the Effect Hook

1. Effects Without Cleanup
2. Effects with Cleanup
3. Recap
4. Tips for Using Effects
5. Next Steps

Rules of Hooks

1. ESLint Plugin
2. Explanation
3. Next Steps

Building Your Own Hooks

1. Extracting a Custom Hook
2. Using a Custom Hook
3. useYourImagination()

Hooks API Reference

1. Basic Hooks
2. Additional Hooks

Hooks FAQ

1. Adoption Strategy
2. From Classes to Hooks
3. Performance Optimizations
4. Under the Hood

Testing Overview

Testing Recipes

Testing Environments

Introducing Concurrent Mode (Experimental)

1. What Is Concurrent Mode?
2. Blocking vs Interruptible Rendering
3. Putting Research into Production
4. Next Steps

Suspense for Data Fetching (Experimental)

1. What Is Suspense, Exactly?
2. Using Suspense in Practice
3. Traditional Approaches vs Suspense
4. Start Fetching Early
5. Suspense and Race Conditions
6. Handling Errors
7. Next Steps

Concurrent UI Patterns (Experimental)

1. Transitions
2. The Three Steps
3. Other Patterns
4. Next Steps

Adopting Concurrent Mode (Experimental)

1. Installation
2. What to Expect

Concurrent Mode API Reference (Experimental)

1. Enabling Concurrent Mode
2. Suspense API

AJAX and APIs

Babel, JSX, and Build Steps

Passing Functions to Components

Component State

Styling and CSS

File Structure

Versioning Policy

Virtual DOM and Internals