- 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, whatcreateElement
does, and how components and rendering relate to elements
-
How the JSX Transform Works
https://jaketrent.com/post/how-jsx-transform-works/
A helpful explanation of how JSX tags are transformed into React elements, with example snippets -
JSX In Depth - an interactive tutorial
http://blog.klipse.tech/javascript/2016/12/14/jsx.html
An interactive version of the "JSX in Depth" tutorial from the React docs -
Events in React
https://www.kirupa.com/react/events_in_react.htm
An introduction to React's event handling system, including useful tips and some gotchas -
React events in depth
https://www.youtube.com/watch?v=dRo_egw7tBc
A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React
-
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 Internals
http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/
http://www.mattgreer.org/articles/react-internals-part-two-componentWillMount-and-componentDidMount/
http://www.mattgreer.org/articles/react-internals-part-three-basic-updating/
http://www.mattgreer.org/articles/react-internals-part-four-setState/
A 5-part series that will recreate React from the ground up, illustrating how it works along the way.
-
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
setState
in 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. -
Under the hood: ReactJS
https://bogdan-lyashenko.github.io/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. -
Preact Internals
https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205
https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b
https://medium.com/@asolove/preact-internals-3-some-fiddly-little-bits-f353b1ad7abc
A 3-part series that dives into the implementation and concepts of the Preact library codebase.
-
ReactConf 2017: A Cartoon Intro to Fiber
https://youtu.be/ZCuYPiUIONs
A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. -
Roadmap for React - Fiber and Beyond
https://www.youtube.com/watch?v=QW5TE4vrklU
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
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 -
Top Resources to Explore React Fiber
https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520
A helpful list of links to further articles and resources for learning about React Fiber -
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. -
A look inside React Fiber
http://makersden.io/blog/look-inside-fiber/
Traces through the source code for React 16 / React Fiber, starting with the mainrender()
function and diving down from there through the system.