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

Overview

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.

Quotes
Invaluable! Transforms React novices into confident, job-ready developers.
- Theo Despoudis, WP Engine

Complete, up-to-date, and practical.
- Adam Wan, NEXPLORE

Actionable knowledge on the essential tools of the React ecosystem.
- Sankaranarayanan Murugan, NatWest Group

The TypeScript chapter alone is worth getting this book.
- Jose Alberto Reyes Quevedo, Cox Automotive

You will learn something new no matter how long you have been developing in React.
- Amarjit Bhandal, Australian Super

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