fixed react addons classset deprecated

examples/react/index.html

@@ -16,6 +16,7 @@
 
 		<script src="node_modules/todomvc-common/base.js"></script>
 		<script src="node_modules/react/dist/react-with-addons.js"></script>
+		<script src="node_modules/classnames/index.js"></script>
 		<script src="node_modules/react/dist/JSXTransformer.js"></script>
 		<script src="node_modules/director/build/director.js"></script>
 

examples/react/js/footer.jsx

@@ -23,8 +23,6 @@ var app = app || {};
 				);
 			}
 
-			// React idiom for shortcutting to `classSet` since it'll be used often
-			var cx = React.addons.classSet;
 			var nowShowing = this.props.nowShowing;
 			return (
 				<footer className="footer">
@@ -35,7 +33,7 @@ var app = app || {};
 						<li>
 							<a
 								href="#/"
-								className={cx({selected: nowShowing === app.ALL_TODOS})}>
+								className={classNames({selected: nowShowing === app.ALL_TODOS})}>
 									All
 							</a>
 						</li>
@@ -43,7 +41,7 @@ var app = app || {};
 						<li>
 							<a
 								href="#/active"
-								className={cx({selected: nowShowing === app.ACTIVE_TODOS})}>
+								className={classNames({selected: nowShowing === app.ACTIVE_TODOS})}>
 									Active
 							</a>
 						</li>
@@ -51,7 +49,7 @@ var app = app || {};
 						<li>
 							<a
 								href="#/completed"
-								className={cx({selected: nowShowing === app.COMPLETED_TODOS})}>
+								className={classNames({selected: nowShowing === app.COMPLETED_TODOS})}>
 									Completed
 							</a>
 						</li>

examples/react/js/todoItem.jsx

@@ -77,7 +77,7 @@ var app = app || {};
 
 		render: function () {
 			return (
-				<li className={React.addons.classSet({
+				<li className={classNames({
 					completed: this.props.todo.completed,
 					editing: this.props.editing
 				})}>

examples/react/node_modules/classnames/index.js

+/*!
+  Copyright (c) 2015 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+	'use strict';
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames () {
+		var classes = '';
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes += ' ' + arg;
+			} else if (Array.isArray(arg)) {
+				classes += ' ' + classNames.apply(null, arg);
+			} else if (argType === 'object') {
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes += ' ' + key;
+					}
+				}
+			}
+		}
+
+		return classes.substr(1);
+	}
+
+	if (typeof module !== 'undefined' && module.exports) {
+		module.exports = classNames;
+	} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
+		// register as 'classnames', consistent with npm package name
+		define('classnames', function () {
+			return classNames;
+		});
+	} else {
+		window.classNames = classNames;
+	}
+}());

examples/react/package.json

 {
   "private": true,
   "dependencies": {
+    "classnames": "^2.1.5",
     "director": "^1.2.0",
     "react": "^0.13.3",
     "todomvc-app-css": "^2.0.0",