React Cookbook
by David Griffiths and Dawn Griffiths
Copyright 2021 Dawn Griffiths and David Griffiths. All rights reserved.
Printed in the United States of America.
Published by OReilly Media, Inc. , 1005 Gravenstein Highway North, Sebastopol, CA 95472.
OReilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .
- Acquisitions Editor: Amanda Quinn
- Development Editor: Corbin Collins
- Production Editor: Kate Galloway
- Copyeditor: Kim Wimpsett
- Proofreader: Kim Sandoval
- Indexer: Ellen Troutman-Zaig
- Interior Designer: David Futato
- Cover Designer: Karen Montgomery
- Illustrator: Kate Dullea
- August 2021: First Edition
Revision History for the First Edition
- 2021-08-11: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781492085843 for release details.
The OReilly logo is a registered trademark of OReilly Media, Inc. React Cookbook, the cover image, and related trade dress are trademarks of OReilly Media, Inc.
The views expressed in this work are those of the authors, and do not represent the publishers views. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
978-1-492-08584-3
[LSI]
Preface
This book contains a collection of code that weve found helpful over several years of building React applications. Like recipes you would use in the kitchen, weve designed them to be starting points or inspirations for your own code. You should adjust them to match your situation and replace any ingredients (such as example servers) with those that seem more appropriate for your needs.The recipes range from general web development tips to larger pieces of code that you could generalize into libraries.
Most of the recipes are built with Create React App, as this is now the common starting point for most React projects. It should be straightforward to convert each recipe for use in Preact or Gatsby.
To keep the code compact, we have generally used hooks and functions rather than class components. We have also used the Prettier tool to apply standard code formatting throughout. We have used Prettiers default options, other than narrower indents and line lengths, to fit the code neatly onto the printed page. You should adjust the code format to match your preferred standard.
We have used many libraries in the creation of these recipes:
Tool/library | Description | Versions |
---|
Apollo Client | GraphQL client | 3.3.19 |
axios | HTTP library | 0.21.1 |
chai | Unit test support library | 4.3.0 |
chromedriver | Browser automation tool | 88.0.0 |
Create React App | Tool for generating React apps | 4.0.3 |
Cypress | Automated test system | 7.3.0 |
Cypress Axe | Automated accessibility testing | 0.12.2 |
Gatsby | Tool for generating React apps | 3.4.1 |
GraphQL | API query language | 15.5.0 |
jsx-a11y | ESLint plugin for accessibility | 6.4.1 |
Material-UI | Component library | 4.11.4 |
Node | JavaScript runtime | v12.20.0 |
npm | The Node package manager | 6.14.8 |
nvm | Tool for running multiple Node environments | 0.33.2 |
nwb | Tool for generating React apps | 0.25.x |
Next.js | Tool for generating React apps | 10.2.0 |
Preact | Lightweight React-like framework | 10.3.2 |
Preact Custom Elements | Library to create custom elements | 4.2.1 |
preset-create-react-app | Storybook plugin | 3.1.7 |
Rails | Web development framework | 6.0.3.7 |
Razzle | Tool for generating React apps | 4.0.4 |
React | Web framework | 17.0.2 |
React Media | Media queries in React code | 1.10.0 |
React Router (DOM) | Library for managing React routes | 5.2.0 |
React Testing Library | Unit testing library for React | 11.1.0 |
react-animations | React CSS animation library | 1.0.0 |
React Focus Lock | Library to capture keyboard focus | 2.5.0 |
react-md-editor | Markdown editor | 3.3.6 |
React-Redux | React support library for Redux | 7.2.2 |
Redux | State management library | 4.0.5 |
Redux-Persist | Library to store Redux state | 6.0.0 |
Ruby | Language used by Rails | 2.7.0p0 |
selenium-webdriver | Browser testing framework | 4.0.0-beta.1 |
Storybook | Component gallery system | 6.2.9 |
TweenOne | React animation library | 2.7.3 |
Typescript | Type-safe extension to JavaScript | 4.1.2 |
Webpacker | Tool for adding React to Rails apps | 4.3.0 |
Workbox | Library to create service workers | 5.1.3 |
Yarn | Another Node package manager | 1.22.10 |
Conventions Used in This Book
The following typographical conventions are used in this book:
ItalicIndicates new terms, URLs, email addresses, filenames, and file extensions.
Constant width
Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.