New boilerplate

app/components/Checkboxes.js

@@ -1,8 +1,8 @@
 /** @jsx React.DOM */
-var React = require('flux-react');
-var Constants = require('../Constants.js');
+var React = require('react');
+var flux = require('flux-react');
+var actions = require('./../actions.js');
 var ColoredCheckbox = require('./Checkboxes/ColoredCheckbox.js');
-var CheckboxActions = require('../actions/CheckboxActions.js');
 var CheckboxStore = require('../stores/CheckboxStore.js');
 
 var Checkboxes = React.createClass({
@@ -12,36 +12,44 @@ var Checkboxes = React.createClass({
 			checkboxes: CheckboxStore.getCheckboxes()
 		};
 	},
-	storesDidUpdate: function () {
+	componentWillMount: function () {
+		CheckboxStore.addChangeListener(this.update);
+	},
+	componentWillUnmount: function () {
+		CheckboxStore.removeChangeListener(this.update);
+	},
+	update: function () {
 		this.setState({
 			checkboxes: CheckboxStore.getCheckboxes()
 		});
 	},
 	check: function (color) {
-		React.dispatch({
-			type: CheckboxActions.CHECK,
-			color: color
-		})
+		actions.check(color);
 	},
 	checkAll: function () {
-		React.dispatch({
-			type: CheckboxActions.CHECK_ALL
-		});
+		actions.checkAll();
 	},
 	uncheckAll: function () {
-		React.dispatch({
-			type: CheckboxActions.UNCHECK_ALL
-		});
+		actions.uncheckAll();
+	},
+	renderCheckbox: function (checkbox, index) {
+		return <ColoredCheckbox 
+						key={index} 
+						color={checkbox.color} 
+						checked={checkbox.checked} 
+						onChange={this.check}/>
 	},
 	render: function() {
-		var checkboxes = this.state.checkboxes.map(function (checkbox, index) {
-			return <ColoredCheckbox key={index} color={checkbox.color} checked={checkbox.checked} onChange={this.check}/>
-		}, this);
+		var checkboxes = this.state.checkboxes.map(this.renderCheckbox);
 		return (
 			<div>
-				{checkboxes}
-				<button onClick={this.checkAll}>Check all</button>
-				<button onClick={this.uncheckAll}>Uncheck all</button>
+				<div>
+					{checkboxes}
+				</div>
+				<div>
+					<button onClick={this.checkAll}>Check all</button>
+					<button onClick={this.uncheckAll}>Uncheck all</button>
+				</div>
 			</div>
 		);
 	}

app/components/Checkboxes/ColoredCheckbox.js

@@ -1,7 +1,10 @@
 /** @jsx React.DOM */
-var React = require('flux-react');
+var React = require('react');
 	
 var ColoredCheckbox = React.createClass({
+	changeColor: function () {
+		this.props.onChange(this.props.color);
+	},
 	render: function() {
 		var style = {
 			backgroundColor: this.props.color,
@@ -10,7 +13,7 @@ var ColoredCheckbox = React.createClass({
 		return (
 			<span key={this.props.key} style={style}>
 				<input type="checkbox" 
-					onChange={this.props.onChange.bind(null, this.props.color)}
+					onChange={this.changeColor}
 					checked={this.props.checked}/>
 			</span>
 		);

app/components/NameThrower.js

@@ -1,35 +1,44 @@
 /** @jsx React.DOM */
-var React = require('flux-react');
-var Constants = require('../Constants.js');
+var React = require('react');
 var CheckboxStore = require('../stores/CheckboxStore.js');
 	
 var NameThrower = React.createClass({
-	stores: [CheckboxStore],
 	getInitialState: function () {
 		return {
 			name: '',
 			colors: CheckboxStore.getColors()
 		};
 	},
-	storesDidUpdate: function () {
+	componentWillMount: function () {
+		CheckboxStore.addChangeListener(this.update);
+	},
+	componentWillUnmount: function () {
+		CheckboxStore.removeChangeListener(this.update);
+	},
+	update: function () {
 		this.setState({
 			colors: CheckboxStore.getColors()
 		});
 	},
-	updateName: function () {
+	updateName: function (event) {
 		this.setState({
-			name: this.refs.input.getDOMNode().value
+			name: event.target.value
 		});
 	},
-	render: function() {
-		var names = this.state.colors.map(function (color, index) {
+	renderColors: function (color, index) {
 			var style = {color: color};
 			return <div key={index} style={style}>{this.state.name}</div>
-		}, this);
+	},
+	render: function() {
+		var names = this.state.colors.map(this.renderColors);
 		return (
 			<div>
-				<input ref="input" type="text" value={this.state.name} onChange={this.updateName}/>
-				{names}
+				<div>
+					<input type="text" value={this.state.name} onChange={this.updateName}/>
+				</div>
+				<div>
+					{names}
+				</div>
 			</div>
 		);
 	}