This book contains a collection of code that we’ve found helpful over several years of building React applications. Like recipes you would use in the kitchen, we’ve 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 Prettier’s 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 |
The following typographical conventions are used in this book:
Indicates new terms, URLs, email addresses, filenames, and file extensions.
Constant widthUsed 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.
Constant width boldShows commands or other text that should be typed literally by the user.
Constant width italicShows text that should be replaced with user-supplied values or by values determined by context.
This element signifies a tip or suggestion.
This element signifies a general note.
This element indicates a warning or caution.
Supplemental material (code examples, exercises, etc.) is available for download at https://github.com/dogriffiths/ReactCookbook-source.
If you have a technical question or a problem using the code examples, please send email to bookquestions@oreilly.com.
This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.
We appreciate, but generally do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “React Cookbook by David Griffiths and Dawn Griffiths (O’Reilly). Copyright 2021 Dawn Griffiths and David Griffiths, 978-1-492-08584-3.”
If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com.
For more than 40 years, O’Reilly Media has provided technology and business training, knowledge, and insight to help companies succeed.
Our unique network of experts and innovators share their knowledge and expertise through books, articles, and our online learning platform. O’Reilly’s online learning platform gives you on-demand access to live training courses, in-depth learning paths, interactive coding environments, and a vast collection of text and video from O’Reilly and 200+ other publishers. For more information, visit http://oreilly.com.
Please address comments and questions concerning this book to the publisher:
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at https://oreil.ly/react-cb.
Email bookquestions@oreilly.com to comment or ask technical questions about this book.
For news and information about our books and courses, visit http://oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
We want to thank our very patient editor Corbin Collins for his help and advice over the past year. His calm, good humor has been a steadying influence during the writing process. We would also like to thank Amanda Quinn, senior contents acquisition editor at O’Reilly Media, for commissioning the book, and Danny Elfanbaum and the production team at O’Reilly for making the physical and electronic versions a reality.
Special thanks also to Sam Warner and Mark Hobson for their very rigorous review of the material in this book.
We are also grateful to the developers working on the many open source libraries that support the React ecosystem. We are grateful to them all, particularly for the speed at which they responded to bug reports or pleas for help.
If you find these recipes useful, it is primarily because of the work of these people. If you find errors in the code or the text, that is entirely our responsibility.