You are previewing React: Up & Running.
O'Reilly logo
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.

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