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