Merge pull request #1340 from tastejs/react-backbone-update

Updates to the `react-backbone` example

examples/react-backbone/.gitignore

@@ -12,9 +12,12 @@ node_modules/jquery/dist/*
 node_modules/react/*
 !node_modules/react/dist
 node_modules/react/dist/*
-!node_modules/react/dist/react-with-addons.js
+!node_modules/react/dist/react.js
 !node_modules/react/dist/JSXTransformer.js
 
+node_modules/classnames/*
+!node_modules/classnames/index.js
+
 node_modules/todomvc-app-css/*
 !node_modules/todomvc-app-css/index.css
 

examples/react-backbone/index.html

@@ -11,13 +11,14 @@
 		<section id="todoapp"></section>
 		<footer id="info">
 			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://github.com/petehunt/">petehunt</a></p>
+			<p>Created by <a href="http://github.com/petehunt/">Pete Hunt</a></p>
 			<p>Part of<a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
 
 		<script src="node_modules/todomvc-common/base.js"></script>
-		<script src="node_modules/react/dist/react-with-addons.js"></script>
+		<script src="node_modules/react/dist/react.js"></script>
 		<script src="node_modules/react/dist/JSXTransformer.js"></script>
+		<script src="node_modules/classnames/index.js"></script>
 		<script src="node_modules/jquery/dist/jquery.js"></script>
 		<script src="node_modules/underscore/underscore.js"></script>
 		<script src="node_modules/backbone/backbone.js"></script>

examples/react-backbone/js/app.jsx

@@ -90,17 +90,17 @@ var app = app || {};
 				return;
 			}
 
-			var val = this.refs.newField.getDOMNode().value.trim();
+			var val = React.findDOMNode(this.refs.newField).value.trim();
 			if (val) {
 				this.props.todos.create({
 					title: val,
 					completed: false,
 					order: this.props.todos.nextOrder()
 				});
-				this.refs.newField.getDOMNode().value = '';
+				React.findDOMNode(this.refs.newField).value = '';
 			}
 
-			return false;
+			event.preventDefault();
 		},
 
 		toggleAll: function (event) {
@@ -212,7 +212,7 @@ var app = app || {};
 		}
 	});
 
-	React.renderComponent(
+	React.render(
 		<TodoApp todos={app.todos} />,
 		document.getElementById('todoapp')
 	);

examples/react-backbone/js/footer.jsx

@@ -26,8 +26,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 id="footer">
@@ -38,7 +36,7 @@ var app = app || {};
 						<li>
 							<a
 								href="#/"
-								className={cx({selected: nowShowing === app.ALL_TODOS})}>
+								className={classNames({selected: nowShowing === app.ALL_TODOS})}>
 									All
 							</a>
 						</li>
@@ -46,7 +44,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>
@@ -54,7 +52,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-backbone/js/todoItem.jsx

@@ -36,7 +36,7 @@ var app = app || {};
 			// immediately manipulate the DOM as if the rendering's over. Put it as a
 			// callback. Refer to app.jsx' `edit` method
 			this.props.onEdit(function () {
-				var node = this.refs.editField.getDOMNode();
+				var node = React.findDOMNode(this.refs.editField);
 				node.focus();
 				node.setSelectionRange(node.value.length, node.value.length);
 			}.bind(this));
@@ -58,7 +58,7 @@ var app = app || {};
 
 		render: function () {
 			return (
-				<li className={React.addons.classSet({
+				<li className={classNames({
 					completed: this.props.todo.get('completed'),
 					editing: this.props.editing
 				})}>

examples/react-backbone/node_modules/classnames/index.js

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

examples/react-backbone/node_modules/todomvc-common/base.js

@@ -114,7 +114,12 @@
 	})({});
 
 	if (location.hostname === 'todomvc.com') {
-		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
 	}
 	/* jshint ignore:end */
 
@@ -228,7 +233,7 @@
 			xhr.onload = function (e) {
 				var parsedResponse = JSON.parse(e.target.responseText);
 				if (parsedResponse instanceof Array) {
-					var count = parsedResponse.length
+					var count = parsedResponse.length;
 					if (count !== 0) {
 						issueLink.innerHTML = 'This app has ' + count + ' open issues';
 						document.getElementById('issue-count').style.display = 'inline';

examples/react-backbone/package.json

@@ -3,8 +3,9 @@
   "dependencies": {
     "backbone": "^1.1.2",
     "backbone.localstorage": "^1.1.7",
+    "classnames": "^2.1.2",
     "jquery": "^2.1.0",
-    "react": "^0.12.0",
+    "react": "^0.13.3",
     "todomvc-app-css": "^1.0.0",
     "todomvc-common": "^1.0.1",
     "underscore": "^1.6.0"