- React Team core Notes
https://github.com/reactjs/core-notes
Notes from the React team's weekly-ish meetings
-
React Components, Elements, and Instances
https://medium.com/@dan_abramov/react-components-elements-and-instances-90800811f8ca
Clarifies the differences between these related terms. -
React Elements vs React Components vs Component Backing Instances
https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62
Another solid comparison of what these terms mean, how React uses them, and how they differ. -
React - Basic Theoretical Concepts
https://github.com/reactjs/react-basic
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
https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html
A post celebrating React's progress, including a history of how React's concepts came together over time -
React Elements vs React Components
https://tylermcginnis.com/react-elements-vs-react-components/
An explanation of how elements represent DOM nodes, whatcreateElementdoes, and how components and rendering relate to elements
-
Building React from Scratch
https://www.youtube.com/watch?v=_MAD4Oly9yg
Paul O'Shannessy walks through building a mini React implementation -
Building Your Own React Clone in Five Easy Steps
http://blog.javascripting.com/2016/10/05/building-your-own-react-clone-in-five-easy-steps/
Builds a mini-React implementation to illustrate the basic principles -
Reverse Engineering React
https://vimeo.com/album/3930691
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
http://jsbin.com/qiguyibolu/1/edit?js,output
A very tiny (100 lines) implementation of React's basic algorithm -
Tiny React Renderer
https://github.com/iamdustan/tiny-react-renderer
A heavily commented learning implementation of a bare basic React renderer -
How to write your own Virtual DOM
https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76
A series of articles that build up a small Virtual DOM system from scratch. -
Write Your Own React.js!
https://medium.com/@calebmer/write-your-own-react-js-776dbef98b8
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
https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5
https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56
https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b
https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0
https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37
An ongoing series of articles showing how to build parts of React's API and implementation, likecreateElement. -
deact: React under the hood
https://github.com/lukebelliveau/deact
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.
-
React.js Reconciliation
https://www.infoq.com/presentations/react-reconciliation
A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output. -
React Source Code Annotations
https://annot.io/github.com/facebook/react
Crowdsourced annotations and descriptions for files in the React codebase -
ReactJS: Under the Hood
https://www.youtube.com/watch?v=xsKYAa1ZXpQ
A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers. -
React Implementation Notes
https://facebook.github.io/react/contributing/implementation-notes.html
An in-depth explanation of how React's current internal algorithms work -
Dive Into React Codebase: Transactions
http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/
A deep dive into the implementation of React's internal "transactions" concept -
React Events In Depth
https://www.youtube.com/watch?v=dRo_egw7tBc
A Javascript Air episode focused on how React's Events system works, with React team members Dan Abramov and Ben Alpert -
Dive Into React Codebase: Handling state changes
http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/
A deep dive into how React implements component state andsetState() -
On the Async Nature of
setStatein React
http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/
Digs into the behavior ofsetState, 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
https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm
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
https://www.youtube.com/watch?v=VVxQAoNK_XQ
A talk exploring how a React renderer works, and how to implement a tiny renderer -
Making custom renderers for React
http://goshakkk.name/react-custom-renderers/
Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas -
The Inner Workings of Virtual DOM
https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf
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. -
React Internals
https://zackargyle.github.io/react-internals-slides/#/
An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations. -
Preact Internals
https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205
https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b
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
https://medium.com/@ericchurchill/the-react-source-code-a-beginners-walkthrough-i-7240e86f3030
A long, detailed walkthrough of large parts of the React codebase -
Preact: Into the void 0
https://youtu.be/LY6y3HbDVmg
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.
-
React Fiber Architecture
https://github.com/acdlite/react-fiber-architecture
A description of React's new core algorithm, React Fiber -
What's Next for React - React Fiber
https://www.youtube.com/watch?v=aV1271hd9ew
Andrew Clark describes the concepts, implementation, and potential benefits of the in-progress React Fiber internal algorithm reimplementation. -
React Fiber Resources
https://github.com/koba04/react-fiber-resources
Links and info on the new React Fiber algorithm -
Why, What, and How of React Fiber
https://www.youtube.com/watch?v=crM1iRVGpGQ
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. -
ReactConf 2017: A Cartoon Intro to Fiber
https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0
A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. -
React Fiber: A Closer Look at the New Engine of React
https://www.infoq.com/news/2017/05/react-fiber-closer-look
A useful summary of the goals and implementation approach for the new React Fiber algorithm