Merge branch 'petehunt-react' into gh-pages

index.html

@@ -144,6 +144,9 @@
 					<li class="routing labs">
 						<a href="architecture-examples/angularjs-perf/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. A version with several performance optimizations.">AngularJS <br>(optimized)</a>
 					</li>
+					<li class="routing labs">
+						<a href="labs/architecture-examples/react/" data-source="http://facebook.github.io/react/" data-content="React is a JavaScript library for building user interfaces.">React</a>
+					</li>
 				</ul>
 				<hr>
 				<h2>Compile To JavaScript</h2>

labs/architecture-examples/react/bower.json

+{
+  "name": "todomvc-react",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.7",
+    "react": "~0.3.2"
+  }
+}

labs/architecture-examples/react/bower_components/todomvc-common/base.js

+(function () {
+	'use strict';
+
+	// Underscore's Template Module
+	// Courtesy of underscorejs.org
+	var _ = (function (_) {
+		_.defaults = function (object) {
+			if (!object) {
+				return object;
+			}
+			for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
+				var iterable = arguments[argsIndex];
+				if (iterable) {
+					for (var key in iterable) {
+						if (object[key] == null) {
+							object[key] = iterable[key];
+						}
+					}
+				}
+			}
+			return object;
+		}
+
+		// By default, Underscore uses ERB-style template delimiters, change the
+		// following template settings to use alternative delimiters.
+		_.templateSettings = {
+			evaluate    : /<%([\s\S]+?)%>/g,
+			interpolate : /<%=([\s\S]+?)%>/g,
+			escape      : /<%-([\s\S]+?)%>/g
+		};
+
+		// When customizing `templateSettings`, if you don't want to define an
+		// interpolation, evaluation or escaping regex, we need one that is
+		// guaranteed not to match.
+		var noMatch = /(.)^/;
+
+		// Certain characters need to be escaped so that they can be put into a
+		// string literal.
+		var escapes = {
+			"'":      "'",
+			'\\':     '\\',
+			'\r':     'r',
+			'\n':     'n',
+			'\t':     't',
+			'\u2028': 'u2028',
+			'\u2029': 'u2029'
+		};
+
+		var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+		// JavaScript micro-templating, similar to John Resig's implementation.
+		// Underscore templating handles arbitrary delimiters, preserves whitespace,
+		// and correctly escapes quotes within interpolated code.
+		_.template = function(text, data, settings) {
+			var render;
+			settings = _.defaults({}, settings, _.templateSettings);
+
+			// Combine delimiters into one regular expression via alternation.
+			var matcher = new RegExp([
+				(settings.escape || noMatch).source,
+				(settings.interpolate || noMatch).source,
+				(settings.evaluate || noMatch).source
+			].join('|') + '|$', 'g');
+
+			// Compile the template source, escaping string literals appropriately.
+			var index = 0;
+			var source = "__p+='";
+			text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
+				source += text.slice(index, offset)
+					.replace(escaper, function(match) { return '\\' + escapes[match]; });
+
+				if (escape) {
+					source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+				}
+				if (interpolate) {
+					source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+				}
+				if (evaluate) {
+					source += "';\n" + evaluate + "\n__p+='";
+				}
+				index = offset + match.length;
+				return match;
+			});
+			source += "';\n";
+
+			// If a variable is not specified, place data values in local scope.
+			if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+			source = "var __t,__p='',__j=Array.prototype.join," +
+				"print=function(){__p+=__j.call(arguments,'');};\n" +
+				source + "return __p;\n";
+
+			try {
+				render = new Function(settings.variable || 'obj', '_', source);
+			} catch (e) {
+				e.source = source;
+				throw e;
+			}
+
+			if (data) return render(data, _);
+			var template = function(data) {
+				return render.call(this, data, _);
+			};
+
+			// Provide the compiled function source as a convenience for precompilation.
+			template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+			return template;
+		};
+
+		return _;
+	})({});
+
+	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 redirect() {
+		if (location.hostname === 'tastejs.github.io') {
+			location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
+		}
+	}
+
+	function findRoot() {
+		var base;
+
+		[/labs/, /\w*-examples/].forEach(function (href) {
+			var match = location.href.match(href);
+
+			if (!base && match) {
+				base = location.href.indexOf(match);
+			}
+		});
+
+		return location.href.substr(0, base);
+	}
+
+	function getFile(file, callback) {
+		if (!location.host) {
+			return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
+		}
+
+		var xhr = new XMLHttpRequest();
+
+		xhr.open('GET', findRoot() + file, true);
+		xhr.send();
+
+		xhr.onload = function () {
+			if (xhr.status === 200 && callback) {
+				callback(xhr.responseText);
+			}
+		};
+	}
+
+	function Learn(learnJSON, config) {
+		if (!(this instanceof Learn)) {
+			return new Learn(learnJSON, config);
+		}
+
+		var template, framework;
+
+		if (typeof learnJSON !== 'object') {
+			try {
+				learnJSON = JSON.parse(learnJSON);
+			} catch (e) {
+				return;
+			}
+		}
+
+		if (config) {
+			template = config.template;
+			framework = config.framework;
+		}
+
+		if (!template && learnJSON.templates) {
+			template = learnJSON.templates.todomvc;
+		}
+
+		if (!framework && document.querySelector('[data-framework]')) {
+			framework = document.querySelector('[data-framework]').getAttribute('data-framework');
+		}
+
+
+		if (template && learnJSON[framework]) {
+			this.frameworkJSON = learnJSON[framework];
+			this.template = template;
+
+			this.append();
+		}
+	}
+
+	Learn.prototype.append = function () {
+		var aside = document.createElement('aside');
+		aside.innerHTML = _.template(this.template, this.frameworkJSON);
+		aside.className = 'learn';
+
+		// Localize demo links
+		var demoLinks = aside.querySelectorAll('.demo-link');
+		Array.prototype.forEach.call(demoLinks, function (demoLink) {
+			demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
+		});
+
+		document.body.className = (document.body.className + ' learn-bar').trim();
+		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
+	};
+
+	redirect();
+	getFile('learn.json', Learn);
+})();

labs/architecture-examples/react/css/app.css

+/** Reset base.css #todoapp */
+#todoapp {
+	background: none;
+	margin: auto;
+	border: 0;
+	position: static;
+	box-shadow: none;
+}
+
+#todoapp:before {
+	display: none;
+	left: 100%;
+}
+
+.todoapp {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.9);
+	margin: 130px 0 40px 0;
+	border: 1px solid #ccc;
+	position: relative;
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+				0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+.todoapp:before {
+	content: '';
+	border-left: 1px solid #f5d6d6;
+	border-right: 1px solid #f5d6d6;
+	width: 2px;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	height: 100%;
+}
+
+.header {
+	padding-top: 15px;
+	border-radius: inherit;
+}
+
+.header:before {
+	content: '';
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 15px;
+	z-index: 2;
+	border-bottom: 1px solid #6c615c;
+	background: #8d7d77;
+	background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+	background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+	border-top-left-radius: 1px;
+	border-top-right-radius: 1px;
+}
+
+.new-todo {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	line-height: 1.4em;
+	border: 0;
+	outline: none;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-o-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.02);
+	z-index: 2;
+	box-shadow: none;
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px dotted #adadad;
+}
+
+.toggle-all-label {
+	display: none;
+}
+
+.toggle-all {
+	position: absolute;
+	top: -42px;
+	left: -4px;
+	width: 40px;
+	text-align: center;
+	border: none; /* Mobile Safari */
+}
+
+.toggle-all:before {
+	content: '»';
+	font-size: 28px;
+	color: #d9d9d9;
+	padding: 0 25px 7px;
+}
+
+.toggle-all:checked:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px dotted #ccc;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 13px 17px 12px 17px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle:after {
+	content: '✔';
+	line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+	font-size: 20px;
+	color: #d9d9d9;
+	text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+.todo-list li .toggle:checked:after {
+	color: #85ada7;
+	text-shadow: 0 1px 0 #669991;
+	bottom: 1px;
+	position: relative;
+}
+
+.todo-list li label {
+	word-break: break-word;
+	padding: 15px;
+	margin-left: 45px;
+	display: block;
+	line-height: 1.2;
+	-webkit-transition: color 0.4s;
+	-moz-transition: color 0.4s;
+	-ms-transition: color 0.4s;
+	-o-transition: color 0.4s;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #a9a9a9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 22px;
+	color: #a88a8a;
+	-webkit-transition: all 0.2s;
+	-moz-transition: all 0.2s;
+	-ms-transition: all 0.2s;
+	-o-transition: all 0.2s;
+	transition: all 0.2s;
+}
+
+.todo-list li .destroy:hover {
+	text-shadow: 0 0 1px #000,
+				 0 0 10px rgba(199, 107, 107, 0.8);
+	-webkit-transform: scale(1.3);
+	-moz-transform: scale(1.3);
+	-ms-transform: scale(1.3);
+	-o-transform: scale(1.3);
+	transform: scale(1.3);
+}
+
+.todo-list li .destroy:after {
+	content: '✖';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 0 15px;
+	position: absolute;
+	right: 0;
+	bottom: -31px;
+	left: 0;
+	height: 20px;
+	z-index: 1;
+	text-align: center;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 31px;
+	left: 0;
+	height: 50px;
+	z-index: -1;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+				0 6px 0 -3px rgba(255, 255, 255, 0.8),
+				0 7px 1px -3px rgba(0, 0, 0, 0.3),
+				0 43px 0 -6px rgba(255, 255, 255, 0.8),
+				0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: #83756f;
+	margin: 2px;
+	text-decoration: none;
+}
+
+.filters li a.selected {
+	font-weight: bold;
+}
+
+.clear-completed {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	background: rgba(0, 0, 0, 0.1);
+	font-size: 11px;
+	padding: 0 10px;
+	border-radius: 3px;
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+.clear-completed:hover {
+	background: rgba(0, 0, 0, 0.15);
+	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #a6a6a6;
+	font-size: 12px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+	text-align: center;
+}
+
+.info a {
+	color: inherit;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+
+	.toggle-all {
+		top: -56px;
+		left: -15px;
+		width: 65px;
+		height: 41px;
+		-webkit-transform: rotate(90deg);
+		transform: rotate(90deg);
+		-webkit-appearance: none;
+		appearance: none;
+	}
+}
+
+@media (min-width: 899px) {
+	/**body*/.learn-bar .todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}
+
+
+#benchmark {
+	position: absolute;
+	left: 0;
+	top: 0;
+	padding: 10px;
+}
+
+.submitButton {
+	display: none;
+}

labs/architecture-examples/react/index.html

+<!doctype html>
+<html lang="en" data-framework="react">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<title>React • TodoMVC</title>
+		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
+		<link rel="stylesheet" href="css/app.css">
+	</head>
+	<body>
+		<div id="todoapp"></div>
+		<div id="benchmark"></div>
+
+		<script src="bower_components/todomvc-common/base.js"></script>
+		<script src="bower_components/react/react.js"></script>
+		<script src="bower_components/react/JSXTransformer.js"></script>
+
+		<script type="text/jsx" src="js/utils.js"></script>
+		<script type="text/jsx" src="js/todoItem.js"></script>
+		<script type="text/jsx" src="js/footer.js"></script>
+		<script type="text/jsx" src="js/app.js"></script>
+	</body>
+</html>

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

+/**
+ * @jsx React.DOM
+ */
+(function (window, React) {
+	'use strict';
+
+	var TodoApp = React.createClass({
+		getInitialState: function () {
+			return {
+				todos: Utils.store('react-todos'),
+				editing: null
+			};
+		},
+
+		handleSubmit: React.autoBind(function () {
+			var val = this.refs.newField.getDOMNode().value.trim();
+			var todos;
+			var newTodo;
+
+			if (val) {
+				todos = this.state.todos;
+				newTodo = {
+					id: Utils.uuid(),
+					title: val,
+					completed: false
+				};
+				this.setState({ todos: todos.concat([newTodo]) });
+				this.refs.newField.getDOMNode().value = '';
+			}
+
+			return false;
+		}),
+
+		toggleAll: function (event) {
+			var checked = event.nativeEvent.target.checked;
+
+			this.state.todos.map(function (todo) {
+				todo.completed = checked;
+			});
+
+			this.setState({ todos: this.state.todos });
+		},
+
+		toggle: function (todo) {
+			todo.completed = !todo.completed;
+			this.setState({ todos: this.state.todos });
+		},
+
+		destroy: function (todo) {
+			var newTodos = this.state.todos.filter(function (candidate) {
+				return candidate.id !== todo.id;
+			});
+
+			this.setState({ todos: newTodos });
+		},
+
+		edit: function (todo) {
+			this.setState({ editing: todo.id });
+		},
+
+		save: function (todo, text) {
+			todo.title = text;
+			this.setState({todos: this.state.todos, editing: null});
+		},
+
+		cancel: React.autoBind(function () {
+			this.setState({editing: null});
+		}),
+
+		clearCompleted: function () {
+			var newTodos = this.state.todos.filter(function (todo) {
+				return !todo.completed;
+			});
+
+			this.setState({todos: newTodos});
+		},
+
+		componentDidUpdate: function () {
+			Utils.store('react-todos', this.state.todos);
+		},
+
+		render: function () {
+			var footer = null;
+			var main = null;
+			var todoItems = {};
+			var activeTodoCount;
+			var completedCount;
+
+			this.state.todos.map(function (todo) {
+				todoItems[todo.id] = (
+					<TodoItem
+						todo={ todo }
+						onToggle={ this.toggle.bind(this, todo) }
+						onDestroy={ this.destroy.bind(this, todo) }
+						onEdit={ this.edit.bind(this, todo) }
+						editing={ this.state.editing === todo.id }
+						onSave={ this.save.bind(this, todo) }
+						onCancel={ this.cancel }
+					/>
+				);
+			}.bind(this));
+
+			activeTodoCount = this.state.todos.filter(function (todo) {
+				return !todo.completed;
+			}).length;
+
+			completedCount = this.state.todos.length - activeTodoCount;
+
+			if (activeTodoCount || completedCount) {
+				footer =
+					<TodoFooter
+						count={ activeTodoCount }
+						completedCount={ completedCount }
+						onClearCompleted={ this.clearCompleted.bind(this) }
+					/>;
+			}
+
+			if (this.state.todos.length) {
+				main = (
+					<section class="main">
+						<input class="toggle-all" type="checkbox" onChange={ this.toggleAll.bind(this) } checked={activeTodoCount === 0} />
+						<label class="toggle-all-label">Mark all as complete</label>
+						<ul class="todo-list">
+							{ todoItems }
+						</ul>
+					</section>
+				);
+			}
+
+			return (
+				<div>
+					<section class="todoapp">
+						<header class="header">
+							<h1>todos</h1>
+							<form onSubmit={ this.handleSubmit }>
+								<input
+									ref="newField"
+									class="new-todo"
+									placeholder="What needs to be done?"
+									autofocus="autofocus"
+								/>
+								<input type="submit" class="submitButton" />
+							</form>
+						</header>
+						{main}
+						{footer}
+					</section>
+					<footer class="info">
+						<p>Double-click to edit a todo</p>
+						<p>Created by{' '}<a href="http://github.com/petehunt/">petehunt</a></p>
+						<p>Part of{' '}<a href="http://todomvc.com">TodoMVC</a></p>
+					</footer>
+				</div>
+			);
+		}
+	});
+
+	React.renderComponent(<TodoApp />, document.getElementById('todoapp'));
+})(window, React);

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

+/**
+ * @jsx React.DOM
+ */
+(function (window) {
+	'use strict';
+
+	window.TodoFooter = React.createClass({
+		render: function () {
+			var activeTodoWord = Utils.pluralize(this.props.count, 'item');
+			var clearButton = null;
+
+			if (this.props.completedCount > 0) {
+				clearButton = (
+					<button
+						class="clear-completed"
+						onClick={ this.props.onClearCompleted }>
+						Clear completed ({ this.props.completedCount })
+					</button>
+				);
+			}
+
+			return (
+				<footer class="footer">
+					<span class="todo-count">
+						<strong>{this.props.count}</strong>{' '}{ activeTodoWord }{' '}left
+					</span>
+					{clearButton}
+				</footer>
+			);
+		}
+	});
+})(window);

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

+/**
+ * @jsx React.DOM
+ */
+
+(function (window) {
+	'use strict';
+
+	var ESCAPE_KEY = 27;
+
+	window.TodoItem = React.createClass({
+		handleSubmit: React.autoBind(function () {
+			var val = this.state.editText.trim();
+			if (val) {
+				this.props.onSave(val);
+				this.setState({ editText: val });
+			} else {
+				this.props.onDestroy();
+			}
+			return false;
+		}),
+
+		handleEdit: React.autoBind(function () {
+			this.props.onEdit();
+			var node = this.refs.editField.getDOMNode();
+			node.focus();
+			node.setSelectionRange(node.value.length, node.value.length);
+		}),
+
+		handleKey: React.autoBind(function (event) {
+			if (event.nativeEvent.keyCode === ESCAPE_KEY) {
+				this.setState({ editText: this.props.todo.title });
+				this.props.onCancel();
+			} else {
+				this.setState({ editText: event.target.value });
+			}
+		}),
+
+		getInitialState: function () {
+			return { editText: this.props.todo.title };
+		},
+
+		componentWillReceiveProps: function (nextProps) {
+			if (nextProps.todo.title !== this.props.todo.title) {
+				this.setState(this.getInitialState());
+			}
+		},
+
+		render: function () {
+			return (
+				<li class={cx({
+					completed: this.props.todo.completed,
+					editing: this.props.editing
+				})}>
+					<div class="view">
+						<input
+							class="toggle"
+							type="checkbox"
+							checked={ this.props.todo.completed ? 'checked' : null }
+							onChange={ this.props.onToggle }
+						/>
+						<label onDoubleClick={ this.handleEdit }>{ this.props.todo.title }</label>
+						<button class='destroy' onClick={ this.props.onDestroy } />
+					</div>
+					<form onSubmit={this.handleSubmit}>
+						<input
+							ref="editField"
+							class="edit"
+							value={ this.state.editText }
+							onBlur={ this.handleSubmit }
+							onKeyUp={ this.handleKey }
+						/>
+						<input type="submit" class="submitButton" />
+					</form>
+				</li>
+			);
+		}
+	});
+})(window);

labs/architecture-examples/react/js/utils.js

+(function (window) {
+	'use strict';
+
+	window.Utils = {
+		uuid: function () {
+			/*jshint bitwise:false */
+			var i, random;
+			var uuid = '';
+
+			for (i = 0; i < 32; i++) {
+				random = Math.random() * 16 | 0;
+				if (i === 8 || i === 12 || i === 16 || i === 20) {
+					uuid += '-';
+				}
+				uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
+			}
+
+			return uuid;
+		},
+
+		pluralize: function (count, word) {
+			return count === 1 ? word : word + 's';
+		},
+
+		store: function (namespace, data) {
+			if (data) {
+				return localStorage.setItem(namespace, JSON.stringify(data));
+			}
+
+			var store = localStorage.getItem(namespace);
+			return (store && JSON.parse(store)) || [];
+		}
+	};
+
+	window.cx = function (obj) {
+		var s = '';
+		var key;
+
+		for (key in obj) {
+			if (obj.hasOwnProperty(key) && obj[key]) {
+				s += key + ' ';
+			}
+		}
+
+		return s;
+	};
+})(window);
\ No newline at end of file

labs/architecture-examples/react/readme.md

+# React TodoMVC Example
+
+> React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.
+
+> _[React - facebook.github.io/react](http://facebook.github.io/react)_
+
+
+## Learning React
+
+The [React getting started documentation](http://facebook.github.io/react/docs/getting-started.html) is a great way to get started.
+
+Here are some links you may find helpful:
+
+* [Tutorial](http://facebook.github.io/react/docs/tutorial.html)
+* [Philosophy](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood)
+* [Common Questions](http://facebook.github.io/react/docs/common-questions.html)
+* [Support](http://facebook.github.io/react/support.html)
+
+_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

learn.json

@@ -1443,6 +1443,31 @@
 			}]
 		}]
 	},
+	"react": {
+		"name": "React",
+		"description": "React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.",
+		"homepage": "facebook.github.io/react",
+		"examples": [{
+			"name": "Architecture Examples",
+			"url": "labs/architecture-examples/react"
+		}],
+		"link_groups": [{
+			"heading": "Official Resources",
+			"links": [{
+				"name": "Tutorial",
+				"url": "http://facebook.github.io/react/docs/tutorial.html"
+			}, {
+				"name": "Philosophy",
+				"url": "http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood"
+			}, {
+				"name": "Common Questions",
+				"url": "http://facebook.github.io/react/docs/common-questions.html"
+			}, {
+				"name": "Support",
+				"url": "http://facebook.github.io/react/support.html"
+			}]
+		}]
+	},
 	"sammyjs": {
 		"name": "Sammy.js",
 		"description": "A small web framework with class.",

readme.md

@@ -42,6 +42,7 @@ To help solve this problem, we created TodoMVC - a project which offers the same
 
 We also have a number of in-progress applications in Labs:
 
+- [React](http://facebook.github.io/react)
 - [Meteor](http://meteor.com)
 - [Derby](http://derbyjs.com)
 - [CanJS](http://canjs.us)