Skip to content

React Recipes

Note: Some of these articles are from the class-based component era of React.js development. The introduction of Hooks has radically changed how one writes React code, and the official React documentation has been reorganized around a hooks-first approach. I haven’t had the chance to update all of the content.


This guide contains some tried-and-tested ways to work with React that I picked up along the way, and in-depth explanations of how certain aspects of the library work.

The articles assume you have a bit of experience with React, and that you've set it up to use JSX and modern JavaScript features, such as classes and modules. These require a bit of initial setup and although they're not 100% necessary, forgoing JSX and ES6 modules makes for a less-than-stellar development experience. Check out Setting up shop for a quick way to get started on a React project with all the goodness baked in.

I mostly discuss the plain React API. Some articles do however point to useful libraries and tools when they're easy to pick up and don't introduce too many new concepts. The articles rarely touch on aspects of React style, such as naming, indentation, using arrow functions, et cetera. You can enforce a consistent style in your project with Prettier, and supplement it with the Airbnb React/JSX Style Guide.

Table of contents

First steps

This section is about getting started with React. I hope to expand this section with more introductory articles.

Mental models

Life inside a component

This section is about how to build strong React components.

Class components

Function components


Notes on the various hooks available in React.

Built-in hooks
Custom hooks

The component and the outside world

This section discusses how our component can interact with things outside its boundaries.

How components talk to each other

In this section we explore some patterns of communication between components, and how to combine them like Lego bricks to build up our app.

Passing data to children

Passing children to components is one of the basic ways to compose our application's element tree. A component that receives children it knows little about may want to share information with them nonetheless. The React API affords a few related methods to do that.

Special-purpose components

The React API allows us to write some useful generic components for our app.


Further reading

The official React website has comprehensive guides, tutorials, and links to useful tools. React has one of the best documentations around. Spend a fortnight reading the guides cover to cover and you'll get a much firmer grasp on how to use React efficiently.

On his Overreacted blog, Dan Abramov goes on interesting deep-dives into how React works under the hood.

Then there are other React pattern repositories you might find interesting:

Finally, some assorted articles from around the web: