React Quickly, Second Edition

inside front cover
Praise for the First Edition
React Quickly
Copyright
dedication
contents
front matter
preface
acknowledgments
about this book
Audience
Roadmap
Source code
liveBook discussion forum software requirements
about the authors
about the cover illustration
1 Meeting React
1.1 Benefits of using React
1.1.1 Simplicity
1.1.2 Speed and testability
1.1.3 Ecosystem and community
1.2 Disadvantages of React
1.3 How React can fit into your website
1.3.1 Single-page applications and React
1.3.2 The React stack
1.4 Your first React app: Hello World
1.4.1 The result
1.4.2 Writing the application
1.4.3 Installing and running a web server
1.4.4 Going to the local website
1.5 Quiz
Quiz answers
Summary
2 Baby steps with React
2.1 Creating a new React app
2.1.1 React project commands
2.1.2 File structure
2.1.3 Templates
2.1.4 Pros and cons
2.2 A note about the examples in this book
2.3 Nesting elements
2.3.1 Node hierarchy
2.3.2 Simple nesting
2.3.3 Siblings
2.4 Creating custom components
2.5 Working with properties
2.5.1 A single property
2.5.2 Multiple properties
2.5.3 The special property: children
2.6 Application structure
2.7 Quiz
Quiz answers
Summary
3 Introduction to JSX
3.1 Why do we use JSX?
3.1.1 Before and after JSX
3.1.2 Keeping HTML and JavaScript together
3.2 Understanding JSX
3.2.1 Creating elements with JSX
3.2.2 Using JSX with custom components
3.2.3 Multiline JSX objects
3.2.4 Outputting variables in JSX
3.2.5 Working with properties in JSX
3.2.6 Branching in JSX
3.2.7 Comments in JSX
3.2.8 Lists of JSX objects
3.2.9 Fragments in JSX
3.3 How to transpile JSX
3.4 React and JSX gotchas
3.4.1 Self-closing elements
3.4.2 Special characters
3.4.3 String conversion
3.4.4 The style attribute
3.4.5 Reserved names: class and for
3.4.6 Multiword attributes
3.4.7 Boolean attribute values
3.4.8 Whitespace
3.4.9 data- attributes
3.5 Quiz
Quiz answers
Summary
4 Functional Components
4.1 The shorter way to write React components
4.1.1 An example application
4.1.2 Destructuring properties
4.1.3 Default values
4.1.4 Pass-through properties
4.2 A comparison of component types
4.2.1 Benefits of functional components
4.2.2 Disadvantages of functional components
4.2.3 Nonfactors between component types
4.2.4 Choosing the component type
4.3 When not to use a functional component
4.3.1 Error boundary
4.3.2 Codebase is class-based
4.3.3 Library requires class-based components
4.3.4 Snapshot before updating
4.4 Conversion from a class-based to a functional component
4.4.1 Version 1: Render only
4.4.2 Version 2: Class method as utility
4.4.3 Version 3: Real class method
4.4.4 Version 4: Constructor
4.4.5 More complexity equals harder conversion
4.5 Quiz
Quiz answers
Summary
5 Making React interactive with states
5.1 Why is React state relevant?
5.1.1 React component state
5.1.2 Where should I put state?
5.1.3 What kind of information do you store in component state?
5.1.4 What not to store in state
5.2 Adding state to a functional component
5.2.1 Importing and using a hook
5.2.2 Initializing the state
5.2.3 Destructuring the state value and setter
5.2.4 Using the state value
5.2.5 Setting the state
5.2.6 Using multiple states
5.2.7 State scope
5.3 Stateful class-based components
5.3.1 Similarities with the useState hook
5.3.2 Differences from the useState hook
5.4 Quiz
Quiz answers
Summary
6 Effects and the React component life cycle
6.1 Running effects in components
6.1.1 Running an effect on mount
6.1.2 Running an effect on mount and cleanup on unmount
6.1.3 Running cleanup on unmount
6.1.4 Running an effect on some renders
6.1.5 Running an effect and cleanup on some renders
6.1.6 Running an effect synchronously
6.2 Understanding rendering
6.2.1 Rendering on mount
6.2.2 Rendering on parent render
6.2.3 Rendering on state update
6.2.4 Rendering inside functions
6.3 The life cycle of a class-based component
6.3.1 Life cycle methods
6.3.2 Legacy life cycle methods
6.3.3 Converting life cycle methods to hooks
6.4 Quiz
Quiz answers
Summary
7 Hooks to fuel your web applications
7.1 Stateful components
7.1.1 Simple state values with useState
7.1.2 Creating complex state with useReducer
7.1.3 Remembering a value without re-rendering with useRef
7.1.4 Easier multicomponent state with useContext
7.1.5 Low-priority state updates with useDeferredValue and useTransition
7.2 Component effects
7.3 Optimizing performance by minimizing re-rendering
7.3.1 Memoizing any value with useMemo
7.3.2 Memoizing functions with useCallback
7.3.3 Creating stable DOM identifiers with useId
7.4 Creating complex component libraries
7.4.1 Creating component APIs with useImperativeHandle
7.4.2 Better debugging of hooks with useDebugValue
7.4.3 Synchronizing non-React data with useSyncExternalStore
7.4.4 Running effect before rendering with useInsertionEffect
7.5 The two key principles of hooks
7.6 Quiz
Quiz answers
Summary
8 Handling events in React
8.1 Handling DOM events in React
8.1.1 Basic event handling in React
8.2 Event handlers
8.2.1 Definition of event handlers
8.2.2 Event objects
8.2.3 React event objects
8.2.4 Synthetic event object persistence
8.3 Event phases and propagation
8.3.1 How phases and propagation work in the browser
8.3.2 Handling event phases in React
8.3.3 Unusual event propagation
8.3.4 Nonbubbling DOM events
8.4 Default actions and how to prevent them
8.4.1 The default event action
8.4.2 Preventing default
8.4.3 Other default events
8.5 React event objects in summary
8.6 Event handler functions from properties
8.7 Event handler generators
8.8 Listening to DOM events manually
8.8.1 Listening for window and document events
8.8.2 Dealing with unsupported HTML events
8.8.3 Combining React and DOM event handling
8.9 Quiz
Quiz answers
Summary
9 Working with forms in React
9.1 Controlled vs. uncontrolled inputs
9.2 Managing controlled inputs
9.2.1 Filtered input
9.2.2 Masked input
9.2.3 Many similar inputs
9.2.4 Form submission
9.2.5 Other inputs
9.2.6 Other properties
9.3 Managing uncontrolled inputs
9.3.1 Opportunities
9.3.2 File inputs
9.4 Quiz
Quiz answers
Summary
10 Advanced React hooks for scaling
10.1 Resolving values across components
10.1.1 React Context
10.1.2 Context states
10.1.3 React Context deconstructed
10.2 How to handle complex state
10.2.1 Interdependent state
10.3 Custom hooks
10.3.1 When is something a custom hook?
10.3.2 When should I use a custom hook?
10.3.3 Where can I find custom hooks?
10.4 Quiz
Quiz answers
Summary
11 Project: Website menu
11.1 Scaffolding for the menu
11.1.1 HTML output
11.1.2 Component hierarchy
11.1.3 Icons
11.1.4 CSS
11.1.5 Template
11.1.6 Source code
11.1.7 In the browser
11.2 Rendering a static menu
11.2.1 The goal of this exercise
11.2.2 Desired HTML output
11.2.3 Component tree
11.2.4 Source code
11.2.5 In the browser
11.3 Homework: A dynamic menu
11.3.1 Goal for this step
11.3.2 Hints for solving this step
11.3.3 Component hierarchy
11.3.4 What now?
11.4 Homework: Retrieving items from context
11.4.1 Goal for this step
11.4.2 Hints for solving this step
11.4.3 Component hierarchy
11.4.4 What now?
11.5 Homework: Optional link
11.5.1 Goal for this step
11.5.2 Hints for solving this step
11.5.3 Component hierarchy
11.5.4 What now?
11.6 Final thoughts
Summary
12 Project: Timer
12.1 Scaffolding for the timer
12.1.1 HTML output
12.1.2 Component hierarchy
12.1.3 Project structure
12.1.4 Source code
12.1.5 Running the application
12.2 Adding a simple play/pause timer
12.2.1 The goal of this exercise
12.2.2 Component hierarchy
12.2.3 Updated project structure
12.2.4 Source code
12.2.5 Running the application
12.3 Homework: Initializing the timer to a custom time
12.4 Homework: Resetting timers
12.5 Homework: Multiple timers
Summary
13 Project: Task manager
13.1 Scaffolding for the task manager
13.1.1 Component hierarchy
13.1.2 Project structure
13.1.3 Source code
13.1.4 Running the application
13.2 A simple list of tasks
13.2.1 The goal of this exercise
13.2.2 Component hierarchy
13.2.3 Updated project structure
13.2.4 Source code
13.2.5 Running the application
13.3 Homework: Task steps and progress
13.4 Homework: Prioritization of steps
13.5 Homework: Drag and drop
13.6 Conclusion
Summary
index
inside back cover