React: Up & Running, 2nd Edition

Table of contents

1. Preface
   1. About This Book
   2. Conventions Used in This Book
   3. Using Code Examples
   4. O’Reilly Online Learning
   5. How to Contact Us
   6. Acknowledgments
2. 1. Hello World
   1. Setup
   2. Hello React World
   3. What Just Happened?
   4. React.createElement()
   5. JSX
      1. Setup Babel
      2. Hello JSX World
      3. On Transpilation
   6. Next: Custom Components
3. 2. The Life of a Component
   1. A Custom Function Component
      1. A JSX Version
   2. A Custom Class Component
      1. Which Syntax to Use?
   3. Properties
      1. Properties in Function Components
      2. Default Properties
   4. State
   5. A textarea Component
   6. Make It Stateful
   7. A Note on DOM Events
      1. Event Handling in the Olden Days
      2. Event Handling in React
      3. Event-Handling Syntax
   8. Props Versus State
   9. Props in Initial State: an Antipattern
   10. Accessing the Component from the Outside
   11. Lifecycle Methods
   12. Lifecycle Example: Log It All
       1. Paranoid State Protection
   13. Lifecycle Example: Using a Child Component
   14. Performance Win: Prevent Component Updates
   15. Whatever Happened to Function Components?
4. 3. Excel: A Fancy Table Component
   1. Data First
   2. Table Headers Loop
   3. Table Headers Loop, a Terse Version
   4. Debugging the Console Warning
   5. Adding <td> Content
      1. Prop Types
      2. Can You Improve the Component?
   6. Sorting
      1. Can You Improve the Component?
   7. Sorting UI Cues
   8. Editing Data
      1. Editable Cell
      2. Input Field Cell
      3. Saving
      4. Conclusion and Virtual DOM Diffs
   9. Search
      1. State and UI
      2. Filtering Content
      3. Update the save() Method
      4. Can You Improve the Search?
   10. Instant Replay
       1. Cleaning Up Event Handlers
       2. Cleaning Solution
       3. Can You Improve the Replay?
       4. An Alternative Implementation?
   11. Download the Table Data
   12. Fetching Data
5. 4. Functional Excel
   1. A Quick Refresher: Function versus Class Components
   2. Rendering the Data
   3. The State Hook
   4. Sorting the Table
   5. Editing Data
   6. Searching
   7. Lifecycles in a World of Hooks
      1. Troubles with Lifecycle Methods
      2. useEffect()
      3. Cleaning Up Side Effects
      4. Trouble-Free Lifecycles
      5. useLayoutEffect()
   8. A Custom Hook
   9. Wrapping up the Replay
   10. useReducer
       1. Reducer Functions
       2. Actions
       3. An Example Reducer
       4. Unit Testing Reducers
   11. Excel Component with a Reducer
6. 5. JSX
   1. A Couple Tools
   2. Whitespace in JSX
   3. Comments in JSX
   4. HTML Entities
      1. Anti-XSS
   5. Spread Attributes
      1. Parent-to-Child Spread Attributes
   6. Returning Multiple Nodes in JSX
      1. A Wrapper
      2. A Fragment
      3. An Array
   7. Differences Between JSX and HTML
      1. No class, What for?
      2. style Is an Object
      3. Closing Tags
      4. camelCase Attributes
   8. Namespaced Components
   9. JSX and Forms
      1. onChange Handler
      2. value Versus defaultValue
      3. <textarea> Value
      4. <select> Value
      5. Controlled and Uncontrolled Components
7. 6. Setting Up for App Development
   1. Create React App
      1. Node.js
      2. Hello CRA
      3. Build and Deploy
      4. Mistakes Were Made
   2. package.json and node_modules
   3. Poking Around the Code
      1. Indices
      2. JavaScript: Modernized
      3. CSS
   4. Moving On
8. 7. Building the App’s Components
   1. Setup
   2. Start Coding
   3. Refactoring the Excel Component
   4. Version 0.0.1 of the New App
   5. CSS
   6. Local Storage
   7. The Components
      1. Discovery
   8. Logo and a Body
      1. Logo
      2. Body
      3. Discoverable
   9. <Button> Component
      1. Button.js
      2. classnames Package
   10. Forms
       1. <Suggest>
       2. <Rating> Component
       3. A <FormInput> “Factory”
       4. <Form>
   11. <Actions>
   12. Dialogs
   13. Header
   14. App Config
   15. <Excel>: New and Improved
       1. The Overall Structure
       2. Rendering
       3. React.Strict and Reducers
       4. Excel’s Little Helpers
9. 8. The Finished App
   1. Updated App.js
   2. DataFlow Component
      1. DataFlow Body
   3. Job Done
      1. Whinepad v2
   4. Context
   5. Next Steps
      1. Circular Data
   6. Providing Context
   7. Consuming Context
      1. Context in the Header
      2. Context in the Data Table
   8. Updating Discovery
   9. Routing
      1. Route Context
      2. Using the Filter URL
      3. Consuming the Route Context in the Header
      4. Consuming the Route Context in the Data Table
      5. useCallback()
   10. The End
10. Index