- Preface
- Conventions Used in This Book
- Using Code Examples
- O’Reilly Online Learning
- How to Contact Us
- Acknowledgments
- 1. Creating Applications
- Generate a Simple Application
- Problem
- Solution
- Discussion
- Build Content-Rich Apps with Gatsby
- Problem
- Solution
- Discussion
- Build Universal Apps with Razzle
- Problem
- Solution
- Discussion
- Manage Server and Client Code with Next.js
- Problem
- Solution
- Discussion
- Create a Tiny App with Preact
- Problem
- Solution
- Discussion
- Build Libraries with nwb
- Problem
- Solution
- Discussion
- Add React to Rails with Webpacker
- Problem
- Solution
- Discussion
- Create Custom Elements with Preact
- Problem
- Solution
- Discussion
- Use Storybook for Component Development
- Problem
- Solution
- Discussion
- Test Your Code in a Browser with Cypress
- Problem
- Solution
- Discussion
- 2. Routing
- Create Interfaces with Responsive Routes
- Problem
- Solution
- Discussion
- Move State into Routes
- Problem
- Solution
- Discussion
- Use MemoryRouter for Unit Testing
- Problem
- Solution
- Discussion
- Use Prompt for Page Exit Confirmations
- Problem
- Solution
- Discussion
- Create Transitions with React Transition Group
- Problem
- Solution
- Discussion
- Create Secured Routes
- Problem
- Solution
- Discussion
- 3. Managing State
- Use Reducers to Manage Complex State
- Problem
- Solution
- Discussion
- Create an Undo Feature
- Problem
- Solution
- Discussion
- Create and Validate Forms
- Problem
- Solution
- Discussion
- Measure Time with a Clock
- Problem
- Solution
- Discussion
- Monitor Online Status
- Problem
- Solution
- Discussion
- Manage Global State with Redux
- Problem
- Solution
- Discussion
- Survive Page Reloads with Redux Persist
- Problem
- Solution
- Discussion
- Calculate Derived State with Reselect
- Problem
- Solution
- Discussion
- 4. Interaction Design
- Build a Centralized Error Handler
- Problem
- Solution
- Discussion
- Create an Interactive Help Guide
- Problem
- Solution
- Discussion
- Use Reducers for Complex Interactions
- Problem
- Solution
- Discussion
- Add Keyboard Interaction
- Problem
- Solution
- Discussion
- Use Markdown for Rich Content
- Problem
- Solution
- Discussion
- Animate with CSS Classes
- Problem
- Solution
- Discussion
- Animate with React Animation
- Problem
- Solution
- Discussion
- Animate Infographics with TweenOne
- Problem
- Solution
- Discussion
- 5. Connecting to Services
- Convert Network Calls to Hooks
- Problem
- Solution
- Discussion
- Refresh Automatically with State Counters
- Problem
- Solution
- Discussion
- Cancel Network Requests with Tokens
- Problem
- Solution
- Discussion
- Make Network Calls with Redux Middleware
- Problem
- Solution
- Discussion
- Connect to GraphQL
- Problem
- Solution
- Discussion
- Reduce Network Load with Debounced Requests
- Problem
- Solution
- Discussion
- 6. Component Libraries
- Use Material Design with Material-UI
- Problem
- Solution
- Discussion
- Create a Simple UI with React Bootstrap
- Problem
- Solution
- Discussion
- View Data Sets with React Window
- Problem
- Solution
- Discussion
- Create Responsive Dialogs with Material-UI
- Problem
- Solution
- Discussion
- Build an Admin Console with React Admin
- Problem
- Solution
- Discussion
- No Designer? Use Semantic UI
- Problem
- Solution
- Discussion
- 7. Security
- Secure Requests, Not Routes
- Problem
- Solution
- Discussion
- Authenticate with Physical Tokens
- Problem
- Solution
- Discussion
- Enable HTTPS
- Problem
- Solution
- Discussion
- Authenticate with Fingerprints
- Problem
- Solution
- Discussion
- Use Confirmation Logins
- Problem
- Solution
- Discussion
- Use Single-Factor Authentication
- Problem
- Solution
- Discussion
- Test on an Android Device
- Problem
- Solution
- Discussion
- Check Security with ESlint
- Problem
- Solution
- Discussion
- Make Login Forms Browser Friendly
- Problem
- Solution
- Discussion
- 8. Testing
- Use the React Testing Library
- Problem
- Solution
- Discussion
- Use Storybook for Render Tests
- Problem
- Solution
- Discussion
- Test Without a Server Using Cypress
- Problem
- Solution
- Discussion
- Use Cypress for Offline Testing
- Problem
- Solution
- Discussion
- Test in a Browser with Selenium
- Problem
- Solution
- Discussion
- Test Cross-Browser Visuals with ImageMagick
- Problem
- Solution
- Discussion
- Add a Console to Mobile Browsers
- Problem
- Solution
- Discussion
- Remove Randomness from Tests
- Problem
- Solution
- Discussion
- Time Travel
- Problem
- Solution
- Discussion
- 9. Accessibility
- Use Landmarks
- Problem
- Solution
- Discussion
- Apply Roles, Alts, and Titles
- Problem
- Solution
- Discussion
- Check Accessibility with ESlint
- Problem
- Solution
- Discussion
- Use Axe DevTools at Runtime
- Problem
- Solution
- Discussion
- Automate Browser Testing with Cypress Axe
- Problem
- Solution
- Discussion
- Add Skip Buttons
- Problem
- Solution
- Discussion
- Add Skip Regions
- Problem
- Solution
- Discussion
- Capture Scope in Modals
- Problem
- Solution
- Discussion
- Create a Page Reader with the Speech API
- Problem
- Solution
- Discussion
- 10. Performance
- Use Browser Performance Tools
- Problem
- Solution
- Discussion
- Track Rendering with Profiler
- Problem
- Solution
- Discussion
- Create Profiler Unit Tests
- Problem
- Solution
- Discussion
- Measure Time Precisely
- Problem
- Solution
- Discussion
- Shrink Your App with Code Splitting
- Problem
- Solution
- Discussion
- Combine Network Promises
- Problem
- Solution
- Discussion
- Use Server-Side Rendering
- Problem
- Solution
- Discussion
- Use Web Vitals
- Problem
- Solution
- Discussion
- 11. Progressive Web Applications
- Create Service Workers with Workbox
- Problem
- Solution
- Discussion
- Build a PWA with Create React App
- Problem
- Solution
- Discussion
- Cache Third-Party Resources
- Problem
- Solution
- Discussion
- Automatically Reload Workers
- Problem
- Solution
- Discussion
- Add Notifications
- Problem
- Solution
- Discussion
- Make Offline Changes with Background Sync
- Problem
- Solution
- Discussion
- Add a Custom Installation UI
- Problem
- Solution
- Discussion
- Provide Offline Responses
- Problem
- Solution
- Discussion
- Index