React Implementation and Concepts
- React Team core Notes
Notes from the React team's weekly-ish meetings
React Components, Elements, and Instances
Clarifies the differences between these related terms.
React Elements vs React Components vs Component Backing Instances
Another solid comparison of what these terms mean, how React uses them, and how they differ.
React - Basic Theoretical Concepts
React team member Seb Markbage dives into his mental model for how React works. (Note: after the first few paragraphs, not "basic" at all. Definitely an involved read, but informative.)
Our First 50,000 Stars
A post celebrating React's progress, including a history of how React's concepts came together over time
React Elements vs React Components
An explanation of how elements represent DOM nodes, what
createElementdoes, and how components and rendering relate to elements
Miniature React Implementations
Building React from Scratch
Paul O'Shannessy walks through building a mini React implementation
Building Your Own React Clone in Five Easy Steps
Builds a mini-React implementation to illustrate the basic principles
Reverse Engineering React
A video series covering the implementation of an alternative/miniature version of React called "Reaction". Note that it doesn't look at React itself, but does cover all the equivalent concepts in a simpler implementation.
Tiny React Reimplementation
A very tiny (100 lines) implementation of React's basic algorithm
Tiny React Renderer
A heavily commented learning implementation of a bare basic React renderer
How to write your own Virtual DOM
A series of articles that build up a small Virtual DOM system from scratch.
Write Your Own React.js!
Some thoughts on why and how you might want to try writing your own React-alike, and some of the tradeoffs involved in writing something like React.
Didact: Learning how React works by building it from scratch
An ongoing series of articles showing how to build parts of React's API and implementation, like
setState, and the "Fiber" reconciliation approach.
deact: React under the hood
A repository for learning about how React works internally. Has a link to a slide set that explains the concepts, and has branches for the various lessons.
A 5-part series that will recreate React from the ground up, illustrating how it works along the way.
Making a custom React renderer
A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document
Walks through building a very simplified mini React clone, including
createElement, rendering to the DOM, and
Implementation and Internals
React as a UI Runtime by Dan Abramov
A deep dive into the React programming model from first principles
A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output.
React Source Code Annotations
Crowdsourced annotations and descriptions for files in the React codebase
ReactJS: Under the Hood
A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers.
React Implementation Notes
An in-depth explanation of how React's current internal algorithms work
Dive Into React Codebase: Transactions
A deep dive into the implementation of React's internal "transactions" concept
React Events In Depth
Dive Into React Codebase: Handling state changes
A deep dive into how React implements component state and
On the Async Nature of
Digs into the behavior of
setState, and whether it is actually always async or not. Some decent info, although the final section does make some strange statements.
setState() State Mutation Operator May Be Synchronous in ReactJS
Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous
React Internals: Through the Lens of a Renderer
A talk exploring how a React renderer works, and how to implement a tiny renderer
Making custom renderers for React
Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas
The Inner Workings of Virtual DOM
An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example. Includes some detailed flowcharts of their behavior.
An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations.
A series of posts that walk through the Preact codebase and explain its implementation, as well as the component model.
The React Source Code: A Beginner's Walkthrough
A long, detailed walkthrough of large parts of the React codebase
Preact: Into the void 0
A talk by Jason Miller, author of Preact, covering some of the core implementation concepts behind Preact (and other virtual DOM/component libraries), as well as some important aspects for DOM manipulation performance.
Under the hood: ReactJS
An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things. Very impressive.
A 3-part series that dives into the implementation and concepts of the Preact library codebase.
An Interview with the React Team About Wordpress and Project Gutenberg
A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool.
The React Story: How Facebook's Instagram Acquisition Led to the Open Sourcing of React
An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened. Page includes a complete transcript of the discussion.
How exactly does React handle events?
A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more.
A look inside React Fiber
Traces through the source code for React 16 / React Fiber, starting with the main
render()function and diving down from there through the system.
Understanding the React Source Code
A multi-part series of posts that walks through the critical path of React 15's source code, tracing how a simple component gets rendered.
The React team officially announces the release of React 16 and describes the new features, including returning arrays, error handling, better server-side rendering, and more.
React 16: A look inside an API-compatible rewrite
The React team describes how they handled building and testing React 16 to be backwards compatible with existing code.
ReactConf 2017: A Cartoon Intro to Fiber
A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations.
Roadmap for React - Fiber and Beyond
A keynote by Andrew Clark, describing the ideas behind React Fiber and the benefits it will give.
React Fiber: A Closer Look at the New Engine of React
A useful summary of the goals and implementation approach for the new React Fiber algorithm
Top Resources to Explore React Fiber
A helpful list of links to further articles and resources for learning about React Fiber
React Fiber for the rest of us
Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16.
What's new in React 16? https://www.robinwieruch.de/what-is-new-in-react-16/
A very useful look at the new user-facing features in React 16, with code examples.
Rethinking with React 16
An informative overview of the major changes in React 16, including the goals of the "React Fiber" rewrite, Fragments, Error Boundaries, server-side rendering improvements, and more.
React Fiber Architecture
A description of React's new core algorithm, React Fiber
What's Next for React - React Fiber
Andrew Clark describes the concepts, implementation, and potential benefits of the in-progress React Fiber internal algorithm reimplementation.
React Fiber Resources
Links and info on the new React Fiber algorithm
Why, What, and How of React Fiber
Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase.
What is React Fiber?
An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible.