book

React Cookbook

by David Griffiths, Dawn Griffiths

August 2021

Intermediate to advanced

510 pages

11h 2m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Preface
Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
1. Creating Applications
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. Routing
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. Managing State
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. Interaction Design
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. Connecting to Services
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. Component Libraries
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. Security
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. Testing
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. Accessibility
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. Performance
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. Progressive Web Applications
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
Index
About the Authors

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

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: 9781492085836Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills