React Quickly, Second Edition Version 8

React Quickly, Second Edition MEAP V08
Copyright
welcome
brief contents
Chapter 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.3.3 React website frameworks
	1.4 Your first React app: Hello World
		1.4.1 The result
		1.4.2 Write the application
		1.4.3 Install and run a web server
		1.4.4 Go to local website
	1.5 Quiz
	1.6 Summary
	1.7 Quiz answers
Chapter 2: Baby steps with React
	2.1 Create 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 Book examples
	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
	2.8 Summary
	2.9 Quiz answers
Chapter 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 style attribute
		3.4.5 Reserved names: class and for
		3.4.6 Multi-word attributes
		3.4.7 Boolean attribute values
		3.4.8 White space
		3.4.9 data- attributes
	3.5 Quiz
	3.6 Summary
	3.7 Quiz answers
Chapter 4: Functional components
	4.1 The shorter way to write React components
		4.1.1 An example application
		4.1.2 Any function will do
		4.1.3 Destructuring properties
		4.1.4 Default values
		4.1.5 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 Non-differences between component types
		4.2.4 Choosing 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 = harder conversion
	4.5 Quiz
	4.6 Summary
	4.7 Quiz answers
Chapter 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?
		Application data
		UI state
		Form data
		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
		Rules of hooks
		5.2.2 Initializing the state
		Initial value
		Only the first initial value matters
		Initializer function
		Initializing to a function
		5.2.3 Destructuring the state value and setter
		The useState return value
		That's weird though
		5.2.4 Using the state value
		5.2.5 Setting the state
		Setting to a static value
		Setting using an updater
		Setting to a function
		Setting and rendering
		Setting to the same object
		5.2.6 Using multiple states
		5.2.7 State scope
	5.3 Stateful class-based components
		5.3.1 Similarities with useState hook
		5.3.2 Differences from useState hook
		Only one state object
		Components always render when state is updated
		State objects are merged
		5.3.3 Conversion to a functional component
		Multiple state values
	5.4 Quiz
	5.5 Summary
	5.6 Quiz answers
Chapter 6: Effects and the React component lifecycle
	6.1 Running effects in component s
		6.1.1 Run an effect on mount
		6.1.2 Run an effect on mount and cleanup on unmount
		Events
		Cancel action if unmounted
		6.1.3 Run cleanup on unmount
		6.1.4 Run an effect on some renders
		Update from property
		6.1.5 Run an effect and cleanup on some renders
		6.1.6 Running an effect synchronously
		Technical details of a layout effect
	6.2 Understanding rendering
		6.2.1 Rendering on mount
		6.2.2 Rendering on parent render
		6.2.3 Rendering on state update
		Store higher-level information
		Manipulate DOM elements directly
		6.2.4 Rendering inside functions
		React Context
	6.3 The lifecycle of a class-based component
		6.3.1 Lifecycle methods
		6.3.2 Legacy lifecycle methods
		6.3.3 Converting lifecycle methods to hooks
	6.4 Quiz
	6.5 Summary
	6.6 Quiz answers
Chapter 7: Hooks to fuel your web applications
	7.1 Stateful components
		7.1.1 Simple state values with useState
		7.1.2 Create complex state with useReducer
		7.1.3 Remember a value without re-rendering with useRef
		Passive state values
		References to DOM elements
		7.1.4 Easier multi-component 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 Memoize a component
		7.3.2 Memoize part of a component
		7.3.3 Memoize properties to memoized components
		7.3.4 Memoize any value with useMemo
		7.3.5 Memoize functions with useCallback
		7.3.6 Create stable DOM identifiers with useId
	7.4 Create complex component libraries
		7.4.1 Create component APIs with useImperativeHandle
		7.4.2 Better debugging of hooks with useDebugValue
		7.4.3 Synchronize non-React data with useSyncExternalStore
		7.4.4 Run effect before rendering with useInsertionEffect
	7.5 The two key principles of hooks
	7.6 Understanding dependency arrays
		7.6.1 What are dependencies?
		7.6.2 Run on every render by skipping the dependency array
		Memoization without dependencies is meaningless
		No dependency array is different from empty array
		7.6.3 Skip stable variables from dependencies
	7.7 Quiz
	7.8 Summary
	7.9 Quiz answers
Chapter 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 Non-bubbling 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 Memoization of event handler functions
		8.7.1 Memoizing event handler properties
	8.8 Event handler generators
	8.9 Listening to DOM events manually
		8.9.1 Listening for window and document events
		8.9.2 Dealing with unsupported HTML events
		8.9.3 Combining React and DOM event handling
	8.10 Quiz
	8.11 Summary
	8.12 Quiz answers
Chapter 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
	9.5 Summary
	9.6 Quiz answers
Chapter 10: Advanced React Hooks for scaling
	10.1 Resolving values across components
		10.1.1 React Context
		10.1.2 Context hooks are stateful
		10.1.3 Memoization
		10.1.4 React context deconstructed
		Consuming a context
		Context composition
		Nested context example
		10.1.5 Taking context to the next level
		Context selector
		How useful is this?
	10.2 How to handle complex state
		10.2.1 Interdependent state
		useReducer to the rescue
		10.2.2 useReduction as an alternative
	10.3 Custom hooks
		10.3.1 When is something a custom hook?
		10.3.2 When should I use a custom hook?
		useToggle
		useForm
		useLoader
		useCounter
		10.3.3 Where can I find custom hooks?
	10.4 Quiz
	10.5 Summary
	10.6 Quiz answers
Chapter 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
		Defining list items
		Rendering list items
		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
		Define a context
		Create a context provider
		Access the context value
		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
		Object as a context value
		Custom hook for context access
		Stateful boolean
		Dedicated context provider
		Convert part of component to separate component
		The children property
		11.5.3 Component hierarchy
		11.5.4 What now?
	11.6 Final thoughts
	11.7 Summary
Chapter 12: Project: Timer
	12.1 Scaffolding for the timer
		12.1.1 HTML output
		Number and unit
		Button
		Time parts
		Timer
		Form input
		Form
		Timers
		12.1.2 Component hierarchy
		12.1.3 Project structure
		12.1.4 Source code
		Stylesheet
		Main application
		The timer manager
		The individual timer
		12.1.5 In the browser
	12.2 Adding a simple play/pause timer
		12.2.1 The goal of this exercise
		Precision
		12.2.2 Component hierarchy
		12.2.3 Updated project structure
		12.2.4 Source code
		The timer manager
		A generic button component
		The number and unit display
		The time display component
		The timer component
		12.2.5 In the browser
	12.3 Homework: Initializing the timer to a custom time
	12.4 Homework: Resetting timers
	12.5 Homework: Multiple timers
	12.6 Summary
Chapter 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
		The main application
		The task list
		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
		The main application file
		An icon button
		The public interface for the task folder
		A fixture with default tasks
		The task header
		The entire task
		The new task form
		The complete and stateful list of tasks
		13.2.5 In the browser
	13.3 Homework: Task steps and progress
	13.4 Homework: Prioritization of steps
	13.5 Homework: Drag and drop
	13.6 Conclusion
	13.7 Summary