React Component Patterns
- Thinking in React: Articles discussing ways to think about React applications and component structure
- React Implementation and Concepts: Includes articles that explain the differences between "components", "elements", and "instances"
- React Component Composition: Articles explaining ways to compose components, including Higher-Order Components, Function-as-Child / "render props", and other functional composition approaches
Component Terms, Concepts, and Types
An excellent list of common patterns for structuring React components, with examples
React Component Jargon as of August 2016
A very useful glossary of widely-used terms describing React components
React in Patterns
List of design patterns/techniques used while developing with React
Functional Components vs. Stateless Functional Components vs. Stateless Components
Clarifies the meaning of the terms, which are often used in overlapping ways.
Embracing Functions in React
A look at stateless functional components in React, and why they might be useful or should be considered in the first place.
Building User Interfaces with Pure Functions and Function Composition in React
A look at the idea of composing together UIs with simple components, with comparisons to the idea of combining functions together.
React Bits: React patterns, techniques, tips, and tricks
An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource.
Simple React Patterns
A clearly written set of examples that showcase common React component patterns like "container/presentational", "Higher-Order Components", "Function-as-Child" / "render props", and "providers".
React Component Patterns
A summary of common React component patterns with short examples.
10 React mini-patterns
Ten useful patterns for working with React components, including data flow, techniques for working with inputs, controlling CSS usage, switching between components, and more.
React Training: Advanced React - React Patterns
The lecture videos from React Training's "Advanced React" course. The videos themselves are now free. Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components.
The Common Patterns of React
A friendly visual overview of common React patterns like higher-order components, function-as-child, context, callbacks, container/presentational components, and compound components.
Component Definition Approach Comparisons
How to use Classes and Sleep at Night
Some pragmatic opinions on when and how to use the ES6 "class" keyword, particularly in relation to React components.
React Stateless Functional Components: Nine Wins You Might Have Overlooked
Thoughts on reasons why you might want to write more components using the functional syntax.
7 Reasons to Outlaw React's Functional Components
https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c The author of the "Nine Wins" post gives some counter-arguments on why you might want to prefer writing class components instead of functional components. Some good discussion in the comments.
How to declare React Components in 2017
A quick overview of the three ways to declare React components, and which ones should be preferred.
We Jumped the Gun Moving React Components to ES2015 Class Syntax
A Netflix engineer raises concerns about React deprecating
createClassand pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments.
Component Rendering Logic
Dynamically Rendering React Components
Examples of how to dynamically determine which React component to render
Loading State Trick for Stateless Functional Components in React
An example of conditionally rendering a spinner component if a list of items is empty
How to Dynamically Render React Components
A quick example of how to dynamically decide which component type to render
All the Conditional Renderings in React
Examples of all the possible ways to conditionally render components
"React render function organization"
My suggested approach for organizing render function logic for clarity and readability
Simplify complex React components with generators
An interesting alternative to the usual if/else-type logic for conditionally rendering components, by using ES6 generators to yield the right pieces to render.
React Component Children
Ownership and Children in React
Discusses the difference between "parent" and "owner" relationships, and what the
childrenprop can look like.
ReactCasts #3: React's Children API
A screencast demonstrating how the
childrenprop to compose components together
React.Children and the React Top-Level API
Overviews and examples of the
React.ChildrenAPIs, and how they can be used to manipulate component children
Send Props to Children in React
Examples of how to pass new props to child components using
A deep dive into children in React
An in-depth look at the power and capabilities of React's
childrenprop, and how children can be reused and modified. Includes several examples and demos.
The "Forwarded Refs" pattern
An example of the "forwarded refs" pattern, where a parent component passes a callback through one or more layers of children, it's used as a
refcallback, and the parent receives the nested DOM element reference directly.
React component composition cheatsheet
A useful list of ways to combine components together
Avoiding deeply nested component trees
childrento include arbitrary content inside of a component for more flexible handling of presentation and composition.
Tips on Creating Reusable Components
Examples of using
childrenand other props to make components more composable and reusable.
How to auto bind props using React elements
Examples of using the
React.ChildrenAPI to add additional props to child components
React Component Lifecycle
React Docs: Component Specs and Lifecycle
The official React docs page on component lifecycle
Understanding the React Component Lifecycle
A good look at which lifecycle methods run in which situations, as well as the signatures of each method.
Dissecting React Lifecycle Methods
Breaks the lifecycle methods down into "mount/unmount" and "update" categories, and describes the purpose and use of each.
The React Component Lifecycle
Another useful description of the order and purpose of the lifecycle methods.
Understanding React - Component life-cycle
An extensive description of the various React lifecycle methods, and how you should and shouldn't use them.
An interactive set of simulators for React components that let you step through a component's lifecycle and watch how state and props respond to actions over time.
React In-Depth: The React Life Cycle
A deep dive into the lifecycle methods, and various techniques for using them.
React Lifecycle Cheatsheet
A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method
React Lifecycle Methods - how and when to use them
A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call
Revisiting use of React's Component Lifecycles in Anticipation of Async Rendering
An informative look at how async rendering in React 16+ might impact current use of lifecycle methods for behavior.
8 no-Flux strategies for React component communication
Very helpful list of ways to have React components communicate back and forth
How to communicate between React components
Another good list of component communication strategies
How React Components Communicate
A careful tutorial-based explanation of how to communicate between parent and child components.
How to handle React context in a reliable way
Covers what the
contextfeature is, how to use it, and some concerns to be aware of.
How to safely use React context
Guidelines for when and how to actually use React's
Context All the Things with React
A talk on what
contextis, and how to use it safely
ReactCasts #4-5: Context (Parts 1 and 2)
A two-part series explaining what React's
contextfeature can be used for, and some potential concerns to be aware of when using it.
React Context and Component Coupling
Discussion on the pros and cons of using
contextto pass data between components, and some examples of how to do so
Higher Order With Context
https://dev.to/kayis/higher-order-components-and-context-example Examples of using Higher Order Components to pass data to nested components using
Context in React Applications
An overview of what
contextis, how it works, and when you should use it for passing data
Callback functions in React
Some basic explanations of how a React app uses callback functions to communicate from children to parents
How to use React's Provider pattern
Walks through the concepts and implementation of a "Provider" component that makes data available to deeply nested children, similar to the ones that come with Redux and MobX
Passing Data Between React Components
Some short examples of how to pass data between parents, children, and siblings.
How to structure components in React?
Compares multiple ways to pass data from a parent to a child, including no props, passing a value object, passing required props, passing a map of props, and using
Slides from Ken Wheeler's ReactBoston talk on React's
contextfeature. Covers what context is, why you might want to use it, and when/ how to use it/
React's new Context API
Kent C Dodds digs into the new
contextAPI that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using
Presentational and Container Components
Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
"People are reading way too much into 'presentational' vs 'container'"
Dan Abramov follows up his article by emphasizing that "presentational" and "container" was just a pattern he had noticed, rather than an approach that must be followed
Leveling Up with React: Container Components
Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data.
Smart and Dumb Components in React
Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts.
Ramblings About React and Redux Architecture
Thoughts on structuring components as "Providers", "Behavior", and "Presentational"
The Anatomy of a React Redux App
Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up
React and Flux in Production Best Practices
Delve's practice of describing components as "containers", "smart", and "dumb"
Content vs Container
General advice for determining component responsibilities in terms of content, layout, and logic
The React + Redux Container Pattern
Explanation and examples of "container" and "presentational" components and their responsibilities. Uses Redux for the examples, but the principles apply to "just" React as well.
Refactoring React - Extracting Layout Components
Demonstrates creating reusable components that manage some aspects of styling and layout, such as a button with multiple sizes and colors.
Share Code between React and React Apps
An exploration of how to refactor code to extract functional components and higher-order components for improved code reuse, including reusing the same components in both React and React Native apps.
Reusable state for React UI components
An example of taking a component that has both state, logic, and presentation, and extracting the logic and presentation into separate components. Also demonstrates using a Redux-like approach to update logic without actually using Redux.
Extracting Logic from React Components
Demonstrates taking a component that includes some logic for formatting a value, and refactoring it to extract out the formatting logic into separate functions.
Demonstrates extracting state and logic out of a component to separate responsibility and improve ease of testing.
How do you separate React components?
Describes four categories of React components ("view", "control", "controllers", and "containers"), and gives suggestions on when and how to factor out new components.
Refactoring: Moving API calls to a higher-order component
Shows how to progressively refactor fetching logic out of a component and move it into a parent component, then make that parent component reusable.
The React + Redux Container Pattern
An excellent explanation of what "container components" and "presentational components" are, with discussion of how they fit together and a good sample project implementing the ideas.
Wrapping Non-React Code
React and third-party libraries
Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin
Declaratively Rendering Earth in 3D, Part 2: Controlling Cesium with React
A detailed description of how to create React components that wrap up a 3D globe library, including use of lifecycle methods for controlling imperative non-React APIs.
When to use Ref on a DOM Node in React
An explanation of the
refproperty, how to use it to access real DOM nodes, and when you should use it.
Using React and jQuery Together
Examples of how to use jQuery inside a React component, and React inside jQuery-controlled elements
Using React and PixiJS
Demonstrates how to use React's component lifecycle methods to control the imperative PixiJS API
Mapping declarative React components to imperative external APIs
A quick example of using
componentWillReceivePropsto pass updates to an imperative API
How to Write a Google Maps React Component
Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more.
Building SVG Maps with React
Demonstrates building a component that zooms and pans SVG graphics based on user input.
How to Sprinkle ReactJS into an Existing Web Application
Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery.
How to Use jQuery Libraries in the React Ecosystem
Some excellent examples of using React components to wrap up jQuery plugins: creating the plugin instance, updating the plugin from React props, and destroying the plugin on unmount.
Introducing React into an Existing Application
Some examples of how to progressively add React components into an existing jQuery-based application and keep them in sync with the rest of the app.
How to use D3.js in React
An overview of three ways to integrate D3 into a React app: using React to render, using D3 to render, and a hybrid approach.
Renderless Components, or How Logic Doesn't Always Need a UI
Shows how you can create components that return null from
render, and use React's lifecycle methods to drive imperative logic rather than rendering UI.
Getting Started with React and Leaflet
Examples of how to create React components that interact with the Leaflet maps library.
How (and why) to use D3 with React
A good overview of some of the libraries and approaches you can make use of to use D3 in a React app
Integrating React with an Existing jQuery Web Application
Covers 3 methods for methods for integrating React and jQuery: referencing jQuery from within React, using a helper class passed to React, and using a pub-sub model passed to React.
Building D3 Components with React
A detailed walk through custom integration of D3 and React without use of an additional library.
PixiJS Application in a React Component
A quick example of loading PixiJS and wrapping it in a React component, showing the basics for integration.
React components as jQuery plugins
Demonstrates how to wrap up a React component as a jQuery plugin for integration with non-React apps.
Using D3 and React Together to Make Visualizations with TypeScript
Examples of some possible approaches to using D3 inside of React, including use of refs and components.
Wrapping Web Components With React
A detailed walkthrough of how to create React components that wrap up existing web components, including managing props, handling events, and keeping the DOM in sync.
How to integrate React into an existing app?
Looks at ways to add React to an existing page, even if there's no build step.
Integrating Imperative APIs into a React application
A higher-level discussion of how to design declarative React components that encapsulate imperative APIs.
Bringing Together React, D3, and Their Ecosystem
An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project.
How to Render Components Outside the Main React App
An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application.
Modals in React
A demonstration of building a reusable modal component using the "portals" technique
Modal Dialogs in React
An excellent example of how to approach rendering modals in React, by controlling them with props
Modal window in React from scratch
Walks through creating a Modal component with styling and display logic
An extended discussion of what concepts are involved in creating modals in web pages, why this can become complex, and how to implement them in a scalable way using React and Redux.
Tasks and Portals in React
Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals.
Good React Modals
Covers ways to handle issues with modal content not being rendered while doing animations, and side-loading data for a modal while maintaining a loading indicator.
Using a React 16 Portal to do something cool
Demonstrates using React 16's
createPortalAPI to control a separate browser window from the original React component tree.
Alternate Component Creation Approaches
Describes an alternate approach to writing components using factory functions to eliminate the need for the
thiskeyword. Not the common approach, but an interesting idea.
A small library from Michael Jackson (co-creator of React Router) that allows defining components using a Python-style approach where functions receive the component instance as the first argument.
An experimental library from James Long that tries to improve React's component API to avoid using classes
Other Component Patterns
The React Controller View Pattern
Describes using top-level components to hold state and pass it to children as props
Make Your React Components Pretty
Techniques for making your components easier to read, including using functional components, using JSX spread for props, and use of destructuring.
Component Factories in React.js
A variation on Dependency Injection for React components
"What is the ideal way to pass data to a callback prop?
Discussion and examples of various ways to pass data to callbacks between children and parents
On Privacy with React Context
Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues.
Internationalizing React Apps
An extended investigation of server and client aspects needed for internationalization.
Creating a cross-domain React component with xcomponent
A look at how to wrap a React component using the xcomponent library, so that it can be rendered and used across domains.
Using React v16 to create self-destructing components
Demonstrates how a tiny component that simply returns its own children can simplify the process of returning arrays of components in React 16.
3 React Gripes
James Long describes three things about React that bother him: inability to easily have parents get refs to nested elements, PureComponents comparing both props and state, and a general tendency to do lots of processing in
componentWillReceiveProps. Some good discussion in both the gist comments and Twitter.
You don't need to know "Dependency Injection"
Looks at the concept of dependency injection, and three ways that that relates to React components and props.