book

React Cookbook

by David Griffiths, Dawn Griffiths

August 2021

Intermediate to advanced

510 pages

11h 2m

English

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Conventions Used in This BookUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgments
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.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.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.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.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.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.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.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.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.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.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

Content preview from React Cookbook

Chapter 1. Creating Applications

React is a surprisingly adaptable development framework. Developers use it to create large JavaScript-heavy Single-Page Applications (SPAs) or to build surprisingly small plug-ins. You can use it to embed code inside a Rails application or generate a content-rich website.

In this chapter, we look at the various ways of creating a React application. We also look at some of the more valuable tools you might want to add to your development cycle. Few people now create their JavaScript projects from scratch. Doing so is a tedious process, involving an uncomfortable amount of tinkering and configuration. The good news is that you can use a tool to generate the code you need in almost every case.

Let’s take a whistle-stop tour of the many ways of starting your React journey, beginning with the one most frequently used: create-react-app.

1.1 Generate a Simple Application

Problem

React projects are challenging to create and configure from scratch. Not only are there numerous design choices to make—which libraries to include, which tools to use, which language features to enable—but manually created applications will, by their nature, differ from one another. Project idiosyncrasies increase the time it takes a new developer to become productive.

Solution

create-react-app is a tool for building SPAs with a standard structure and a good set of default options. Generated projects use the React Scripts library to build, test, and run the code. Projects ...