Pro React

Table of Contents

1. Cover
2. Title
3. Copyright
4. Dedication
5. Contents at a glance
6. Contents
7. About the Author
8. About the Technical Reviewers
9. Acknowledgments
10. Introduction
11. Chapter 1: Getting Started
    1. Before You Get Started
       1. Node.js and npm
       2. JavaScript ES6
    2. Defining React
    3. React’s Benefits
       1. Reactive Rendering is Simple
       2. Component-Oriented Development Using Pure JavaScript
       3. Flexible Abstraction of the Document Model
    4. Building Your First React App
       1. React Development Workflow
       2. Creating Your First Component
       3. Saving a little typing
       4. Dynamic Values
    5. Composing Components
       1. Props
       2. Presenting the Kanban Board App
       3. Defining Component Hierarchy
       4. The Importance of Props
       5. Building the Components
    6. Introducing State
       1. Kanban App: Togglable Cards
    7. Summary
12. Chapter 2: Inside the DOM Abstraction
    1. Events in React
       1. DOM Event Listeners
       2. Kanban App: Managing the DOM Event
    2. Digging Deeper in JSX
       1. JSX vs. HTML
       2. Differences Between JSX and HTML
       3. JSX Quirks
    3. Kanban App: Indicating Whether a Card Is Open or Closed
       1. Blank Space
       2. Comments in JSX
       3. Rendering Dynamic HTML
       4. Kanban App: Rendering Markdown
    4. React Without JSX
       1. React Elements in Plain JavaScript
       2. Element Factories
       3. Custom Factories
    5. Inline Styling
       1. Defining Inline Styles
       2. Kanban App: Card Color via Inline Styling
    6. Working With Forms
       1. Controlled Components
       2. Special Cases
       3. Uncontrolled Components
       4. Kanban App: Creating a Task Form
    7. Virtual DOM Under the Hood
       1. Keys
       2. Kanban App: Keys
       3. Refs
    8. Summary
13. Chapter 3: Architecting Applications with Components
    1. Prop Validation
       1. Default Prop Values
       2. Built-in propType Validators
       3. Kanban App: Defining Prop Types
       4. Custom PropType Validators
    2. Component Composition Strategies and Best Practices
       1. Stateful and Pure Components
       2. Which Components Should Be Stateful?
       3. Data Flow and Component Communication
    3. Component Lifecycle
       1. Lifecycle Phases and Methods
       2. Lifecycle Functions in Practice: Data Fetching
    4. A Brief Talk About Immutability
       1. Immutability in Plain JavaScript
       2. Nested Objects
       3. React Immutability Helper
    5. Kanban App: Adding (a Little) Complexity
    6. Summary
14. Chapter 4: Sophisticated Interactions
    1. Animation in React
       1. CSS Transition and Animation 101
       2. React CSSTransitionGroup
    2. Drag and Drop
       1. React DnD Implementation Overview
       2. A React DnD Sample Implementation
    3. Kanban App: Animations and Drag-and-Drop Support
       1. Card Toggle Animation
       2. Card Dragging
    4. Summary
15. Chapter 5: Routing
    1. Implementing Routing the “Naive” Way
    2. React Router
       1. Index Route
       2. Routes with Parameters
       3. Setting Active Links
       4. Passing Props
       5. Decoupling the UI from the URL
       6. Changing Routes Programmatically
       7. Histories
       8. Kanban App: Routing
    3. Summary
16. Chapter 6: Architecting React Applications with Flux
    1. What Is Flux?
       1. Stores
       2. Actions
       3. Dispatcher
    2. The Unrealistic, Minimal Flux App
       1. The Bank Account Application
    3. Flux Utils
       1. Flux Utils Stores
       2. Container Component Higher Order Function
    4. Asynchronous Flux
       1. waitFor: Coordinating Store Update Order
       2. Asynchronous Data Fetching
    5. AirCheap Application
       1. Setup: Project Organization and Basic Files
       2. Creating the API Helper and ActionCreators for Fetching Airports
       3. AirportStore
       4. App Component
       5. Finishing the AirCheap application: Loading Tickets
    6. Evolving Your Async Data Fetching Implementation
       1. AppDispatcher’s dispatchAsync
    7. Kanban App: Moving to a Flux Architecture
       1. Refactor: Creating Flux Basic Structure and Moving Files
       2. Moving the Data Fetching to the Flux Architecture
       3. Implementing the FetchCards Action, API Method Call, and Store Callback
       4. Moving All Card and Task Manipulations to the Flux Architecture
       5. Preparing for the Functionality Migration
       6. Components
       7. Removing All Component State
    8. Summary
17. Chapter 7: Performance Tuning
    1. How the Reconciliation Process Works
       1. Batching
       2. Sub-Tree Rendering
    2. React Perf
       1. The Performance Test Application
       2. Installing and Using ReactPerf
    3. shouldComponentUpdate
       1. shallowCompare Add-on
    4. Summary
18. Chapter 8 : Performance Tuning
    1. Node.js and Express
       1. Node.js and Express “Hello World”
    2. Isomorphic React Basics
       1. Creating the Project Structure
       2. Rendering React Components on the Server
       3. Mounting React on the Client
    3. Routing
       1. Setting Up Internal Routes
       2. Dynamic Data Fetching
       3. Rendering Routes
    4. Summary
19. Chapter 9: Testing React Components
    1. Jest
    2. React Test Utilities
       1. Rendering a Component for Testing
       2. Transversing and Finding Children
       3. Simulating Events
       4. Shallow Rendering
    3. Summary
20. Index