node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »



An alternative implementation of React.


For clarity. The code base is tiny compared to React but React's core functionality is nonetheless implemented faithfully, as far as it goes. It led to a greater appreciation of React. There is now also Inference to go hand in hand with Reaction.

Reverse Engineering React

There is a series of complementary videos:

Reverse Engineering React


  • The examples.html file has moved to examples/index.html.
  • The toArray() helper method is now called guaranteeArray().
  • The index variable in the indexOf() helper method is now initially set to null.
  • The remount() method of the ReactElement should call the getChildContext() method.
  • The libES2015 directories in both the root and examples directories have been renamed es6.
  • All children can now be arrays of elements, not just the first.
  • Component state has been put back by popular demand.
  • The examples have been moved to the es6 folder.
  • The helpers file has been replaced with an array utilities file.

These points are not strictly errata but will help to reconcile the current master branch with the older videos branch:

  • In the examples, the static run() methods and spurious classes have been replaced with functions.
  • The reduxApp example can now be found elsewhere, split up into separate files and tidied up considerably.
  • The dependency on Redux has been replaced with a barebones, local implementation.
  • All instances of var have been replaced with either const or let.
  • The FilterLink has been made into a ReactClass in order to give a usage example.
  • The React.createElement() method has been further streamlined.
  • The element classes have been reorganised, please see the source.
  • Support for Inference has been added, again please see the source.


With npm:

npm install reaction

You can also clone the repository with Git...

git clone

...then install the necessary modules with npm from within the project's root directory:

npm install

You will need to do this if you want to look at the examples.


Launch the examples/index.html file. There is a Redux as well as a vanilla example application.


var reaction = require('reaction'),
    { React, ReactDOM } = reaction;

Now just write your JSX and React code in the normal way, although bear in mind only subset of React's functionality is supported.

Compiling from source

Automation is thanks to npm scripts, have a look at the package.json file. The pertinent commands are:

npm run build-debug
npm run watch-debug

Supported functionality

  • React classes
  • React components
  • React functions
  • References
  • Contexts
  • Mounting and unmounting

Contexts are handled slightly differently. React elements can only pass down a context to child elements, and those child elements can only receive a context, in its entirety. However, the current context is available as this.context when the getChildContext() method is invoked, or passed as the second argument of the getChildContext() method in the case of functions, so you can make programmatic decisions about what context to pass down to children.

Functional components are entirely stateless in the sense that any getInitialState() method defined on the function in question is ignored. Similarly any getChildContext() method is ignored. However, such functions are passed two arguments, namely props and context, the latter being the child context of the parent element, if any.

Functionality that is not supported

  • Of the component lifecycle, all methods except componentDidMount() and componentWillUnmount() are not supported.

Additional functionality not supported by React

These methods are to add better support for Inference. They can be called against any element bar text elements, except for the last two, which can only be called against text elements. The getTagName() method will return null for all but virtual DOM elements, namely those elements with an underlying DOM element.

  • spliceChildren(start, removeCount, addedChildren)
  • addChild(child)
  • removeChild(child)
  • setAttribute(name, value)
  • getAttribute(name)
  • clearAttribute(name)
  • addAttribute(name, value)
  • removeAttribute(name)
  • setClass(className)
  • addClass(className)
  • removeClass(className)
  • toggleClass(className)
  • hasClass(className)
  • clearClasses()
  • getTagName()
  • getText()
  • setText(text)

Note that the forceUpdate() method now takes an update argument for better integration with Inference. If the update argument is undefined, the element is remounted as usual. Otherwise, the element's render() method is called and is passed the update argument.

Functionality that is different

There are the following methods to handle state:

  • getState()
  • setState()
  • updateState()

The setState() method will set the React element's state to the given state. The updateState() method will assign the given state to the element's state, which is more akin to React's setState() method. Both will force an update.