book

React Cookbook

by David Griffiths, Dawn Griffiths

August 2021

Intermediate to advanced

510 pages

11h 2m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Preface
Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
1. Creating Applications
1.1. Generate a Simple Application1.2. Build Content-Rich Apps with Gatsby1.3. Build Universal Apps with Razzle1.4. Manage Server and Client Code with Next.js1.5. Create a Tiny App with Preact1.6. Build Libraries with nwb1.7. Add React to Rails with Webpacker1.8. Create Custom Elements with Preact1.9. Use Storybook for Component Development1.10. Test Your Code in a Browser with Cypress
2. Routing
2.1. Create Interfaces with Responsive Routes2.2. Move State into Routes2.3. Use MemoryRouter for Unit Testing2.4. Use Prompt for Page Exit Confirmations2.5. Create Transitions with React Transition Group2.6. Create Secured Routes
3. Managing State
3.1. Use Reducers to Manage Complex State3.2. Create an Undo Feature3.3. Create and Validate Forms3.4. Measure Time with a Clock3.5. Monitor Online Status3.6. Manage Global State with Redux3.7. Survive Page Reloads with Redux Persist3.8. Calculate Derived State with Reselect
4. Interaction Design
4.1. Build a Centralized Error Handler4.2. Create an Interactive Help Guide4.3. Use Reducers for Complex Interactions4.4. Add Keyboard Interaction4.5. Use Markdown for Rich Content4.6. Animate with CSS Classes4.7. Animate with React Animation4.8. Animate Infographics with TweenOne
5. Connecting to Services
5.1. Convert Network Calls to Hooks5.2. Refresh Automatically with State Counters5.3. Cancel Network Requests with Tokens5.4. Make Network Calls with Redux Middleware5.5. Connect to GraphQL5.6. Reduce Network Load with Debounced Requests
6. Component Libraries
6.1. Use Material Design with Material-UI6.2. Create a Simple UI with React Bootstrap6.3. View Data Sets with React Window6.4. Create Responsive Dialogs with Material-UI6.5. Build an Admin Console with React Admin6.6. No Designer? Use Semantic UI
7. Security
7.1. Secure Requests, Not Routes7.2. Authenticate with Physical Tokens7.3. Enable HTTPS7.4. Authenticate with Fingerprints7.5. Use Confirmation Logins7.6. Use Single-Factor Authentication7.7. Test on an Android Device7.8. Check Security with ESlint7.9. Make Login Forms Browser Friendly
8. Testing
8.1. Use the React Testing Library8.2. Use Storybook for Render Tests8.3. Test Without a Server Using Cypress8.4. Use Cypress for Offline Testing8.5. Test in a Browser with Selenium8.6. Test Cross-Browser Visuals with ImageMagick8.7. Add a Console to Mobile Browsers8.8. Remove Randomness from Tests8.9. Time Travel
9. Accessibility
9.1. Use Landmarks9.2. Apply Roles, Alts, and Titles9.3. Check Accessibility with ESlint9.4. Use Axe DevTools at Runtime9.5. Automate Browser Testing with Cypress Axe9.6. Add Skip Buttons9.7. Add Skip Regions9.8. Capture Scope in Modals9.9. Create a Page Reader with the Speech API

10. Performance
10.1. Use Browser Performance Tools10.2. Track Rendering with Profiler10.3. Create Profiler Unit Tests10.4. Measure Time Precisely10.5. Shrink Your App with Code Splitting10.6. Combine Network Promises10.7. Use Server-Side Rendering10.8. Use Web Vitals
11. Progressive Web Applications
11.1. Create Service Workers with Workbox11.2. Build a PWA with Create React App11.3. Cache Third-Party Resources11.4. Automatically Reload Workers11.5. Add Notifications11.6. Make Offline Changes with Background Sync11.7. Add a Custom Installation UI11.8. Provide Offline Responses
Index
About the Authors

Content preview from React Cookbook

Chapter 2. Routing

This chapter looks at recipes using React routes and the react-router-dom library.

react-router-dom uses declarative routing, which means you treat routes as you would any other React component. Unlike buttons, text fields, and blocks of text, React routes have no visual appearance. But in most other ways, they are similar to buttons and blocks of text. Routes live in the virtual DOM tree of components. They listen for changes in the current browser location and allow you to switch on and switch off parts of the interface. They are what give SPAs the appearance of multipage applications.

Used well, they can make your application feel like any other website. Users will be able to bookmark sections of your application, as they might bookmark a page from Wikipedia. They can go backward and forward in their browser history, and your interface will behave properly. If you are new to React, then it is well worth your time to look deeply into the power of routing.

2.1 Create Interfaces with Responsive Routes

Problem

People use most applications on both mobile and laptop computers, which means you probably want your React application to work well across all screen sizes. Making your application responsive involves relatively simple CSS changes to adjust the sizing of text and screen layout, and more substantial changes, which can give mobile and desktop users very different experiences when navigating around your site.

Our example application shows the names and addresses ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781492085836Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design