You are previewing Pro React.
O'Reilly logo
Pro React

Book Description

This book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You'll explore the React library in depth, as well as detailing additional tools and libraries in the React ecosystem, enabling you to create complete, complex applications.

You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture). Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given no-nonsense, in-depth treatment, and every chapter details common problems and how to avoid them.

If you already have experience creating front-end apps using jQuery or perhaps other JavaScript frameworks, but need to solve the increasingly common problem of structuring complex front-end applications, then this book is for you. Start working with React like a pro - add Pro React to your library today.

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