React: Up & Running

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