react-implementation.md

React Implementation and Concepts

Resources

• React Team core Notes
  https://github.com/reactjs/core-notes
  Notes from the React team's weekly-ish meetings

Core Concepts

• 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, what createElement does, and how components and rendering relate to elements

Miniature React Implementations

• 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.

Implementation and Internals

• 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 and setState()

• On the Async Nature of setState in React
  http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/
  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
  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.

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.

• 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.