React: Up & Running

Book Description

Hit the ground running with React, the open-source technology from Facebook for building rich web applications fast. With this practical guide, Yahoo! web developer Stoyan Stefanov teaches you how to build components—React’s basic building blocks—and organize them into maintainable, large-scale apps. If you’re familiar with basic JavaScript syntax, you’re ready to get started.

Once you understand how React works, you’ll build a complete custom Whinepad app that helps users rate wines and keep notes. You’ll quickly learn why some developers consider React the key to the web app development puzzle.

  • Set up React and write your first "Hello world" web app
  • Create and use custom React components alongside generic DOM components
  • Build a data table component that lets you edit, sort, search, and export its contents
  • Use the JSX syntax extension as an alternative to function calls
  • Set up a lean, low-level build process that helps you focus on React
  • Build a complete custom app that lets you store data on the client
  • Use ESLint, Flow, and Jest tools to check and test your code as your app evolves
  • Manage communication between components with Flux

Table of Contents

  1. Preface
    1. About This Book
    2. Conventions Used in This Book
    3. Using Code Examples
    4. Safari® Books Online
    5. How to Contact Us
    6. Acknowledgments
  2. 1. Hello World
    1. Setup
    2. Hello React World
    3. What Just Happened?
    4. React.DOM.*
    5. Special DOM Attributes
    6. React DevTools Browser Extension
    7. Next: Custom Components
  3. 2. The Life of a Component
    1. Bare Minimum
    2. Properties
    3. propTypes
      1. Default Property Values
    4. State
    5. A Stateful Textarea Component
    6. A Note on DOM Events
      1. Event Handling in the Olden Days
      2. Event Handling in React
    7. Props Versus State
    8. Props in Initial State: An Anti-Pattern
    9. Accessing the Component from the Outside
    10. Changing Properties Mid-Flight
    11. Lifecycle Methods
    12. Lifecycle Example: Log It All
    13. Lifecycle Example: Use a Mixin
    14. Lifecycle Example: Using a Child Component
    15. Performance Win: Prevent Component Updates
    16. PureRenderMixin
  4. 3. Excel: A Fancy Table Component
    1. Data First
    2. Table Headers Loop
    3. Debugging the Console Warning
    4. Adding <td> Content
      1. How Can You Improve the Component?
    5. Sorting
      1. How Can You Improve the Component?
    6. Sorting UI Cues
    7. Editing Data
      1. Editable Cell
      2. Input Field Cell
      3. Saving
      4. Conclusion and Virtual DOM Diffs
    8. Search
      1. State and UI
      2. Filtering Content
      3. How Can You Improve the Search?
    9. Instant Replay
      1. How Can You Improve the Replay?
      2. An Alternative Implementation?
    10. Download the Table Data
  5. 4. JSX
    1. Hello JSX
    2. Transpiling JSX
    3. Babel
    4. Client Side
    5. About the JSX transformation
    6. JavaScript in JSX
    7. Whitespace in JSX
    8. Comments in JSX
    9. HTML Entities
      1. Anti-XSS
    10. Spread Attributes
      1. Parent-to-Child Spread Attributes
    11. Returning Multiple Nodes in JSX
    12. JSX Versus HTML Differences
      1. No class, What for?
      2. style Is an Object
      3. Closing Tags
      4. camelCase Attributes
    13. JSX and Forms
      1. onChange Handler
      2. value Versus defaultValue
      3. <textarea> Value
      4. <select> Value
    14. Excel Component in JSX
  6. 5. Setting Up for App Development
    1. A Boilerplate App
      1. Files and Folders
      2. index.html
      3. CSS
      4. JavaScript
      5. JavaScript: Modernized
    2. Installing Prerequisites
      1. Node.js
      2. Browserify
      3. Babel
      4. React, etc.
    3. Let’s Build
      1. Transpile JavaScript
      2. Package JavaScript
      3. Package CSS
      4. Results!
      5. Windows Version
      6. Building During Development
    4. Deployment
    5. Moving On
  7. 6. Building an App
    1. Whinepad v.0.0.1
      1. Setup
      2. Start Coding
    2. The Components
      1. Setup
      2. Discover
      3. <Button> Component
      4. Button.css
      5. Button.js
      6. Forms
      7. <Suggest>
      8. <Rating> Component
      9. A <FormInput> “Factory”
      10. <Form>
      11. <Actions>
      12. Dialogs
    3. App Config
    4. <Excel>: New and Improved
    5. <Whinepad>
    6. Wrapping It All Up
  8. 7. Lint, Flow, Test, Repeat
    1. package.json
      1. Configure Babel
      2. scripts
    2. ESLint
      1. Setup
      2. Running
      3. All the Rules
    3. Flow
      1. Setup
      2. Running
      3. Signing Up for Typechecking
      4. Fixing <Button>
      5. app.js
      6. More on Typechecking props and state
      7. Export/Import Types
      8. Typecasting
      9. Invariants
    4. Testing
      1. Setup
      2. First Test
      3. First React Test
      4. Testing the <Button> Component
      5. Testing <Actions>
      6. More Simulated Interactions
      7. Testing Complete Interactions
      8. Coverage
  9. 8. Flux
    1. The Big Idea
    2. Another Look at Whinepad
    3. The Store
      1. Store Events
      2. Using the Store in <Whinepad>
      3. Using the Store in <Excel>
      4. Using the Store in <Form>
      5. Drawing the Line
    4. Actions
      1. CRUD Actions
      2. Searching and Sorting
      3. Using the Actions in <Whinepad>
      4. Using the Actions in <Excel>
    5. Flux Recap
    6. Immutable
      1. Immutable Store Data
      2. Immutable Data Manipulation
  10. Index

Product Information

  • Title: React: Up & Running
  • Author(s): Stoyan Stefanov
  • Release date: July 2016
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781491931813