React in Depth

React in Depth
brief contents
contents
preface
acknowledgments
about this book
	Who should read this book
	How this book is organized: A road map
	About the code
	liveBook discussion forum
	Software requirements
		Command-line environment with Node.js and npm
		Text editor
		Source code
about the author
about the cover illustration
1 Developer’s guide to the React Ecosystem
	1.1 Navigating the React mastery journey
	1.2 Why a book on React mastery?
	1.3 How does this book teach React mastery?
	1.4 The React ecosystem
		1.4.1 What’s in the ecosystem?
		1.4.2 Navigating the ecosystem
	1.5 The technology stack
		1.5.1 Why do we talk about a tech stack?
		1.5.2 Viewing the anatomy of a React stack
		1.5.3 Joining a project
		1.5.4 Creating a stack from scratch
	Summary
2 Advanced component patterns
	2.1 The Provider pattern
		2.1.1 Inventing a provider
		2.1.2 Creating a dedicated provider component
		2.1.3 Avoiding rendering everything
		2.1.4 Creating beautifully typed selectable contexts with the recontextual tool
		2.1.5 How useful is the Provider pattern?
	2.2 The Composite pattern
		2.2.1 The simple beginnings
		2.2.2 Complexity increases
		2.2.3 The ideal JSX
		2.2.4 Implementation with composite components
		2.2.5 How useful is the Composite pattern?
	2.3 The Summary pattern
		2.3.1 A single custom hook
		2.3.2 Better results with more complexity
		2.3.3 Multiple hooks required
		2.3.4 How useful is the Summary pattern?
	Summary
3 Optimizing React performance
	3.1 Understanding React rendering
		3.1.1 Changing properties is irrelevant
		3.1.2 Repeated function calls in Strict Mode while in development
	3.2 Optimizing performance by minimizing re-rendering
		3.2.1 Memoize a component
		3.2.2 Memoize part of a component
		3.2.3 Memoize properties to memoized components
		3.2.4 Memoization hooks in detail
	3.3 Understanding dependency arrays
		3.3.1 What are dependencies?
		3.3.2 Run on every render by skipping the dependency array
		3.3.3 Skip stable variables from dependencies
		3.3.4 Get help maintaining dependency arrays
	Summary
4 Better code maintenance with developer tooling
	4.1 Reducing errors with linting
		4.1.1 Problems solved by ESLint
		4.1.2 ESLint configurations
		4.1.3 How to get started using ESLint
	4.2 Increasing productivity with formatters
		4.2.1 Problems solved by Prettier
		4.2.2 Nonstandard rules with Prettier configuration
		4.2.3 How to start using Prettier
		4.2.4 Alternative formatters
	4.3 Making components more robust with property constraints
		4.3.1 How to apply property types
		4.3.2 Drawbacks of using property types
		4.3.3 Default property values
		4.3.4 How to get started using property types
	4.4 Debugging applications with React Developer Tools
		4.4.1 Problems solved by debugging
		4.4.2 How to get started using React Developer Tools
		4.4.3 Using the components inspector in React Developer Tools
		4.4.4 Using the profiler in React Developer Tools
		4.4.5 Alternatives and other tools
	Summary
5 TypeScript: Next-level JavaScript
	5.1 The importance of TypeScript
	5.2 Introduction to TypeScript
		5.2.1 TypeScript files and React
		5.2.2 Static types
		5.2.3 Employee display
		5.2.4 Optional properties
	5.3 Advanced TypeScript with generics
		5.3.1 Understanding generic types
		5.3.2 Typing children
		5.3.3 Extending interfaces
		5.3.4 Spreading props in general
		5.3.5 Restricting and loosening types
		5.3.6 Using optional and required properties
		5.3.7 Using either/or properties
		5.3.8 Forwarding refs
	Summary
6 Mastering TypeScript with React
	6.1 Using React hooks in TypeScript
		6.1.1 Typing useState
		6.1.2 Typing useRef
		6.1.3 Typing contexts and useContext
		6.1.4 Typing effects
		6.1.5 Typing reducers
		6.1.6 Typing memoization hooks
		6.1.7 Typing the remaining hooks
	6.2 Generic pagination: An example
		6.2.1 Forwarding a reference to a generic component
		6.2.2 Memoizing a generic component
	6.3 Drawbacks of using TypeScript
	6.4 TypeScript resources
	Summary
7 CSS in JavaScript
	7.1 Styling with concerns
		7.1.1 CSS language features
		7.1.2 Developer experience
		7.1.3 Web application development
		7.1.4 Why not inline styles?
		7.1.5 What about existing UI libraries?
	7.2 The example button application
	7.3 Method 1: CSS files and class names
		7.3.1 How class names work
		7.3.2 Setup for class name project
		7.3.3 Implementation with class names
		7.3.4 Strengths of the class names approach
		7.3.5 Weaknesses of the class names approach
		7.3.6 When (not) to use CSS files and class names
	7.4 Method 2: CSS Modules
		7.4.1 How CSS Modules work
		7.4.2 Setup for CSS Modules project
		7.4.3 Source code with CSS Modules
		7.4.4 Strengths of CSS Modules
		7.4.5 Weaknesses of CSS Modules
		7.4.6 When (not) to use CSS Modules
	7.5 Method 3: Styled-components
		7.5.1 How styled-components works
		7.5.2 Setup for styled-components project
		7.5.3 Source code with styled-components
		7.5.4 Strengths of styled-components
		7.5.5 Weaknesses of styled-components
		7.5.6 When (not) to use styled-components
	7.6 One problem, infinite solutions
	Summary
8 Data management in React
	8.1 Creating a goal-tracking application
	8.2 Building the application architecture
	8.3 Managing data in pure React
		8.3.1 Context
		8.3.2 Source code
	8.4 Reducing data state
		8.4.1 Immer: Writing immutable code mutably
		8.4.2 Source code
	8.5 Scaling data management with Redux Toolkit
		8.5.1 How does Redux work?
		8.5.2 Source code
	8.6 Simplifying data management with zustand
		8.6.1 Zustand
		8.6.2 Source code
	8.7 Rethinking flow and data with XState
		8.7.1 A state machine for doing things
		8.7.2 Source code
	8.8 Data management recap
	Summary
9 Remote data and reactive caching
	9.1 Server complexity
	9.2 Adding a remote server to do goal tracking
		9.2.1 Adding signup and login
		9.2.2 Designing an API
		9.2.3 Rewriting the data layer
		9.2.4 Adding a loading indicator
		9.2.5 Putting everything together
		9.2.6 Evaluating the solution
	9.3 Migrating to TanStack Query
		9.3.1 TanStack Query architecture
		9.3.2 Queries and mutations
		9.3.3 Implementation
		9.3.4 Bonus side effects
	9.4 Reactive caching with TanStack Query
		9.4.1 Updating cache from a mutation
		9.4.2 Updating the cache optimistically
		9.4.3 Using partial data where available
		9.4.4 Hiding the loader if some data is available
		9.4.5 Putting it all together
	Summary
10 Unit-testing React
	10.1 Testing a static component
		10.1.1 Running tests
		10.1.2 Test file location
		10.1.3 Test resilience
	10.2 Testing interactive components
		10.2.1 Testing a stateful component
		10.2.2 Testing callbacks
		10.2.3 Testing a form
		10.2.4 Testing a hook
	10.3 Testing a component with dependencies
		10.3.1 Mocking the browser API
		10.3.2 Mocking a library
		10.3.3 Mocking a context
	Summary
11 React website frameworks
	11.1 What's a website framework?
		11.1.1 Fullstack React as a concept
		11.1.2 Rendering HTML on the server
		11.1.3 Dynamic content
		11.1.4 Hydration is necessary
	11.2 Implementations
		11.2.1 Next.js
		11.2.2 Remix
		11.2.3 Environment values and API keys
	11.3 Let's create a weather app!
		11.3.1 Using the URL
		11.3.2 Using data in a route
		11.3.3 Storing local data
		11.3.4 Creating an API
	11.4 Alternative React-based website frameworks
	Summary
12 Project: Build an expense tracker with Remix
	12.1 Creating the expense tracker
		12.1.1 Choosing your own adventure
	12.2 Starting from scratch
		12.2.1 Creating the basic visual framework
		12.2.2 Extending routes
	12.3 Adding the backend
		12.3.1 Extending the database
		12.3.2 Defining ORM wrappers
		12.3.3 Updating components
		12.3.4 Adding server-side data to routes
	12.4 Adding the frontend
		12.4.1 Form library
		12.4.2 Dashboard components
		12.4.3 Income component
		12.4.4 Expenses component
		12.4.5 Add-expense component
	12.5 Future work
		12.5.1 Showing error messages
		12.5.2 Editing and deleting objects
		12.5.3 Making the pie chart interactive
		12.5.4 Filtering, ordering, and paginating the expense list
13 Project: Create a React UI library
	13.1 The existing stack
		13.1.1 Storybook: Visual testing
		13.1.2 Istanbul: Code coverage reporting
	13.2 Your new job: Extending the library
		13.2.1 A Switch component
		13.2.2 An accordion component
		13.2.3 A toast component
		13.2.4 My solution
	13.3 Future work
14 Project: Develop a word game in React
	14.1 Building a game
	14.2 Choose your ambition
	14.3 Choose your stack
	14.4 My implementation
	14.5 Share your result
index
	Symbols
	Numerics
	A
	B
	C
	D
	E
	F
	G
	H
	I
	J
	K
	L
	M
	N
	O
	P
	Q
	R
	S
	T
	U
	V
	W
	X
	Z
React in Depth - back