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.
There is a series of complementary videos:
examples.htmlfile has moved to
toArray()helper method is now called
indexvariable in the
indexOf()helper method is now initially set to
remount()method of the
ReactElementshould call the
libES2015directories in both the root and
examplesdirectories have been renamed
These points are not strictly errata but will help to reconcile the current
master branch with the older
run()methods and spurious classes have been replaced with functions.
reduxAppexample can now be found elsewhere, split up into separate files and tidied up considerably.
varhave been replaced with either
FilterLinkhas been made into a
ReactClassin order to give a usage example.
React.createElement()method has been further streamlined.
npm install reaction
You can also clone the repository with Git...
git clone https://github.com/djalbat/Reaction.git
...then install the necessary modules with npm from within the project's root directory:
You will need to do this if you want to look at the examples.
examples/index.html file. There is a Redux as well as a vanilla example application.
var 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.
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
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
context, the latter being the child context of the parent element, if any.
componentWillUnmount()are not supported.
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, that is those elements with an underlying DOM element.
spliceChildren(start, removeCount, addedChildren)
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
There are the following methods to handle state:
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.