react-redux-architecture
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
React In-Depth: The React Life Cycle A deep dive into the lifecycle methods, and various techniques for using them.
Presentational and Container Components Dan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.
Mixins Are Dead. Long Live Composition A look at some of the issues with using mixins, and reasons why higher-order components are (usually) an improvement.
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.
Higher Order Components: Theory and Practice Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples.
Sharing and Testing Code in React with Higher Order Components Demonstrates extracting HOCs from existing code, and testing them.
React Higher Order Components in depth A very detailed article looking at some advanced HoC patterns
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 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.
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.
Finding state's place with React and Redux
A look at when and how using React component state may be useful, even when using Redux for primary app state
Dataflow through React An online book that covers a number of topics on React components and data flow.
A case for setState An article arguing that React component state still has a number of uses.
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.
Functional Components vs. Stateless Functional Components vs. Stateless Components Clarifies the meaning of the terms, which are often used in overlapping ways.
React Component Jargon as of August 2016 A very useful glossary of widely-used terms describing React components
Dynamically Rendering React Components Examples of how to dynamically determine which React component to render
Higher Order Components: A React Application Design Pattern A discussion of how to use Higher Order Components to keep your React applications tidy, well structured and easy to maintain. Also, how pure functions keep code clean and how these same principles can be applied to React components.
The React Controller View Pattern Describes using top-level components to hold state and pass it to children as props
Functional React Serie - Part 1: Get your App outta my Component Part 1 in a series about writing React applications by treating components as functions, not templates.
How to handle state in React: The Missing FAQ An article that dispels misunderstandings and answers common questions about how to handle state in React.
Where to Hold React Component Data: state, store, static, and this A great summary of different places to store state, and when and why you should use each.
Function as Child Components Explains the "function as a child" technique as an alternative to Higher Order Components
(Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but mostly discouraged at this point. The more idiomatic approach is "one-way data flow" with "controlled inputs".)
React AJAX Best Practices Covers four ways to approach managing queries and data fetching.
AJAX/HTTP Library Comparison A useful overview of the most popular AJAX libraries, including platform support and feature comparisons.
Implementing React Redux with GraphQL Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions.
Rendering Backend Requests with React Describes a pattern for dealing with components that depend on loading data from a backend
Build a React + Flux App with User Authentication Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable.
Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI.
React Docs: Forms The React documentation page on forms. Describes "controlled" and "uncontrolled" form inputs.
Learn Raw React: Ridiculously Simple Forms Covers the basics of implementing form rendering, updates, and validation, in plain JS
Forms in React and Redux Demonstrates building a simple set of wrapper components to manage forms using React and Redux
Form Validation Tutorial with React.js A good example of setting up form validation in React
Not-so-simple Forms with React Explains how to set up more advanced form scenarios such as optional or repeatable sections.
Managing state and controlled form fields with React Describes the concepts of "controlled" and "uncontrolled" inputs.
Two-Way Data Binding and Form Validation in React Another demonstration of building a form with some logic and validation.
Using React's state to manage data entry Describes how to manage data for forms using React component state and some wrapper components.
Handling React Forms with Mobx Observables Some examples of working with forms in React, using MobX for the data management.
Forms in React and Redux A good example of how to set up form handling in conjunction with a Redux store.
React Form Components A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers.
React "controlled" vs "uncontrolled" inputs An explanation of the terms "controlled inputs" and "uncontrolled inputs"
Uncontrolled components are an anti-pattern Argues that uncontrolled components are a bad idea and should be avoided.
ReactJS and controlled forms A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs.
Managing React Controlled Component State Some short examples of how to properly manage state for controlled inputs
Scaling React.js Applications Talk about managing large react.js applications. Covers "Feature" structure, redux-saga and CSS modules.
Organizing Large React Applications Describes "File-Type First", "Feature First / Pods" approaches, as well as other related structure issues.
Four Strategies for Organizing Code Describes "by component", "by toolbox", "by layer", and "by kind" approaches.
Rules for Structuring (Redux) Applications Gives several useful rules for structuring code, with examples.
A Better File Structure for React/Redux Applications Suggests a domain-based structure, with tests kept alongside the code they relate to.
Route-Based Folder Structure Ryan Florence, an author of React Router, gives his suggested file structure.
How to Better Organize Your React Applications? Another feature-style approach, describing things in terms of "components", "scenes", and "services".
Fractal Project Structure Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization.
Reddit: "Redux - Reducer composition without slicing state?" Some very informative discussion on how to organize reducers and actions.
Wordpress Calypso: Our Approach to Data The team behind Wordpress's new admin panel looks at their migration from emitters to Flux to Redux, and describes how they organize their state tree, use selectors to extract state, run queries with components, and persist their store state through refreshes.
So you've screwed up your Redux store - or, why Redux makes refactoring easy Describes some useful practices for organizing Redux actions, reducers, and selectors.
How we reduced boilerplate and handled asynchronous actions with Redux A look at conventions that have helped the Algolia team write Redux apps.