React in Depth

A guide to the advanced React skills used by the very best React developers. 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. About the author Morten Barklund works as a staff fullstack engineer at Corti, a leading AI healthtech startup. 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