React Cookbook

React Cookbook

by David Griffiths, Dawn Griffiths
Released August 2021
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781492085843

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book 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

Table of contents

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

Product information

  • Title: React Cookbook
  • Author(s): David Griffiths, Dawn Griffiths
  • Release date: August 2021
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781492085843