O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning React

Book Description

If you want to learn how to build efficient user interfaces with React, this is your book. Authors Alex Banks and Eve Porcello show you how to create UIs with this small JavaScript library that can deftly display data changes on large-scale, data-driven websites without page reloads. Along the way, you’ll learn how to work with functional programming and the latest ECMAScript features.

Developed by Facebook, and used by companies including Netflix, Walmart, and The New York Times for large parts of their web interfaces, React is quickly growing in use. By learning how to build React components with this hands-on guide, you’ll fully understand how useful React can be in your organization.

  • Learn key functional programming concepts with JavaScript
  • Peek under the hood to understand how React runs in the browser
  • Create application presentation layers by mounting and composing React components
  • Use component trees to manage data and reduce the time you spend debugging applications
  • Explore React’s component lifecycle and use it to load data and improve UI performance
  • Use a routing solution for browser history, bookmarks, and other features of single-page applications
  • Learn how to structure React applications with servers in mind

Table of Contents

  1. Preface
    1. Conventions Used in This Book
    2. Using Code Examples
    3. O’Reilly Safari
    4. How to Contact Us
    5. Acknowledgments
  2. 1. Welcome to React
    1. Obstacles and Roadblocks
      1. React Is a Library
      2. New ECMAScript Syntax
      3. Popularity of Functional JavaScript
      4. JavaScript Tooling Fatigue
      5. Why React Doesn’t Have to Be Hard to Learn
    2. React’s Future
    3. Keeping Up with the Changes
    4. Working with the Files
      1. File Repository
      2. React Developer Tools
      3. Installing Node.js
  3. 2. Emerging JavaScript
    1. Declaring Variables in ES6
      1. const
      2. let
      3. Template Strings
      4. Default Parameters
    2. Arrow Functions
    3. Transpiling ES6
    4. ES6 Objects and Arrays
      1. Destructuring Assignment
      2. Object Literal Enhancement
      3. The Spread Operator
    5. Promises
    6. Classes
    7. ES6 Modules
    8. CommonJS
  4. 3. Functional Programming with JavaScript
    1. What It Means to Be Functional
    2. Imperative Versus Declarative
    3. Functional Concepts
      1. Immutability
      2. Pure Functions
      3. Data Transformations
      4. Higher-Order Functions
      5. Recursion
      6. Composition
      7. Putting It All Together
  5. 4. Pure React
    1. Page Setup
    2. The Virtual DOM
    3. React Elements
    4. ReactDOM
    5. Children
    6. Constructing Elements with Data
    7. React Components
      1. createClass
      2. ES6 Classes
      3. Stateless Functional Components
    8. DOM Rendering
    9. Factories
  6. 5. React with JSX
    1. React Elements as JSX
      1. JSX Tips
    2. Babel
    3. Recipes as JSX
    4. Intro to Webpack
      1. Webpack Loaders
      2. Recipes App with a Webpack Build
  7. 6. Props, State, and the Component Tree
    1. Property Validation
      1. Validating Props with createClass
      2. Default Props
      3. Custom Property Validation
      4. ES6 Classes and Stateless Functional Components
    2. Refs
      1. Inverse Data Flow
      2. Refs in Stateless Functional Components
    3. React State Management
      1. Introducing Component State
      2. Initializing State from Properties
    4. State Within the Component Tree
      1. Color Organizer App Overview
      2. Passing Properties Down the Component Tree
      3. Passing Data Back Up the Component Tree
  8. 7. Enhancing Components
    1. Component Lifecycles
      1. Mounting Lifecycle
      2. Updating Lifecycle
      3. React.Children
    2. JavaScript Library Integration
      1. Making Requests with Fetch
      2. Incorporating a D3 Timeline
    3. Higher-Order Components
    4. Managing State Outside of React
      1. Rendering a Clock
    5. Flux
      1. Views
      2. Actions and Action Creators
      3. Dispatcher
      4. Stores
      5. Putting It All Together
      6. Flux Implementations
  9. 8. Redux
    1. State
    2. Actions
      1. Action Payload Data
    3. Reducers
      1. The Color Reducer
      2. The Colors Reducer
      3. The Sort Reducer
    4. The Store
      1. Subscribing to Stores
      2. Saving to localStorage
    5. Action Creators
    6. Middleware
      1. Applying Middleware to the Store
  10. 9. React Redux
    1. Explicitly Passing the Store
    2. Passing the Store via Context
    3. Presentational Versus Container Components
    4. The React Redux Provider
    5. React Redux connect
  11. 10. Testing
    1. ESLint
    2. Testing Redux
      1. Test-Driven Development
      2. Testing Reducers
      3. Testing the Store
    3. Testing React Components
      1. Setting Up the Jest Environment
      2. Enzyme
      3. Mocking Components
    4. Snapshot Testing
    5. Using Code Coverage
  12. 11. React Router
    1. Incorporating the Router
      1. Router Properties
    2. Nesting Routes
      1. Using a Page Template
      2. Subsections and Submenus
    3. Router Parameters
      1. Adding Color Details Page
      2. Moving Color Sort State to Router
  13. 12. React and the Server
    1. Isomorphism versus Universalism
      1. Server Rendering React
    2. Universal Color Organizer
      1. Universal Redux
      2. Universal Routing
    3. Communicating with the Server
      1. Completing Actions on the Server
      2. Actions with Redux Thunks
  14. Index