React Cookbook: Recipes for Mastering the React Framework

✍ Scribed by David Griffiths, Dawn Griffiths

• Publisher: O'Reilly Media
• Year: 2021
• Tongue: English
• Leaves: 513
• Edition: 1
• Category: Library

✦ Synopsis

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

✦ Table of Contents

Cover
Copyright
Table of Contents
Preface
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Chapter 1. Creating Applications
1.1 Generate a Simple Application
Problem
Solution
Discussion
1.2 Build Content-Rich Apps with Gatsby
Problem
Solution
Discussion
1.3 Build Universal Apps with Razzle
Problem
Solution
Discussion
1.4 Manage Server and Client Code with Next.js
Problem
Solution
Discussion
1.5 Create a Tiny App with Preact
Problem
Solution
Discussion
1.6 Build Libraries with nwb
Problem
Solution
Discussion
1.7 Add React to Rails with Webpacker
Problem
Solution
Discussion
1.8 Create Custom Elements with Preact
Problem
Solution
Discussion
1.9 Use Storybook for Component Development
Problem
Solution
Discussion
1.10 Test Your Code in a Browser with Cypress
Problem
Solution
Discussion
Chapter 2. Routing
2.1 Create Interfaces with Responsive Routes
Problem
Solution
Discussion
2.2 Move State into Routes
Problem
Solution
Discussion
2.3 Use MemoryRouter for Unit Testing
Problem
Solution
Discussion
2.4 Use Prompt for Page Exit Confirmations
Problem
Solution
Discussion
2.5 Create Transitions with React Transition Group
Problem
Solution
Discussion
2.6 Create Secured Routes
Problem
Solution
Discussion
Chapter 3. Managing State
3.1 Use Reducers to Manage Complex State
Problem
Solution
Discussion
3.2 Create an Undo Feature
Problem
Solution
Discussion
3.3 Create and Validate Forms
Problem
Solution
Discussion
3.4 Measure Time with a Clock
Problem
Solution
Discussion
3.5 Monitor Online Status
Problem
Solution
Discussion
3.6 Manage Global State with Redux
Problem
Solution
Discussion
3.7 Survive Page Reloads with Redux Persist
Problem
Solution
Discussion
3.8 Calculate Derived State with Reselect
Problem
Solution
Discussion
Chapter 4. Interaction Design
4.1 Build a Centralized Error Handler
Problem
Solution
Discussion
4.2 Create an Interactive Help Guide
Problem
Solution
Discussion
4.3 Use Reducers for Complex Interactions
Problem
Solution
Discussion
4.4 Add Keyboard Interaction
Problem
Solution
Discussion
4.5 Use Markdown for Rich Content
Problem
Solution
Discussion
4.6 Animate with CSS Classes
Problem
Solution
Discussion
4.7 Animate with React Animation
Problem
Solution
Discussion
4.8 Animate Infographics with TweenOne
Problem
Solution
Discussion
Chapter 5. Connecting to Services
5.1 Convert Network Calls to Hooks
Problem
Solution
Discussion
5.2 Refresh Automatically with State Counters
Problem
Solution
Discussion
5.3 Cancel Network Requests with Tokens
Problem
Solution
Discussion
5.4 Make Network Calls with Redux Middleware
Problem
Solution
Discussion
5.5 Connect to GraphQL
Problem
Solution
Discussion
5.6 Reduce Network Load with Debounced Requests
Problem
Solution
Discussion
Chapter 6. Component Libraries
6.1 Use Material Design with Material-UI
Problem
Solution
Discussion
6.2 Create a Simple UI with React Bootstrap
Problem
Solution
Discussion
6.3 View Data Sets with React Window
Problem
Solution
Discussion
6.4 Create Responsive Dialogs with Material-UI
Problem
Solution
Discussion
6.5 Build an Admin Console with React Admin
Problem
Solution
Discussion
6.6 No Designer? Use Semantic UI
Problem
Solution
Discussion
Chapter 7. Security
7.1 Secure Requests, Not Routes
Problem
Solution
Discussion
7.2 Authenticate with Physical Tokens
Problem
Solution
Discussion
7.3 Enable HTTPS
Problem
Solution
Discussion
7.4 Authenticate with Fingerprints
Problem
Solution
Discussion
7.5 Use Confirmation Logins
Problem
Solution
Discussion
7.6 Use Single-Factor Authentication
Problem
Solution
Discussion
7.7 Test on an Android Device
Problem
Solution
Discussion
7.8 Check Security with ESlint
Problem
Solution
Discussion
7.9 Make Login Forms Browser Friendly
Problem
Solution
Discussion
Chapter 8. Testing
8.1 Use the React Testing Library
Problem
Solution
Discussion
8.2 Use Storybook for Render Tests
Problem
Solution
Discussion
8.3 Test Without a Server Using Cypress
Problem
Solution
Discussion
8.4 Use Cypress for Offline Testing
Problem
Solution
Discussion
8.5 Test in a Browser with Selenium
Problem
Solution
Discussion
8.6 Test Cross-Browser Visuals with ImageMagick
Problem
Solution
Discussion
8.7 Add a Console to Mobile Browsers
Problem
Solution
Discussion
8.8 Remove Randomness from Tests
Problem
Solution
Discussion
8.9 Time Travel
Problem
Solution
Discussion
Chapter 9. Accessibility
9.1 Use Landmarks
Problem
Solution
Discussion
9.2 Apply Roles, Alts, and Titles
Problem
Solution
Discussion
9.3 Check Accessibility with ESlint
Problem
Solution
Discussion
9.4 Use Axe DevTools at Runtime
Problem
Solution
Discussion
9.5 Automate Browser Testing with Cypress Axe
Problem
Solution
Discussion
9.6 Add Skip Buttons
Problem
Solution
Discussion
9.7 Add Skip Regions
Problem
Solution
Discussion
9.8 Capture Scope in Modals
Problem
Solution
Discussion
9.9 Create a Page Reader with the Speech API
Problem
Solution
Discussion
Chapter 10. Performance
10.1 Use Browser Performance Tools
Problem
Solution
Discussion
10.2 Track Rendering with Profiler
Problem
Solution
Discussion
10.3 Create Profiler Unit Tests
Problem
Solution
Discussion
10.4 Measure Time Precisely
Problem
Solution
Discussion
10.5 Shrink Your App with Code Splitting
Problem
Solution
Discussion
10.6 Combine Network Promises
Problem
Solution
Discussion
10.7 Use Server-Side Rendering
Problem
Solution
Discussion
10.8 Use Web Vitals
Problem
Solution
Discussion
Chapter 11. Progressive Web Applications
11.1 Create Service Workers with Workbox
Problem
Solution
Discussion
11.2 Build a PWA with Create React App
Problem
Solution
Discussion
11.3 Cache Third-Party Resources
Problem
Solution
Discussion
11.4 Automatically Reload Workers
Problem
Solution
Discussion
11.5 Add Notifications
Problem
Solution
Discussion
11.6 Make Offline Changes with Background Sync
Problem
Solution
Discussion
11.7 Add a Custom Installation UI
Problem
Solution
Discussion
11.8 Provide Offline Responses
Problem
Solution
Discussion
Index
About the Authors