React Cookbook: Recipes for Mastering the React Framework

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