New boilerplate

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>
 		);
 	}