book

React in Depth

Name: React in Depth
Author: Morten Barklund
ISBN: 9781633437340

by Morten Barklund

August 2024

Intermediate to advanced

432 pages

12h 35m

English

Manning Publications

Read now

Unlock full access

copyright
contents
React in Depth
dedication
preface
acknowledgments
about this book
about the author
about the cover illustration
1 Developer’s guide to the React Ecosystem
1.1 Navigating the React mastery journey1.2 Why a book on React mastery?1.3 How does this book teach React mastery?1.4 The React ecosystem1.4.1 What’s in the ecosystem?1.4.2 Navigating the ecosystem1.5 The technology stack1.5.1 Why do we talk about a tech stack?1.5.2 Viewing the anatomy of a React stack1.5.3 Joining a project1.5.4 Creating a stack from scratch

2 Advanced component patterns
2.1 The Provider pattern2.1.1 Inventing a provider2.1.2 Creating a dedicated provider component2.1.3 Avoiding rendering everything2.1.4 Creating beautifully typed selectable contexts with the recontextual tool2.1.5 How useful is the Provider pattern?2.2 The Composite pattern2.2.1 The simple beginnings2.2.2 Complexity increases2.2.3 The ideal JSX2.2.4 Implementation with composite components2.2.5 How useful is the Composite pattern?2.3 The Summary pattern2.3.1 A single custom hook2.3.2 Better results with more complexity2.3.3 Multiple hooks required2.3.4 How useful is the Summary pattern?
3 Optimizing React performance
3.1 Understanding React rendering3.1.1 Changing properties is irrelevant3.1.2 Repeated function calls in Strict Mode while in development3.2 Optimizing performance by minimizing re-rendering3.2.1 Memoize a component3.2.2 Memoize part of a component3.2.3 Memoize properties to memoized components3.2.4 Memoization hooks in detail3.3 Understanding dependency arrays3.3.1 What are dependencies?3.3.2 Run on every render by skipping the dependency array3.3.3 Skip stable variables from dependencies3.3.4 Get help maintaining dependency arrays
4 Better code maintenance with developer tooling
4.1 Reducing errors with linting4.1.1 Problems solved by ESLint4.1.2 ESLint configurations4.1.3 How to get started using ESLint4.2 Increasing productivity with formatters4.2.1 Problems solved by Prettier4.2.2 Nonstandard rules with Prettier configuration4.2.3 How to start using Prettier4.2.4 Alternative formatters4.3 Making components more robust with property constraints4.3.1 How to apply property types4.3.2 Drawbacks of using property types4.3.3 Default property values4.3.4 How to get started using property types4.4 Debugging applications with React Developer Tools4.4.1 Problems solved by debugging4.4.2 How to get started using React Developer Tools4.4.3 Using the components inspector in React Developer Tools4.4.4 Using the profiler in React Developer Tools4.4.5 Alternatives and other tools
5 TypeScript: Next-level JavaScript
5.1 The importance of TypeScript5.2 Introduction to TypeScript5.2.1 TypeScript files and React5.2.2 Static types5.2.3 Employee display5.2.4 Optional properties5.3 Advanced TypeScript with generics5.3.1 Understanding generic types5.3.2 Typing children5.3.3 Extending interfaces5.3.4 Spreading props in general5.3.5 Restricting and loosening types5.3.6 Using optional and required properties5.3.7 Using either/or properties5.3.8 Forwarding refs
6 Mastering TypeScript with React
6.1 Using React hooks in TypeScript6.1.1 Typing useState6.1.2 Typing useRef6.1.3 Typing contexts and useContext6.1.4 Typing effects6.1.5 Typing reducers6.1.6 Typing memoization hooks6.1.7 Typing the remaining hooks6.2 Generic pagination: An example6.2.1 Forwarding a reference to a generic component6.2.2 Memoizing a generic component6.3 Drawbacks of using TypeScript6.4 TypeScript resources
7 CSS in JavaScript
7.1 Styling with concerns7.1.1 CSS language features7.1.2 Developer experience7.1.3 Web application development7.1.4 Why not inline styles?7.1.5 What about existing UI libraries?7.2 The example button application7.3 Method 1: CSS files and class names7.3.1 How class names work7.3.2 Setup for class name project7.3.3 Implementation with class names7.3.4 Strengths of the class names approach7.3.5 Weaknesses of the class names approach7.3.6 When (not) to use CSS files and class names7.4 Method 2: CSS Modules7.4.1 How CSS Modules work7.4.2 Setup for CSS Modules project7.4.3 Source code with CSS Modules7.4.4 Strengths of CSS Modules7.4.5 Weaknesses of CSS Modules7.4.6 When (not) to use CSS Modules7.5 Method 3: Styled-components7.5.1 How styled-components works7.5.2 Setup for styled-components project7.5.3 Source code with styled-components7.5.4 Strengths of styled-components7.5.5 Weaknesses of styled-components7.5.6 When (not) to use styled-components7.6 One problem, infinite solutions
8 Data management in React
8.1 Creating a goal-tracking application8.2 Building the application architecture8.3 Managing data in pure React8.3.1 Context8.3.2 Source code8.4 Reducing data state8.4.1 Immer: Writing immutable code mutably8.4.2 Source code8.5 Scaling data management with Redux Toolkit8.5.1 How does Redux work?8.5.2 Source code8.6 Simplifying data management with zustand8.6.1 Zustand8.6.2 Source code8.7 Rethinking flow and data with XState8.7.1 A state machine for doing things8.7.2 Source code8.8 Data management recap
9 Remote data and reactive caching
9.1 Server complexity9.2 Adding a remote server to do goal tracking9.2.1 Adding signup and login9.2.2 Designing an API9.2.3 Rewriting the data layer9.2.4 Adding a loading indicator9.2.5 Putting everything together9.2.6 Evaluating the solution9.3 Migrating to TanStack Query9.3.1 TanStack Query architecture9.3.2 Queries and mutations9.3.3 Implementation9.3.4 Bonus side effects9.4 Reactive caching with TanStack Query9.4.1 Updating cache from a mutation9.4.2 Updating the cache optimistically9.4.3 Using partial data where available9.4.4 Hiding the loader if some data is available9.4.5 Putting it all together
10 Unit-testing React
10.1 Testing a static component10.1.1 Running tests10.1.2 Test file location10.1.3 Test resilience10.2 Testing interactive components10.2.1 Testing a stateful component10.2.2 Testing callbacks10.2.3 Testing a form10.2.4 Testing a hook10.3 Testing a component with dependencies10.3.1 Mocking the browser API10.3.2 Mocking a library10.3.3 Mocking a context
11 React website frameworks
11.1 What's a website framework?11.1.1 Fullstack React as a concept11.1.2 Rendering HTML on the server11.1.3 Dynamic content11.1.4 Hydration is necessary11.2 Implementations11.2.1 Next.js11.2.2 Remix11.2.3 Environment values and API keys11.3 Let's create a weather app!11.3.1 Using the URL11.3.2 Using data in a route11.3.3 Storing local data11.3.4 Creating an API11.4 Alternative React-based website frameworks
12 Project: Build an expense tracker with Remix
12.1 Creating the expense tracker12.1.1 Choosing your own adventure12.2 Starting from scratch12.2.1 Creating the basic visual framework12.2.2 Extending routes12.3 Adding the backend12.3.1 Extending the database12.3.2 Defining ORM wrappers12.3.3 Updating components12.3.4 Adding server-side data to routes12.4 Adding the frontend12.4.1 Form library12.4.2 Dashboard components12.4.3 Income component12.4.4 Expenses component12.4.5 Add-expense component12.5 Future work12.5.1 Showing error messages12.5.2 Editing and deleting objects12.5.3 Making the pie chart interactive12.5.4 Filtering, ordering, and paginating the expense list
13 Project: Create a React UI library
13.1 The existing stack13.1.1 Storybook: Visual testing13.1.2 Istanbul: Code coverage reporting13.2 Your new job: Extending the library13.2.1 A Switch component13.2.2 An accordion component13.2.3 A toast component13.2.4 My solution13.3 Future work
14 Project: Develop a word game in React
14.1 Building a game14.2 Choose your ambition14.3 Choose your stack14.4 My implementation14.5 Share your result

Content preview from React in Depth

14 Project: Develop a word game in React

This chapter covers

Solving a complex challenge by breaking it down
Choosing your own stack

This chapter is the end of the line, the big finale, the grand exam. It has been quite a journey, and we’ve covered a lot of ground. In this last challenge, you’ll be mostly on your own. I will help with some of the meta decisions on tackling the project, but I won’t discuss any code. But I have a lot of faith in you. You can do it! Go, team!

Note The source code for the example in this chapter is available at https://reactlikea.pro/ch14.

14.1 Building a game

You’ll be building a certain five-letter word-guessing game. You’ve probably heard of it. This game could end up looking like figure 14.1.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781633437340Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

React in Depth

by Morten Barklund