React in Depth

React in Depth....1

brief contents....6

contents....7

preface....13

acknowledgments....15

about this book....17

Who should read this book....17

How this book is organized: A road map....17

About the code....19

liveBook discussion forum....19

Software requirements....19

Command-line environment with Node.js and npm....20

Text editor....20

Source code....20

about the author....22

about the cover illustration....23

1 Developer’s guide to the React Ecosystem....25

1.1 Navigating the React mastery journey....26

1.2 Why a book on React mastery?....27

1.3 How does this book teach React mastery?....28

1.4 The React ecosystem....29

1.4.1 What’s in the ecosystem?....30

1.4.2 Navigating the ecosystem....34

1.5 The technology stack....34

1.5.1 Why do we talk about a tech stack?....35

1.5.2 Viewing the anatomy of a React stack....35

1.5.3 Joining a project....37

1.5.4 Creating a stack from scratch....39

Summary....41

2 Advanced component patterns....43

2.1 The Provider pattern....44

2.1.1 Inventing a provider....45

2.1.2 Creating a dedicated provider component....49

2.1.3 Avoiding rendering everything....51

2.1.4 Creating beautifully typed selectable contexts with the recontextual tool....53

2.1.5 How useful is the Provider pattern?....54

2.2 The Composite pattern....55

2.2.1 The simple beginnings....56

2.2.2 Complexity increases....58

2.2.3 The ideal JSX....62

2.2.4 Implementation with composite components....64

2.2.5 How useful is the Composite pattern?....67

2.3 The Summary pattern....68

2.3.1 A single custom hook....69

2.3.2 Better results with more complexity....70

2.3.3 Multiple hooks required....74

2.3.4 How useful is the Summary pattern?....78

Summary....78

3 Optimizing React performance....80

3.1 Understanding React rendering....81

3.1.1 Changing properties is irrelevant....82

3.1.2 Repeated function calls in Strict Mode while in development....84

3.2 Optimizing performance by minimizing re-rendering....88

3.2.1 Memoize a component....90

3.2.2 Memoize part of a component....93

3.2.3 Memoize properties to memoized components....94

3.2.4 Memoization hooks in detail....97

3.3 Understanding dependency arrays....101

3.3.1 What are dependencies?....103

3.3.2 Run on every render by skipping the dependency array....104

3.3.3 Skip stable variables from dependencies....105

3.3.4 Get help maintaining dependency arrays....107

Summary....107

4 Better code maintenance with developer tooling....109

4.1 Reducing errors with linting....111

4.1.1 Problems solved by ESLint....112

4.1.2 ESLint configurations....113

4.1.3 How to get started using ESLint....113

4.2 Increasing productivity with formatters....114

4.2.1 Problems solved by Prettier....116

4.2.2 Nonstandard rules with Prettier configuration....118

4.2.3 How to start using Prettier....120

4.2.4 Alternative formatters....121

4.3 Making components more robust with property constraints....122

4.3.1 How to apply property types....123

4.3.2 Drawbacks of using property types....126

4.3.3 Default property values....127

4.3.4 How to get started using property types....129

4.4 Debugging applications with React Developer Tools....129

4.4.1 Problems solved by debugging....130

4.4.2 How to get started using React Developer Tools....130

4.4.3 Using the components inspector in React Developer Tools....132

4.4.4 Using the profiler in React Developer Tools....139

4.4.5 Alternatives and other tools....141

Summary....141

5 TypeScript: Next-level JavaScript....143

5.1 The importance of TypeScript....144

5.2 Introduction to TypeScript....145

5.2.1 TypeScript files and React....145

5.2.2 Static types....145

5.2.3 Employee display....148

5.2.4 Optional properties....150

5.3 Advanced TypeScript with generics....152

5.3.1 Understanding generic types....152

5.3.2 Typing children....154

5.3.3 Extending interfaces....157

5.3.4 Spreading props in general....158

5.3.5 Restricting and loosening types....164

5.3.6 Using optional and required properties....165

5.3.7 Using either/or properties....166

5.3.8 Forwarding refs....171

Summary....174

6 Mastering TypeScript with React....175

6.1 Using React hooks in TypeScript....176

6.1.1 Typing useState....176

6.1.2 Typing useRef....181

6.1.3 Typing contexts and useContext....182

6.1.4 Typing effects....184

6.1.5 Typing reducers....185

6.1.6 Typing memoization hooks....190

6.1.7 Typing the remaining hooks....195

6.2 Generic pagination: An example....195

6.2.1 Forwarding a reference to a generic component....200

6.2.2 Memoizing a generic component....202

6.3 Drawbacks of using TypeScript....203

6.4 TypeScript resources....203

Summary....204

7 CSS in JavaScript....205

7.1 Styling with concerns....206

7.1.1 CSS language features....207

7.1.2 Developer experience....208

7.1.3 Web application development....209

7.1.4 Why not inline styles?....210

7.1.5 What about existing UI libraries?....211

7.2 The example button application....212

7.3 Method 1: CSS files and class names....214

7.3.1 How class names work....214

7.3.2 Setup for class name project....215

7.3.3 Implementation with class names....216

7.3.4 Strengths of the class names approach....219

7.3.5 Weaknesses of the class names approach....220

7.3.6 When (not) to use CSS files and class names....221

7.4 Method 2: CSS Modules....221

7.4.1 How CSS Modules work....221

7.4.2 Setup for CSS Modules project....222

7.4.3 Source code with CSS Modules....223

7.4.4 Strengths of CSS Modules....226

7.4.5 Weaknesses of CSS Modules....227

7.4.6 When (not) to use CSS Modules....227

7.5 Method 3: Styled-components....227

7.5.1 How styled-components works....228

7.5.2 Setup for styled-components project....231

7.5.3 Source code with styled-components....231

7.5.4 Strengths of styled-components....234

7.5.5 Weaknesses of styled-components....235

7.5.6 When (not) to use styled-components....235

7.6 One problem, infinite solutions....235

Summary....237

8 Data management in React....239

8.1 Creating a goal-tracking application....241

8.2 Building the application architecture....242

8.3 Managing data in pure React....245

8.3.1 Context....245

8.3.2 Source code....246

8.4 Reducing data state....255

8.4.1 Immer: Writing immutable code mutably....256

8.4.2 Source code....257

8.5 Scaling data management with Redux Toolkit....261

8.5.1 How does Redux work?....262

8.5.2 Source code....263

8.6 Simplifying data management with zustand....267

8.6.1 Zustand....267

8.6.2 Source code....268

8.7 Rethinking flow and data with XState....271

8.7.1 A state machine for doing things....272

8.7.2 Source code....275

8.8 Data management recap....281

Summary....281

9 Remote data and reactive caching....283

9.1 Server complexity....284

9.2 Adding a remote server to do goal tracking....286

9.2.1 Adding signup and login....286

9.2.2 Designing an API....287

9.2.3 Rewriting the data layer....289

9.2.4 Adding a loading indicator....291

9.2.5 Putting everything together....292

9.2.6 Evaluating the solution....298

9.3 Migrating to TanStack Query....299

9.3.1 TanStack Query architecture....300

9.3.2 Queries and mutations....301

9.3.3 Implementation....305

9.3.4 Bonus side effects....308

9.4 Reactive caching with TanStack Query....309

9.4.1 Updating cache from a mutation....309

9.4.2 Updating the cache optimistically....311

9.4.3 Using partial data where available....314

9.4.4 Hiding the loader if some data is available....316

9.4.5 Putting it all together....317

Summary....317

10 Unit-testing React....319

10.1 Testing a static component....320

10.1.1 Running tests....324

10.1.2 Test file location....326

10.1.3 Test resilience....326

10.2 Testing interactive components....328

10.2.1 Testing a stateful component....328

10.2.2 Testing callbacks....333

10.2.3 Testing a form....335

10.2.4 Testing a hook....338

10.3 Testing a component with dependencies....340

10.3.1 Mocking the browser API....340

10.3.2 Mocking a library....343

10.3.3 Mocking a context....346

Summary....350

11 React website frameworks....351

11.1 What's a website framework?....352

11.1.1 Fullstack React as a concept....353

11.1.2 Rendering HTML on the server....354

11.1.3 Dynamic content....356

11.1.4 Hydration is necessary....357

11.2 Implementations....359

11.2.1 Next.js....360

11.2.2 Remix....362

11.2.3 Environment values and API keys....363

11.3 Let's create a weather app!....364

11.3.1 Using the URL....365

11.3.2 Using data in a route....367

11.3.3 Storing local data....370

11.3.4 Creating an API....379

11.4 Alternative React-based website frameworks....381

Summary....382

12 Project: Build an expense tracker with Remix....384

12.1 Creating the expense tracker....385

12.1.1 Choosing your own adventure....387

12.2 Starting from scratch....391

12.2.1 Creating the basic visual framework....392

12.2.2 Extending routes....392

12.3 Adding the backend....393

12.3.1 Extending the database....393

12.3.2 Defining ORM wrappers....394

12.3.3 Updating components....395

12.3.4 Adding server-side data to routes....395

12.4 Adding the frontend....395

12.4.1 Form library....395

12.4.2 Dashboard components....396

12.4.3 Income component....396

12.4.4 Expenses component....397

12.4.5 Add-expense component....397

12.5 Future work....397

12.5.1 Showing error messages....397

12.5.2 Editing and deleting objects....398

12.5.3 Making the pie chart interactive....398

12.5.4 Filtering, ordering, and paginating the expense list....398

13 Project: Create a React UI library....399

13.1 The existing stack....401

13.1.1 Storybook: Visual testing....401

13.1.2 Istanbul: Code coverage reporting....406

13.2 Your new job: Extending the library....410

13.2.1 A Switch component....411

13.2.2 An accordion component....413

13.2.3 A toast component....415

13.2.4 My solution....418

13.3 Future work....418

14 Project: Develop a word game in React....420

14.1 Building a game....420

14.2 Choose your ambition....421

14.3 Choose your stack....423

14.4 My implementation....424

14.5 Share your result....425

index....427

Symbols....427

Numerics....427

A....427

B....427

C....427

D....428

E....428

F....429

G....429

H....429

I....429

J....429

K....429

L....429

M....429

N....430

O....430

P....430

Q....430

R....430

S....431

T....431

U....432

V....432

W....432

X....432

Z....432

React in Depth - back....434

React in Depth teaches the React libraries, tools and techniques that are vital to build amazing apps. You’ll put each skill you learn into practice with hands-on projects like a goal-focused task manager, expenses tracker, and custom UI library.

In React in Depth you will learn how to:

• Assess technologies in the React ecosystem
• Implement advanced component patterns to improve React code
• Optimize React performance for a smooth user experience
• Use developer tooling for better code maintenance and debugging
• Work with TypeScript for type safety
• Use CSS in JavaScript for efficient styling
• Manage data in React, including remote data and reactive caching
• Unit test React components for quality assurance and bug prevention
• Use popular React frameworks for building production-ready applications

React in Depth focuses on the modern best practices of React development, with full and up-to-date coverage of the latest features and changes to the React ecosystem. This book highlights the advanced techniques that turn a React pro into a React wizard, and how you can future-proof your career by mastering new React technologies as they emerge.

About the technology

What does knowing React in depth mean? It means writing clean, modular code that you can test and refactor. It means applying design patterns and architectural principles to real-world problems. It means collaborating effectively with other developers and harnessing the power of React’s rich ecosystem. That’s exactly what this book delivers!

About the book

React in Depth teaches you the best practices of React development, with up-to-date coverage of the React ecosystem. In it, you’ll learn how to put NextJS, Remix, TypeScript, and more in your React toolbox. You’ll explore advanced topics like component patterns, optimization techniques, and developer tooling. Along the way, you’ll collect pro tips for creating applications that can scale without sacrificing performance or stability. Each skill is proven with hands-on examples, from a weather app to a Wordle clone.

What's inside

• Optimize React performance
• Use CSS in JavaScript
• Manage data in React
• Unit test React components

About the reader

For web developers familiar with the basics of React.