React: Up & Running. 2nd Edition

Spis treści książki

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

pokaż cały spis treści

ukryj recenzje