JS Bin // source https://jsbin.com/rudabafefa

index.html

<style id="jsbin-css">
.selected {
  background: #EFE;
}
</style>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
// A simple store
var store = {count: 0};

// Let's create a counter component that we can use
// in all of our projects
var Counter  = React.createClass({displayName: 'Counter',  
    render: function(){
        return (
            React.createElement("div", {className: "counter"}, 
                React.createElement("span", null, this.props.count), 
                React.createElement("button", {onClick:  this.onIncrease}, "Increase")
            )
        );
    },
    onIncrease: function(){
        // Hit the button will just emit an event
        var e = document.createEvent('Event');
        e.initEvent('counter', true, true);

        this.getDOMNode().dispatchEvent( e );
    }
});

// Our reaction
var increaseReaction = function( e ){
    store.count++;

    // The ideal store would trigger a change event,
    // our store is a common object, so we are going to 
    // refresh the page for demonstration purposes
    React.render( React.createElement(Counter, {count:  store.count}), document.body );
}
document.addEventListener( 'counter', increaseReaction, false );

React.render( React.createElement(Counter, {count:  store.count}), document.body );
</script>

<script id="jsbin-source-css" type="text/css">.selected {
  background: #EFE;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">// A simple store
var store = {count: 0};

// Let's create a counter component that we can use
// in all of our projects
var Counter  = React.createClass({  
    render: function(){
        return (
            <div className="counter">
                <span>{this.props.count}</span>
                <button onClick={ this.onIncrease }>Increase</button>
            </div>
        );
    },
    onIncrease: function(){
        // Hit the button will just emit an event
        var e = document.createEvent('Event');
        e.initEvent('counter', true, true);

        this.getDOMNode().dispatchEvent( e );
    }
});

// Our reaction
var increaseReaction = function( e ){
    store.count++;

    // The ideal store would trigger a change event,
    // our store is a common object, so we are going to 
    // refresh the page for demonstration purposes
    React.render( <Counter count={ store.count } />, document.body );
}
document.addEventListener( 'counter', increaseReaction, false );

React.render( <Counter count={ store.count } />, document.body );</script>

jsbin.rudabafefa.css

.selected {
  background: #EFE;
}

jsbin.rudabafefa.js

// A simple store
var store = {count: 0};

// Let's create a counter component that we can use
// in all of our projects
var Counter  = React.createClass({displayName: 'Counter',  
    render: function(){
        return (
            React.createElement("div", {className: "counter"}, 
                React.createElement("span", null, this.props.count), 
                React.createElement("button", {onClick:  this.onIncrease}, "Increase")
            )
        );
    },
    onIncrease: function(){
        // Hit the button will just emit an event
        var e = document.createEvent('Event');
        e.initEvent('counter', true, true);

        this.getDOMNode().dispatchEvent( e );
    }
});

// Our reaction
var increaseReaction = function( e ){
    store.count++;

    // The ideal store would trigger a change event,
    // our store is a common object, so we are going to 
    // refresh the page for demonstration purposes
    React.render( React.createElement(Counter, {count:  store.count}), document.body );
}
document.addEventListener( 'counter', increaseReaction, false );

React.render( React.createElement(Counter, {count:  store.count}), document.body );