React - Feedback from reviews

labs/architecture-examples/react/bower.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "todomvc-common": "~0.1.7",
-    "react": "~0.4.0",
+    "react": "~0.5.1",
     "director": "~1.2.0"
   }
 }

labs/architecture-examples/react/bower_components/director/.bower.json

@@ -9,5 +9,6 @@
     "commit": "538dee97b0d57163d682a397de674f36af4d16a1"
   },
   "_source": "git://github.com/flatiron/director.git",
-  "_target": "~1.2.0"
+  "_target": "~1.2.0",
+  "_originalSource": "director"
 }
\ No newline at end of file

labs/architecture-examples/react/bower_components/react/.bower.json

 {
   "name": "react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "main": "react.js",
   "homepage": "https://github.com/facebook/react-bower",
-  "_release": "0.4.0",
+  "_release": "0.5.1",
   "_resolution": {
     "type": "version",
-    "tag": "v0.4.0",
-    "commit": "54334ad626d26dff4c214d308cefd30ad80fb8e9"
+    "tag": "v0.5.1",
+    "commit": "a05207f36d769b99e6b594f71671ca5bd2514435"
   },
   "_source": "git://github.com/facebook/react-bower.git",
-  "_target": "~0.4.0"
+  "_target": "~0.5.1",
+  "_originalSource": "react"
 }
\ No newline at end of file

labs/architecture-examples/react/bower_components/react/bower.json

 {
   "name": "react",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "main": "react.js"
 }
\ No newline at end of file

labs/architecture-examples/react/bower_components/todomvc-common/.bower.json

+{
+  "name": "todomvc-common",
+  "version": "0.1.8",
+  "homepage": "https://github.com/tastejs/todomvc-common",
+  "_release": "0.1.8",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.1.8",
+    "commit": "3caa4d6f6de2223b10bfc62065ed8da86a29af89"
+  },
+  "_source": "git://github.com/tastejs/todomvc-common.git",
+  "_target": "~0.1.7",
+  "_originalSource": "todomvc-common"
+}
\ No newline at end of file

labs/architecture-examples/react/bower_components/todomvc-common/bower.json

+{
+  "name": "todomvc-common",
+  "version": "0.1.8"
+}

labs/architecture-examples/react/index.html

@@ -12,7 +12,7 @@
 		<div id="benchmark"></div>
 
 		<script src="bower_components/todomvc-common/base.js"></script>
-		<script src="bower_components/react/react.min.js"></script>
+		<script src="bower_components/react/react.js"></script>
 		<script src="bower_components/react/JSXTransformer.js"></script>
 		<script src="bower_components/director/build/director.min.js"></script>
 

labs/architecture-examples/react/js/app.jsx

@@ -61,6 +61,9 @@
 		toggleAll: function (event) {
 			var checked = event.target.checked;
 
+      // Note: it's usually better to use immutable data structures since they're easier to
+      // reason about and React works very well with them. That's why we use map() and filter()
+      // everywhere instead of mutating the array or todo items themselves.
 			var newTodos = this.state.todos.map(function (todo) {
 				return Utils.extend({}, todo, {completed: checked});
 			});
@@ -68,12 +71,9 @@
 			this.setState({todos: newTodos});
 		},
 
-		toggle: function (todo) {
-			var newTodos = this.state.todos.map(function (t) {
-				if (t !== todo) {
-					return t;
-				}
-				return Utils.extend({}, t, {completed: !todo.completed});
+		toggle: function (todoToToggle) {
+			var newTodos = this.state.todos.map(function (todo) {
+        return todo !== todoToToggle ? todo : Utils.extend({}, todo, {completed: !todo.completed});
 			});
 
 			this.setState({todos: newTodos});
@@ -95,12 +95,9 @@
 			});
 		},
 
-		save: function (todo, text) {
-			var newTodos = this.state.todos.map(function (t) {
-				if (t !== todo) {
-					return t;
-				}
-				return Utils.extend({}, t, {title: text});
+		save: function (todoToSave, text) {
+			var newTodos = this.state.todos.map(function (todo) {
+        return todo !== todoToSave ? todo : Utils.extend({}, todo, {title: text});
 			});
 
 			this.setState({todos: newTodos, editing: null});
@@ -152,9 +149,9 @@
 				);
 			}, this);
 
-			var activeTodoCount = this.state.todos.filter(function (todo) {
-				return !todo.completed;
-			}).length;
+      var activeTodoCount = this.state.todos.reduce(function(accum, todo) {
+        return todo.completed ? accum : accum + 1;
+      }, 0);
 
 			var completedCount = this.state.todos.length - activeTodoCount;
 

labs/architecture-examples/react/js/footer.jsx

@@ -39,15 +39,15 @@
 					</span>
 					<ul id="filters">
 						<li>
-							<a href="#/" class={show[ALL_TODOS]}>All</a>
+							<a href="#/" className={show[ALL_TODOS]}>All</a>
 						</li>
 						{' '}
 						<li>
-							<a href="#/active" class={show[ACTIVE_TODOS]}>Active</a>
+							<a href="#/active" className={show[ACTIVE_TODOS]}>Active</a>
 						</li>
 						{' '}
 						<li>
-							<a href="#/completed" class={show[COMPLETED_TODOS]}>Completed</a>
+							<a href="#/completed" className={show[COMPLETED_TODOS]}>Completed</a>
 						</li>
 					</ul>
 					{clearButton}

labs/architecture-examples/react/js/todoItem.jsx

@@ -54,6 +54,12 @@
 			return {editText: this.props.todo.title};
 		},
 
+    /**
+     * This is a completely optional performance enhancement that you can implement
+     * on any React component. If you were to delete this method the app would still
+     * work correctly (and still be very performant!), we just use it as an example
+     * of how little code it takes to get an order of magnitude performance improvement.
+     */
 		shouldComponentUpdate: function (nextProps, nextState) {
 			return (
 				nextProps.todo.id !== this.props.todo.id ||