React Cookbook: Recipes for Mastering the React Framework
510
React Cookbook: Recipes for Mastering the React Framework
510Paperback
-
PICK UP IN STORECheck Availability at Nearby Stores
Available within 2 business hours
Related collections and offers
Overview
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 |
| Sales rank: | 843,873 |
| Product dimensions: | 7.00(w) x 9.19(h) x 1.03(d) |
About the Author
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