This repository 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.
Finally, but most importantly, these articles reflect my current understanding of how React works. While I strive to give the clearest picture possible, some aspects may still be inaccurate, out of date, or just plain Bad Ideas. Sorry in advance, I'm trying my best! If you spot any errors or dubious claims, please let me know by filing an issue or a pull request.
This section is about getting started with React. I hope to expand this section with more introductory articles.
- Setting up shop walks you through setting up a React project with JSX and modern JavaScript without losing your soul in the process.
- Reading JSX as if it were JavaScript to get a clearer picture of how React works.
- Why immutability is important explains why you want to keep your data immutable when working with React.
This section is about how to build strong React components.
- Ways to define components walks you through the pros and cons of functional vs. class-based React components.
- Ways to use
defaultProps
to make your code clearer. - Using
propTypes
to ensure components receive what they expect. - Controlled, uncontrolled, and somewhere in between
- The component lifecycle describes the methods available on a class component, how they're invoked and what they're good at.
- Use the best
setState
style for the job when updating your component's state.
Notes on the various hooks available in React.
This section discusses how our component can interact with things outside its boundaries.
- Handling events outside the component the React way with the help of a small library.
- Rendering things outside the component with Portals.
- Embedding React components in an existing app shows how to turn some parts of your app over to React.
In this section we explore some patterns of communication between components, and how to combine them like Lego bricks to build up our app.
- How components talk to each other is an intro to how React components compose.
- The
property
pattern for callbacks helps you handle events more elegantly. - Passing React components via props outlines some component composition strategies.
- Passing props to
this.props.children
usingReact.Children.map
andReact.cloneElement
.
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.
- Passing data to children: an overview
- Extending children with
React.Children
andReact.cloneElement
- Higher-Order Components
- Render props
The React API allows us to write some useful generic components for our app.
- Error Boundaries will stop a component that crashed from breaking your whole app.
- An introduction to performance
- Making things simpler and faster with memoization
- Preventing useless updates with
React.PureComponent
andReact.memo
- The
useMemo
hook - Pure component caveats shows you some scenarios where you're better off not using
PureComponent
. why-did-you-update
is your new best friend that lets you know when your components are updating uselessly.- DOM Frugality:
React.Fragment
and returning arrays
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:
- React Tutorial: A Comprehensive Guide to learning React.js in 2018 by Tyler McGinnis
- Writing good component API by Siddharth Kshetrapal