Simple React Example

So I’ve been trying to find a simple React example, one that uses a flux implementation that works out of the box in a browser without any compilation or node stuff. I couldn’t find one so I built one. Here it is: https://github.com/scottpreston/react-examples.

This requires, RefluxJS, ReactJS, React-Dom and a Browser. You can use node to run it if you want, but that’s not required. Enjoy! (Copy-Paste & ES5 Compatible)

    // the action, nothing special
    var myAction = Reflux.createAction();

    // the store, holds state and listens to action.
    var myStore = Reflux.createStore({
        times: 0,
        init: function () {
            this.listenTo(myAction, this.actionCallback);
        },
        actionCallback: function () {
            this.times++;
            this.trigger(this.times);
        }
    });

    // the react component, which subscribtes to the store and updates it's state via listen
    var CountBox = React.createClass({
        displayName: 'CountBox',
        getInitialState: function () {
            return {count: 0};
        },
        componentDidMount: function () {
            var self = this;
            myStore.listen(function (data) {
                self.setState({count: data});
            });
        },
        render: function () {
            return (
                // the component in plain old JS no JSX
                    React.createElement('div', {className: "countBox"},
                            "Count Value =  " + this.state.count
                    )
            );
        }
    });

    ReactDOM.render(
            React.createElement(CountBox, {count: 0}),
            document.getElementById('example')
    );

    document.querySelector("#test").addEventListener("click", function() {
        myAction(null);
    });