React Cookbook: Recipes for Mastering the React Framework

Description

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 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