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