React Quickly, Second Edition Version 5

React Quickly, Second Edition MEAP V05
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
		You can use these events
	8.2 Event handlers
		8.2.1 Definition of event handlers
		8.2.2 Event objects
		8.2.3 React event objects
		Performance
		Consistency
		The Synthetic Event API
		Access to native events
		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