brainless_renderer.js

// this is the react app.  it knows nothing of the vanilla app, other than that the information
// will come in in props, and that it should call this hook when this button is pressed, or etc

var Spinner = (props) => 
  <div>
    {this.props.data}
    <button value="↑" onclick={this.props.hooks.inc}/>
    <button value="↓" onclick={this.props.hooks.dec}/>
  </div>;

export {Spinner};

headless_app.js

import {Spinner} from './brainless_renderer.js';

// this is a vanilla js app.  it knows nothing of react, other than 
// to call `.render` on line 9 with relevant data and callbacks.

var App = function() {

    var repaint = () => ReactDOM.render(document.body, <Spinner data={counter} hooks={hooks}/>),
        counter = 0,
        inc     = () => { ++counter; repaint() },
        dec     = () => { --counter; repaint() },

        hooks   = {inc, dec};
    
    return {
        value: () => counter,
        inc,
        dec,
        repaint
    };
}