Initial add of React TodoMVC to labs

React is a JavaScript library for building user interfaces by Facebook and Instagram. It powers many components on Facebook.com and all of Instagram.com is written with it. We have two TodoMVC examples checked into our repo: this one, which has no dependencies, and another one which showcases Backbone integration. I've only included the first one for now, if you guys think it's a good idea I can put out a PR for the one with Backbone integration. I read the contributing guide and I think this meets the standards, let me know if I missed something.

Initial add of React TodoMVC to labs
React is a JavaScript library for building user interfaces by Facebook and Instagram. It powers many components on Facebook.com and all of Instagram.com is written with it. We have two TodoMVC examples checked into our repo: this one, which has no dependencies, and another one which showcases Backbone integration. I've only included the first one for now, if you guys think it's a good idea I can put out a PR for the one with Backbone integration. I read the contributing guide and I think this meets the standards, let me know if I missed something.
37589b39 · petehunt · f22dbf85 · 37589b39 · 37589b39 · 37589b39
Commit 37589b39 authored May 29, 2013 by petehunt
16 changed files
--- a/index.html
+++ b/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>

--- a/labs/architecture-examples/react/bower.json
+++ b/labs/architecture-examples/react/bower.json
+{
+  "name": "todomvc-react",
+  "version": "0.0.0",
+  "dependencies": {
+    "todomvc-common": "~0.1.7",
+    "react": "~0.3.2"
+  }
+}
--- a/labs/architecture-examples/react/bower_components/react/JSXTransformer.js
+++ b/labs/architecture-examples/react/bower_components/react/JSXTransformer.js
--- a/labs/architecture-examples/react/bower_components/react/react.js
+++ b/labs/architecture-examples/react/bower_components/react/react.js
--- a/labs/architecture-examples/react/bower_components/todomvc-common/base.css
+++ b/labs/architecture-examples/react/bower_components/todomvc-common/base.css
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	/*-moz-appearance: none;*/
+	-ms-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+}
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #eaeaea url('bg.png');
+	color: #4d4d4d;
+	width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-font-smoothing: antialiased;
+	-ms-font-smoothing: antialiased;
+	-o-font-smoothing: antialiased;
+	font-smoothing: antialiased;
+}
+#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%;
+}
+#todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+}
+#todoapp input:-moz-placeholder {
+	font-style: italic;
+	color: #a9a9a9;
+}
+#todoapp h1 {
+	position: absolute;
+	top: -120px;
+	width: 100%;
+	font-size: 70px;
+	font-weight: bold;
+	text-align: center;
+	color: #b3b3b3;
+	color: rgba(255, 255, 255, 0.3);
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	-ms-text-rendering: optimizeLegibility;
+	-o-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+#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,
+.edit {
+	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;
+}
+label[for='toggle-all'] {
+	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;
+	}
+}
+.hidden{
+	display:none;
+}
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+.learn h3 {
+	font-size: 24px;
+}
+.learn h4 {
+	font-size: 18px;
+}
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+.learn li {
+	line-height: 20px;
+}
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+.quote p {
+	font-style: italic;
+}
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+.quote footer img {
+	border-radius: 3px;
+}
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+/**body*/.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+@media (min-width: 899px) {
+	/**body*/.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+	/**body*/.learn-bar > .learn {
+		left: 8px;
+	}
+	/**body*/.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}
--- a/labs/architecture-examples/react/bower_components/todomvc-common/base.js
+++ b/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);
+})();
--- a/labs/architecture-examples/react/bower_components/todomvc-common/bg.png
+++ b/labs/architecture-examples/react/bower_components/todomvc-common/bg.png
--- a/labs/architecture-examples/react/css/app.css
+++ b/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;
+}
--- a/labs/architecture-examples/react/index.html
+++ b/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>
--- a/labs/architecture-examples/react/js/app.js
+++ b/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);
--- a/labs/architecture-examples/react/js/footer.js
+++ b/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);
--- a/labs/architecture-examples/react/js/todoItem.js
+++ b/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);
--- a/labs/architecture-examples/react/js/utils.js
+++ b/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
--- a/labs/architecture-examples/react/readme.md
+++ b/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)._
--- a/learn.json
+++ b/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.",

--- a/readme.md
+++ b/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)