React Cookbook: Recipes for Mastering the React Framework

by David Griffiths, Dawn Griffiths

Overview

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

Product Details

ISBN-13:	9781492085843
Publisher:	O'Reilly Media, Incorporated
Publication date:	09/14/2021
Pages:	510
Product dimensions:	7.00(w) x 9.19(h) x 1.03(d)

About the Author

David Griffiths has been writing code professionally in React for five years, and has created applications for startups, retail stores, vehicle manufacturers, national sports bodies and large software vendors. He has over 10 years experience in writing JavaScript.

Together, David and Dawn have written several books in the Head First Series, including Head First Android Development and Head First Kotlin, and delivered video courses for O’Reilly Media. They are the best people to write this book because they have an in-depth knowledge of the technology, and the experience to explain it concisely and clearly to the reader.

Dawn Griffiths has over 20 years experience working in the IT industry, working as a senior developer and senior software architect. She has written various books in the Head First series, including Head First Android Development (1e and 2e) and Head First Kotlin, and developed The Agile Sketchpad animated video series with David.

Table of Contents

Preface vii

1 Creating Applications 1

1.1 Generate a Simple Application 1

1.2 Build Content-Rich Apps with Gatsby 6

1.3 Build Universal Apps with Razzle 10

1.4 Manage Server and Client Code with Next.js 12

1.5 Create a Tiny App with Preact 14

1.6 Build Libraries with nwb 18

1.7 Add React to Rails with Webpacker 20

1.8 Create Custom Elements with Preact 22

1.9 Use Storybook for Component Development 26

1.10 Test Your Code in a Browser with Cypress 30

2 Routing 33

2.1 Create Interfaces with Responsive Routes 33

2.2 Move State into Routes 40

2.3 Use MemoryRouter for Unit Testing 45

2.4 Use Prompt for Page Exit Confirmations 48

2.5 Create Transitions with React Transition Group 55

2.6 Create Secured Routes 61

3 Managing State 67

3.1 Use Reducers to Manage Complex State 67

3.2 Create an Undo Feature 76

3.3 Create and Validate Forms 83

3.4 Measure Time with a Clock 91

3.5 Monitor Online Status 95

3.6 Manage Global State with Redux 97

3.7 Survive Page Reloads with Redux Persist 104

3.8 Calculate Derived State with Reselect 108

4 Interaction Design 113

4.1 Build a Centralized Error Handler 113

4.2 Create an Interactive Help Guide 118

4.3 Use Reducers for Complex Interactions 126

4.4 Add Keyboard Interaction 132

4.5 Use Markdown for Rich Content 135

4.6 Animate with CSS Classes 140

4.7 Animate with React Animation 143

4.8 Animate Infographics with TweenOne 148

5 Connecting to Services 155

5.1 Convert Network Calls to Hooks 155

5.2 Refresh Automatically with State Counters 162

5.3 Cancel Network Requests with Tokens 170

5.4 Make Network Calls with Redux Middleware 173

5.5 Connect to GraphQL 179

5.6 Reduce Network Load with Debounced Requests 187

6 Component Libraries 191

6.1 Use Material Design with Material-UI 192

6.2 Create a Simple UI with React Bootstrap 199

6.3 View Data Sets with React Window 203

6.4 Create Responsive Dialogs with Material-UI 205

6.5 Build an Admin Console with React Admin 208

6.6 No Designer? Use Semantic UI 215

7 Security 221

7.1 Secure Requests, Not Routes 221

7.2 Authenticate with Physical Tokens 230

7.3 Enable HTTPS 240

7.4 Authenticate with Fingerprints 244

7.5 Use Confirmation Logins 251

7.6 Use Single-Factor Authentication 257

7.7 Test on an Android Device 263

7.8 Check Security with ESlint 266

7.9 Make Login Forms Browser Friendly 269

8 Testing 273

8.1 Use the React Testing Library 274

8.2 Use Storybook for Render Tests 282

8.3 Test Without a Server Using Cypress 288

8.4 Use Cypress for Offline Testing 296

8.5 Test in a Browser with Selenium 300

8.6 Test Cross-Browser Visuals with ImageMagick 307

8.7 Add a Console to Mobile Browsers 315

8.8 Remove Randomness from Tests 320

8.9 Time Travel 323

9 Accessibility 331

9.1 Use Landmarks 332

9.2 Apply Roles, Alts, and Titles 337

9.3 Check Accessibility with ESlint 346

9.4 Use Axe DevTools at Runtime 351

9.5 Automate Browser Testing with Cypress Axe 356

9.6 Add Skip Buttons 360

9.7 Add Skip Regions 367

9.8 Capture Scope in Modals 375

9.9 Create a Page Reader with the Speech API 378

10 Performance 383

10.1 Use Browser Performance Tools 384

10.2 Track Rendering with Profiler 391

10.3 Create Profiler Unit Tests 397

10.4 Measure Time Precisely 401

10.5 Shrink Your App with Code Splitting 405

10.6 Combine Network Promises 412

10.7 Use Server-Side Rendering 415

10.8 Use Web Vitals 426

11 Progressive Web Applications 429

11.1 Create Service Workers with Workbox 430

11.2 Build a PWA with Create React App 446

11.3 Cache Third-Party Resources 449

11.4 Automatically Reload Workers 453

11.5 Add Notifications 458

11.6 Make Offline Changes with Background Sync 465

11.7 Add a Custom Installation UI 470

11.8 Provide Offline Responses 475

Index 481