Tiny React Renderer
Creating a React Renderer will give you the opportunity to apply the same React knowledge that you and your team already know and enjoy from the web and native to whatever host environment you need.
Creating a renderer is a fairly straight-forward affair once you know what you’re looking for.
Many languages have this concept of a
main—the entry point to your
application. If you look at any React application code you’ve written you’ll see
that you “start” your app with a call like the following:
// web ReactDOM.render(React.createElement(MyApp), document.getElementById('app')); // native AppRegistry.registerComponent('MyApp', () => MyApp);
This is where your application enters into the React domain and comes alive. Your root React element is instantiated and attached to the host environment.
If you follow either the ReactDOM or React Native codebases from where these
methods are defined you will quickly find yourself at the
file. Our renderer also begins there.
With that let’s get started! Our tour continues in ./src/stack/mount.js.
Work in Progress
Please note this guide is a work in progress. Much of this knowledge is derived from my experience in creating React Hardware.
npm testwill run the tests with the stack-based renderer
npm test -- --fiberwill run the tests with the upcoming fiber implementation
Fiber, on the other-hand, can be thought of like a React VM. It is influenced by OCaml, algebraic effects, and other functional ideas. From an implementation level, Fiber has a first-class renderer API allowing creating custom renderers a much nicer experience.
The documentation for stack is no in maintenance mode and will not be very
accurate as time progresses. This can be found in
./src/stack. The Fiber API
changes will be followed throughout its development to a stable release in