React: Up & Running, 2nd Edition

Book description

Hit the ground running with React, the open source technology from Facebook for building rich web applications fast. Updated for the latest React release, the second edition of this hands-on guide shows you how to build React components and organize them into maintainable large-scale apps. If you’re familiar with JavaScript syntax, you’re ready to get started.

Through the course of this book, author Stoyan Stefanov helps web developers and programmers build a complete custom app for storing data on the client. 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

Publisher resources

View/Submit Errata

Table of contents

  1. 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. What just happened?
    6. Next: Custom Components
  2. 2. The Life of a Component
    1. A Custom Functional Component
      1. A JSX Version
    2. A Custom Class Component
      1. Which Syntax to Use?
    3. Properties
      1. Properties in Functional 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 Anti-Pattern
    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 Functional Components?
  3. 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
  4. 4. Functional Excel
    1. A quick refresher: Functional vs 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 with a reducer
  5. 5. JSX
    1. A couple of 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
    7. JSX Versus HTML Differences
      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
      6. Uncontrolled example
      7. Uncontrolled example with an onSubmit handler
      8. Controlled example

Product information

  • Title: React: Up & Running, 2nd Edition
  • Author(s): Stoyan Stefanov
  • Release date: November 2021
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781492051466