louislang/counter.html

## counter.html
<html>
    <body>
        <!-- This is where our counter will eventually go -->
        <div id="counter"></div>

        <!-- Include React, Reflux, ReactDOM, and Babel -->
        <script src="bower_components/react/react.js"></script>
        <script src="bower_components/reflux/dist/reflux.js"></script>
        <script src="bower_components/react-dom/react-dom.js"></script>
        <script src="bower_components/babel/browser.js"></script>

        <script>
            // These are the actions for our counter. We want to be able to
            // `increment` the counter by one, `decrement` by one, and `reset`
            // the counter to zero. We tie these actions to functions inside
            // of our `Reflux` store.
            var Actions = Reflux.createActions([
                "increment",
                "decrement",
                "reset"
            ]);

            var Store = Reflux.createStore({
                // For simplicity I am just setting the data here to 0. In
                // reality, I'd probably want to query an external API.
                data: 0,

                // This tells our store to 'bind' the actions from `Actions`
                // to the cooresponding functions below. Note that matching
                // functions names are automatically bound to the event,
                // as are 'on' function names (e.g. `onDecrement()` - The
                // camel casing is important).
                listenables: [Actions],
                init: function() {
                },

                // We update the store by incrementing the data. The `trigger`
                // tells any listeners to update as well. This is required to
                // get the value to increment in our DOM.
                increment: function() {
                    this.data++;
                    this.trigger(this.data);
                },

                // Similarly, we want to decrement by one. Again, the `trigger`
                // is necessary.
                onDecrement: function() {
                    this.data--;
                    this.trigger(this.data);
                },

                // Same as above, but just reset the counter to zero.
                reset: function() {
                    this.data = 0;
                    this.trigger(this.data);
                },

            });
        </script>

        <script type="text/babel">
            // Since we are doing all of this in one file, we need a JSX
            // processor. I am using babel for this. Previously 'text/jsx'
            // would have worked, but failed for some reason.
            var CounterComponent = React.createClass({

                // We want this component to update when the Store updates
                mixins: [Reflux.connect(Store, "count")],

                // And here's how we are going to render everything
                render: function() {
                    return (
                        <div>
                            <h1>Count: { Store.data }</h1>
                            <button onClick={ Actions.increment }>Increment</button>
                            <button onClick={ Actions.decrement }>Decrement</button>
                            <button onClick={ Actions.reset }>Reset</button>
                        </div>
                    );
                }
            });

            // Tell react to insert our component into the 'counter' div.
            React.render(<CounterComponent />, document.getElementById("counter"));
        </script>

    </body>
</html>
	<html>
	<body>
	<!-- This is where our counter will eventually go -->
	<div id="counter"></div>

	<!-- Include React, Reflux, ReactDOM, and Babel -->
	<script src="bower_components/react/react.js"></script>
	<script src="bower_components/reflux/dist/reflux.js"></script>
	<script src="bower_components/react-dom/react-dom.js"></script>
	<script src="bower_components/babel/browser.js"></script>

	<script>
	// These are the actions for our counter. We want to be able to
	// `increment` the counter by one, `decrement` by one, and `reset`
	// the counter to zero. We tie these actions to functions inside
	// of our `Reflux` store.
	var Actions = Reflux.createActions([
	"increment",
	"decrement",
	"reset"
	]);

	var Store = Reflux.createStore({
	// For simplicity I am just setting the data here to 0. In
	// reality, I'd probably want to query an external API.
	data: 0,

	// This tells our store to 'bind' the actions from `Actions`
	// to the cooresponding functions below. Note that matching
	// functions names are automatically bound to the event,
	// as are 'on' function names (e.g. `onDecrement()` - The
	// camel casing is important).
	listenables: [Actions],
	init: function() {
	},

	// We update the store by incrementing the data. The `trigger`
	// tells any listeners to update as well. This is required to
	// get the value to increment in our DOM.
	increment: function() {
	this.data++;
	this.trigger(this.data);
	},

	// Similarly, we want to decrement by one. Again, the `trigger`
	// is necessary.
	onDecrement: function() {
	this.data--;
	this.trigger(this.data);
	},

	// Same as above, but just reset the counter to zero.
	reset: function() {
	this.data = 0;
	this.trigger(this.data);
	},

	});
	</script>

	<script type="text/babel">
	// Since we are doing all of this in one file, we need a JSX
	// processor. I am using babel for this. Previously 'text/jsx'
	// would have worked, but failed for some reason.
	var CounterComponent = React.createClass({

	// We want this component to update when the Store updates
	mixins: [Reflux.connect(Store, "count")],

	// And here's how we are going to render everything
	render: function() {
	return (
	<div>
	<h1>Count: { Store.data }</h1>
	<button onClick={ Actions.increment }>Increment</button>
	<button onClick={ Actions.decrement }>Decrement</button>
	<button onClick={ Actions.reset }>Reset</button>
	</div>
	);
	}
	});

	// Tell react to insert our component into the 'counter' div.
	React.render(<CounterComponent />, document.getElementById("counter"));
	</script>

	</body>
	</html>