book

React Cookbook

by David Griffiths, Dawn Griffiths

August 2021

Intermediate to advanced

510 pages

11h 2m

English

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
1.1. Generate a Simple Application1.2. Build Content-Rich Apps with Gatsby1.3. Build Universal Apps with Razzle1.4. Manage Server and Client Code with Next.js1.5. Create a Tiny App with Preact1.6. Build Libraries with nwb1.7. Add React to Rails with Webpacker1.8. Create Custom Elements with Preact1.9. Use Storybook for Component Development1.10. Test Your Code in a Browser with Cypress
2.1. Create Interfaces with Responsive Routes2.2. Move State into Routes2.3. Use MemoryRouter for Unit Testing2.4. Use Prompt for Page Exit Confirmations2.5. Create Transitions with React Transition Group2.6. Create Secured Routes
3.1. Use Reducers to Manage Complex State3.2. Create an Undo Feature3.3. Create and Validate Forms3.4. Measure Time with a Clock3.5. Monitor Online Status3.6. Manage Global State with Redux3.7. Survive Page Reloads with Redux Persist3.8. Calculate Derived State with Reselect
4.1. Build a Centralized Error Handler4.2. Create an Interactive Help Guide4.3. Use Reducers for Complex Interactions4.4. Add Keyboard Interaction4.5. Use Markdown for Rich Content4.6. Animate with CSS Classes4.7. Animate with React Animation4.8. Animate Infographics with TweenOne
5.1. Convert Network Calls to Hooks5.2. Refresh Automatically with State Counters5.3. Cancel Network Requests with Tokens5.4. Make Network Calls with Redux Middleware5.5. Connect to GraphQL5.6. Reduce Network Load with Debounced Requests
6.1. Use Material Design with Material-UI6.2. Create a Simple UI with React Bootstrap6.3. View Data Sets with React Window6.4. Create Responsive Dialogs with Material-UI6.5. Build an Admin Console with React Admin6.6. No Designer? Use Semantic UI
7.1. Secure Requests, Not Routes7.2. Authenticate with Physical Tokens7.3. Enable HTTPS7.4. Authenticate with Fingerprints7.5. Use Confirmation Logins7.6. Use Single-Factor Authentication7.7. Test on an Android Device7.8. Check Security with ESlint7.9. Make Login Forms Browser Friendly
8.1. Use the React Testing Library8.2. Use Storybook for Render Tests8.3. Test Without a Server Using Cypress8.4. Use Cypress for Offline Testing8.5. Test in a Browser with Selenium8.6. Test Cross-Browser Visuals with ImageMagick8.7. Add a Console to Mobile Browsers8.8. Remove Randomness from Tests8.9. Time Travel
9.1. Use Landmarks9.2. Apply Roles, Alts, and Titles9.3. Check Accessibility with ESlint9.4. Use Axe DevTools at Runtime9.5. Automate Browser Testing with Cypress Axe9.6. Add Skip Buttons9.7. Add Skip Regions9.8. Capture Scope in Modals9.9. Create a Page Reader with the Speech API

10.1. Use Browser Performance Tools10.2. Track Rendering with Profiler10.3. Create Profiler Unit Tests10.4. Measure Time Precisely10.5. Shrink Your App with Code Splitting10.6. Combine Network Promises10.7. Use Server-Side Rendering10.8. Use Web Vitals
11.1. Create Service Workers with Workbox11.2. Build a PWA with Create React App11.3. Cache Third-Party Resources11.4. Automatically Reload Workers11.5. Add Notifications11.6. Make Offline Changes with Background Sync11.7. Add a Custom Installation UI11.8. Provide Offline Responses

Overview

React helps you create and work on an app in just a few minutes. But learning how to put all the pieces together is hard. How do you validate a form? Or implement a complex multistep user action without writing messy code? How do you test your code? Make it reusable? Wire it to a backend? Keep it easy to understand? The React Cookbook delivers answers fast.

Many books teach you how to get started, understand the framework, or use a component library with React, but very few provide examples to help you solve particular problems. This easy-to-use cookbook includes the example code developers need to unravel the most common problems when using React, categorized by topic area and problem.

You'll learn how to:

Build a single-page application in React using a rich UI
Create progressive web applications that users can install and work with offline
Integrate with backend services such as REST and GraphQL
Automatically test for accessibility problems in your application
Secure applications with fingerprints and security tokens using WebAuthn
Deal with bugs and avoid common functional and performance problems