From 118e64c40076299eccea76b894441ce7a07bcff2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 13 Aug 2014 13:15:29 -0700 Subject: [PATCH] Update Jekyll (#2035) --- acknowledgements.html | 305 ++++++++++++++---- blog/2013/06/27/community-roundup-3.html | 6 +- .../07/02/react-v0-4-autobind-by-default.html | 6 +- ...-4-prop-validation-and-default-values.html | 6 +- blog/2013/07/23/community-roundup-5.html | 2 +- .../use-react-and-jsx-in-ruby-on-rails.html | 6 +- blog/2013/08/05/community-roundup-6.html | 6 +- ...-react-and-jsx-in-python-applications.html | 10 +- blog/2013/08/26/community-roundup-7.html | 2 +- blog/2013/10/03/community-roundup-9.html | 6 +- blog/2013/11/05/thinking-in-react.html | 2 +- blog/2013/11/06/community-roundup-10.html | 2 +- blog/2013/12/23/community-roundup-12.html | 4 +- blog/2013/12/30/community-roundup-13.html | 4 +- blog/2014/01/06/community-roundup-14.html | 4 +- blog/2014/02/05/community-roundup-15.html | 4 +- blog/2014/02/16/react-v0.9-rc1.html | 6 +- blog/2014/02/20/react-v0.9.html | 6 +- blog/2014/03/19/react-v0.10-rc1.html | 2 +- blog/2014/03/21/react-v0.10.html | 2 +- blog/2014/03/28/the-road-to-1.0.html | 2 +- blog/2014/04/04/reactnet.html | 16 +- blog/2014/07/13/react-v0.11-rc1.html | 6 +- blog/2014/07/17/react-v0.11.html | 6 +- blog/2014/07/28/community-roundup-20.html | 10 +- .../30/flux-actions-and-the-dispatcher.html | 2 +- blog/2014/08/03/community-roundup-21.html | 6 +- blog/index.html | 24 +- blog/page2/index.html | 22 +- blog/page3/index.html | 6 +- blog/page4/index.html | 20 +- blog/page5/index.html | 8 +- blog/page6/index.html | 4 +- blog/page7/index.html | 24 +- blog/page8/index.html | 14 +- blog/page9/index.html | 12 +- docs/animation.html | 10 +- docs/class-name-manipulation.html | 4 +- docs/component-api.html | 18 +- docs/component-specs.html | 34 +- docs/displaying-data.html | 4 +- docs/events.html | 32 +- docs/flux-overview.html | 2 +- docs/flux-todo-list.html | 30 +- docs/forms.html | 20 +- docs/getting-started.html | 14 +- docs/getting-started.zh-CN.html | 14 +- docs/index.html | 14 +- docs/interactivity-and-dynamic-uis.html | 2 +- docs/jsx-gotchas.html | 16 +- docs/jsx-in-depth.html | 18 +- docs/more-about-refs.html | 22 +- docs/multiple-components.html | 12 +- docs/perf.html | 2 +- docs/pure-render-mixin.html | 2 +- docs/reconciliation.html | 14 +- docs/reference.html | 14 +- docs/reusable-components.html | 10 +- docs/tags-and-attributes.html | 8 +- docs/test-utils.html | 32 +- docs/thinking-in-react.html | 2 +- docs/top-level-api.html | 20 +- docs/tutorial.html | 50 +-- docs/two-way-binding-helpers.html | 8 +- docs/update.html | 16 +- docs/working-with-the-browser.html | 2 +- downloads.html | 16 +- feed.xml | 46 +-- tips/children-props-type.html | 4 +- tips/children-undefined.html | 2 +- tips/communicate-between-components.html | 2 +- tips/controlled-input-null-value.html | 2 +- tips/dom-event-listeners.html | 2 +- tips/expose-component-functions.html | 2 +- tips/false-in-jsx.html | 6 +- tips/if-else-in-JSX.html | 6 +- tips/initial-ajax.html | 2 +- tips/inline-styles.html | 2 +- ...ps-in-getInitialState-as-anti-pattern.html | 6 +- tips/references-to-components.html | 4 +- tips/style-props-value-px.html | 2 +- 81 files changed, 660 insertions(+), 463 deletions(-) diff --git a/acknowledgements.html b/acknowledgements.html index 74b8a41edf..6ae4001503 100644 --- a/acknowledgements.html +++ b/acknowledgements.html @@ -64,190 +64,375 @@

We'd like to thank all of our contributors:

+ + - + + +

In addition, we're grateful to Jeff Barczewski for allowing us to use the react package name on npm and to Christopher Aue for letting us use the reactjs.com domain name and the @reactjs username on Twitter.

diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index db8aec6c07..5ee3fa6c7f 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -113,14 +113,14 @@

Grunt task for compiling Facebook React's .jsx templates into .js

-
grunt.initConfig({
+
grunt.initConfig({
   react: {
     app: {
       options: { extension: 'js' },
       files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
 

 
It also works great with grunt-browserify!

-
browserify: {
+
browserify: {
   options: {
     transform: [ require('grunt-react').browserify ]
   },
@@ -151,7 +151,7 @@
 
 

 
Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.

-
{div, h3, textarea} = React.DOM
+
{div, h3, textarea} = React.DOM
 (div {className: 'MarkdownEditor'}, [
   (h3 {}, 'Input'),
   (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
diff --git a/blog/2013/07/02/react-v0-4-autobind-by-default.html b/blog/2013/07/02/react-v0-4-autobind-by-default.html
index 32ec8d2836..7d44f1887f 100644
--- a/blog/2013/07/02/react-v0-4-autobind-by-default.html
+++ b/blog/2013/07/02/react-v0-4-autobind-by-default.html
@@ -100,7 +100,7 @@
 
If you take a look at most of our current examples, you'll see us using React.autoBind for event handlers. This is used in place of Function.prototype.bind. Remember that in JS, function calls are late-bound. That means that if you simply pass a function around, the this used inside won't necessarily be the this you expect. Function.prototype.bind creates a new, properly bound, function so that when called, this is exactly what you expect it to be.

 
 
Before we launched React, we would write this:

-
React.createClass({
+
React.createClass({
   onClick: function(event) {/* do something with this */},
   render: function() {
     return <button onClick={this.onClick.bind(this)} />;
@@ -108,7 +108,7 @@
 });
 

 
We wrote React.autoBind as a way to cache the function creation and save on memory usage. Since render can get called multiple times, if you used this.onClick.bind(this) you would actually create a new function on each pass. With React v0.3 you were able to write this instead:

-
React.createClass({
+
React.createClass({
   onClick: React.autoBind(function(event) {/* do something with this */}),
   render: function() {
     return <button onClick={this.onClick} />;
@@ -118,7 +118,7 @@
 
After using React.autoBind for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within React.createClass will already be bound to the correct instance.

 
 
Starting with v0.4 you can just write this:

-
React.createClass({
+
React.createClass({
   onClick: function(event) {/* do something with this */},
   render: function() {
     return <button onClick={this.onClick} />;
diff --git a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
index 46b24cce1e..40f19e0a65 100644
--- a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+++ b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
@@ -100,7 +100,7 @@
 
Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.

 
 
React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.

-
React.createClass({
+
React.createClass({
   propTypes: {
     // An optional string prop named "description".
     description: React.PropTypes.string,
@@ -115,7 +115,7 @@
 });
 
Default Values #

 
One common pattern we've seen with our React code is to do something like this:

-
React.createClass({
+
React.createClass({
   render: function() {
     var value = this.props.value || 'default value';
     return <div>{value}</div>;
@@ -123,7 +123,7 @@
 });
 

 
Do this for a few props across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:

-
React.createClass({
+
React.createClass({
   getDefaultProps: function() {
     return {
       value: 'default value'
diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html
index f835ea1133..ad8cbcb9a6 100644
--- a/blog/2013/07/23/community-roundup-5.html
+++ b/blog/2013/07/23/community-roundup-5.html
@@ -143,7 +143,7 @@
 

 
React Chosen Wrapper #

 
Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

-
React.renderComponent(
+
React.renderComponent(
   <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
     <option value="Facebook">Facebook</option>
     <option value="Harvest">Harvest</option>
diff --git a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
index 3212a35978..eb7dff47cb 100644
--- a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+++ b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
@@ -105,18 +105,18 @@
 
 
Packaging react.js #

 
To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

-
# config/environments/development.rb
+
# config/environments/development.rb
 
 MyApp::Application.configure do
   config.react.variant = :development
   # use :production in production.rb
 end
-
// app/assets/javascript/application.js
+
// app/assets/javascript/application.js
 
 //= require react
 
Writing JSX #

 
When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 React.renderComponent(<MyComponent/>, document.body)
 
Asset Pipeline #

 
react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html
index 2cad633d5a..32471a94ce 100644
--- a/blog/2013/08/05/community-roundup-6.html
+++ b/blog/2013/08/05/community-roundup-6.html
@@ -104,7 +104,7 @@
 
 

 
Browserify v2 transform for text/jsx. Basic usage is:

-
% browserify -t reactify main.jsx
+
% browserify -t reactify main.jsx
 

 
reactify transform activates for files with either .jsx extension or /** @jsx React.DOM */ pragma as a first line for any .js file.

 
@@ -112,7 +112,7 @@
 

 
React Integration with Este #

 
Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.

-
este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
+
este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
   render: ->
     @div [
       este.demos.react.todoList 'items': @state['items']
@@ -124,7 +124,7 @@
           'value': @state['text']
           'autoFocus': true
           'ref': 'textInput'
-        @button "Add ##{@state['items'].length + 1}"
+        @button "Add ##{@state['items'].length + 1}"
       ]
     ]
 

diff --git a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html
index 3c93b5054d..2ad58b8f64 100644
--- a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+++ b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html
@@ -98,7 +98,7 @@
       
Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

 
Usage #

 
Transform your JSX files via the provided jsx module:

-
from react import jsx
+
from react import jsx
 
 # For multiple paths, use the JSXTransformer class.
 transformer = jsx.JSXTransformer()
@@ -109,21 +109,21 @@
 jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
 

 
For full paths to React files, use the source module:

-
from react import source
+
from react import source
 
 # path_for raises IOError if the file doesn't exist.
 react_js = source.path_for('react.min.js')
 
Django #

 
PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:

-
PIPELINE_COMPILERS = (
+
PIPELINE_COMPILERS = (
   'react.utils.pipeline.JSXCompiler',
 )
 
Installation #

 
PyReact is hosted on PyPI, and can be installed with pip:

-
$ pip install PyReact
+
$ pip install PyReact
 

 
Alternatively, add it into your requirements file:

-
PyReact==0.1.1
+
PyReact==0.1.1
 

 
Dependencies: PyReact uses PyExecJS to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend PyV8.

 
diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html
index eaeca1dac3..ee751bcf3a 100644
--- a/blog/2013/08/26/community-roundup-7.html
+++ b/blog/2013/08/26/community-roundup-7.html
@@ -116,7 +116,7 @@
 
This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.

 
 
The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.

-
var MyComponent = React.createClass({
+
var MyComponent = React.createClass({
  mixins: [MeteorMixin],
 
  getMeteorState: function() {
diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html
index 8c40766311..c3afc1deca 100644
--- a/blog/2013/10/03/community-roundup-9.html
+++ b/blog/2013/10/03/community-roundup-9.html
@@ -123,7 +123,7 @@
 

 
Pump - Clojure bindings for React #

 
Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.

-
(ns your.app
+
(ns your.app
   (:require-macros [pump.def-macros :refer [defr]])
   (:require [pump.core]))
 
@@ -140,7 +140,7 @@
 
 

 
A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.

-
npm install -g jsxhint
+
npm install -g jsxhint
 

 
Check it out on GitHub...

 

@@ -164,7 +164,7 @@
 
React is all about components. So let's build one.

 
 
Let's call it Table (to avoid any confusion what the component is about).

-
var Table = React.createClass({
+
var Table = React.createClass({
   /*stuff goeth here*/
 });
 

diff --git a/blog/2013/11/05/thinking-in-react.html b/blog/2013/11/05/thinking-in-react.html
index 5b13be0839..043bab72d3 100644
--- a/blog/2013/11/05/thinking-in-react.html
+++ b/blog/2013/11/05/thinking-in-react.html
@@ -104,7 +104,7 @@
 
Mockup

 
 
Our JSON API returns some data that looks like this:

-
[
+
[
   {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
   {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
   {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html
index 2b1bc848e3..88aa9235e7 100644
--- a/blog/2013/11/06/community-roundup-10.html
+++ b/blog/2013/11/06/community-roundup-10.html
@@ -156,7 +156,7 @@
 
Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.

 
 
Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:

-
/**
+
/**
  * 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
diff --git a/blog/2013/12/23/community-roundup-12.html b/blog/2013/12/23/community-roundup-12.html
index 7db85fd0ae..2ffe2956f8 100644
--- a/blog/2013/12/23/community-roundup-12.html
+++ b/blog/2013/12/23/community-roundup-12.html
@@ -114,7 +114,7 @@
 
 

 
We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate

-
componentWillUpdate: function() {
+
componentWillUpdate: function() {
   var node = this.getDOMNode();
   this.shouldScrollBottom =
     (node.scrollTop + node.offsetHeight) === node.scrollHeight;
@@ -158,7 +158,7 @@ componentDidUpdate: function() {
 

 
Hoodie React TodoMVC #

 
Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.

-
hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
+
hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
 

 
Check out on GitHub...

 
JSX Compiler #

diff --git a/blog/2013/12/30/community-roundup-13.html b/blog/2013/12/30/community-roundup-13.html
index b650ff8588..df6a6a042d 100644
--- a/blog/2013/12/30/community-roundup-13.html
+++ b/blog/2013/12/30/community-roundup-13.html
@@ -120,7 +120,7 @@

React + Socket.io #

Geert Pasteels made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!

-
changeHandler: function (data) {
+
changeHandler: function (data) {
   if (!_.isEqual(data.state, this.state) && this.path === data.path) {
     this.setState(data.state);
   }
@@ -139,7 +139,7 @@
 
Check it out on GitHub...

 
cssobjectify #

 
Andrey Popp implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.

-
/* style.css */
+
/* style.css */
 MyComponent {
   font-size: 12px;
   background-color: red;
diff --git a/blog/2014/01/06/community-roundup-14.html b/blog/2014/01/06/community-roundup-14.html
index ac037c54a3..96e1450d8b 100644
--- a/blog/2014/01/06/community-roundup-14.html
+++ b/blog/2014/01/06/community-roundup-14.html
@@ -117,7 +117,7 @@
 
Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.

 
 

-
git clone https://github.com/necrodome/react-rails-tutorial
+
git clone https://github.com/necrodome/react-rails-tutorial
 cd react-rails-tutorial
 bundle install
 rake db:migrate
@@ -135,7 +135,7 @@ rails s
 
Check out the blog post...

 
React Infinite Scroll #

 
Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.

-
<InfiniteScroll
+
<InfiniteScroll
   pageStart={0}
   loadMore={loadFunc}
   hasMore={true || false}
diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html
index 560e2c431f..76969fa530 100644
--- a/blog/2014/02/05/community-roundup-15.html
+++ b/blog/2014/02/05/community-roundup-15.html
@@ -132,7 +132,7 @@
 
Creighton Kirkendall created Kioo, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.

 
 
A basic example from github:

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html lang="en">
   <body>
     <header>
@@ -144,7 +144,7 @@
     <div class="content">place holder</div>
   </body>
 </html>
-
...
+
...
 
 (defn my-nav-item [[caption func]]
   (kioo/component "main.html" [:.nav-item]
diff --git a/blog/2014/02/16/react-v0.9-rc1.html b/blog/2014/02/16/react-v0.9-rc1.html
index d06a0cbe4a..7d5ecc4a14 100644
--- a/blog/2014/02/16/react-v0.9-rc1.html
+++ b/blog/2014/02/16/react-v0.9-rc1.html
@@ -115,19 +115,19 @@ Minified build for production: file an issue on GitHub if you see anything awry.

 
Upgrade Notes #

 
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:

-
<div>
+
<div>
   Monkeys:
   {listOfMonkeys} {submitButton}
 </div>
 

 
In v0.8 and below, it was transformed to the following:

-
React.DOM.div(null,
+
React.DOM.div(null,
   " Monkeys: ",
   listOfMonkeys, submitButton
 )
 

 
In v0.9, it will be transformed to this JS instead:

-
React.DOM.div(null,
+
React.DOM.div(null,
   "Monkeys:",
   listOfMonkeys, " ", submitButton
 )
diff --git a/blog/2014/02/20/react-v0.9.html b/blog/2014/02/20/react-v0.9.html
index e41d86f81b..081233ad52 100644
--- a/blog/2014/02/20/react-v0.9.html
+++ b/blog/2014/02/20/react-v0.9.html
@@ -121,19 +121,19 @@ Minified build for production: JSX Whitespace #
 
In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:

-
<div>
+
<div>
   Monkeys:
   {listOfMonkeys} {submitButton}
 </div>
 

 
In v0.8 and below, it was transformed to the following:

-
React.DOM.div(null,
+
React.DOM.div(null,
   " Monkeys: ",
   listOfMonkeys, submitButton
 )
 

 
In v0.9, it will be transformed to this JS instead:

-
React.DOM.div(null,
+
React.DOM.div(null,
   "Monkeys:",
   listOfMonkeys, " ", submitButton
 )
diff --git a/blog/2014/03/19/react-v0.10-rc1.html b/blog/2014/03/19/react-v0.10-rc1.html
index cb2b6baa8c..dfb698b840 100644
--- a/blog/2014/03/19/react-v0.10-rc1.html
+++ b/blog/2014/03/19/react-v0.10-rc1.html
@@ -119,7 +119,7 @@ Minified build for production: this page. Most of the time you can solve your pattern by using refs.

 
 
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

-
// This is a common pattern. However instance here really refers to a
+
// This is a common pattern. However instance here really refers to a
 // "descriptor", not necessarily the mounted instance.
 var instance = <MyComponent/>;
 React.renderComponent(instance);
diff --git a/blog/2014/03/21/react-v0.10.html b/blog/2014/03/21/react-v0.10.html
index 2372430318..5e1a2e2b70 100644
--- a/blog/2014/03/21/react-v0.10.html
+++ b/blog/2014/03/21/react-v0.10.html
@@ -119,7 +119,7 @@ Minified build for production: this page. Most of the time you can solve your pattern by using refs.

 
 
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

-
// This is a common pattern. However instance here really refers to a
+
// This is a common pattern. However instance here really refers to a
 // "descriptor", not necessarily the mounted instance.
 var instance = <MyComponent/>;
 React.renderComponent(instance);
diff --git a/blog/2014/03/28/the-road-to-1.0.html b/blog/2014/03/28/the-road-to-1.0.html
index b454521864..a18e7d981d 100644
--- a/blog/2014/03/28/the-road-to-1.0.html
+++ b/blog/2014/03/28/the-road-to-1.0.html
@@ -106,7 +106,7 @@
 
This is really connected to everything. We want to keep the API as simple as possible and help developers fall into the pit of success. Enabling bad patterns with bad APIs is not success.

 
ES6 #

 
Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling React.createClass(...) isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:

-
class MyComponent extends React.Component {
+
class MyComponent extends React.Component {
   render() {
     ...
   }
diff --git a/blog/2014/04/04/reactnet.html b/blog/2014/04/04/reactnet.html
index 61b89c80f5..f9e149d723 100644
--- a/blog/2014/04/04/reactnet.html
+++ b/blog/2014/04/04/reactnet.html
@@ -101,14 +101,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
 It has several purposes:

 
 
    
-
  • On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
-will be compiled and cached server-side.
    
-
    <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
-
    • 
-
  • JSX to JavaScript compilation via popular minification/combination libraries
+
  • On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.
    • 
+

+
   <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
+

+
    
+
  • JSX to JavaScript compilation via popular minification/combination libraries
 (Cassette and ASP.NET Bundling and Minification). This is suggested for
-production websites.
    • 
-
  • Server-side component rendering to make your initial render super fast.
    • 
+production websites.
+
  • Server-side component rendering to make your initial render super fast.
    • 
 

 
 
Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
diff --git a/blog/2014/07/13/react-v0.11-rc1.html b/blog/2014/07/13/react-v0.11-rc1.html
index f7901eb847..d647985ccb 100644
--- a/blog/2014/07/13/react-v0.11-rc1.html
+++ b/blog/2014/07/13/react-v0.11-rc1.html
@@ -117,7 +117,7 @@ Minified build for production: Rendering to null #
 
Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!

-
// Before
+
// Before
 render: function() {
   if (!this.state.visible) {
     return <span/>;
@@ -134,7 +134,7 @@ Minified build for production: }
 
JSX Namespacing #

 
Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.

-
// Before
+
// Before
 var UI = require('UI');
 var UILayout = UI.Layout;
 var UIButton = UI.Button;
@@ -152,7 +152,7 @@ Minified build for production: }
 
Improved keyboard event normalization #

 
Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:

-
handleKeyDown: function(e) {
+
handleKeyDown: function(e) {
   if (e.key === 'Enter') {
     // Handle enter key
   } else if (e.key === ' ') {
diff --git a/blog/2014/07/17/react-v0.11.html b/blog/2014/07/17/react-v0.11.html
index 362c1bb8af..57cc8aac3a 100644
--- a/blog/2014/07/17/react-v0.11.html
+++ b/blog/2014/07/17/react-v0.11.html
@@ -123,7 +123,7 @@ Minified build for production: Rendering to null #
 
Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!

-
// Before
+
// Before
 render: function() {
   if (!this.state.visible) {
     return <span/>;
@@ -140,7 +140,7 @@ Minified build for production: }
 
JSX Namespacing #

 
Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.

-
// Before
+
// Before
 var UI = require('UI');
 var UILayout = UI.Layout;
 var UIButton = UI.Button;
@@ -158,7 +158,7 @@ Minified build for production: }
 
Improved keyboard event normalization #

 
Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:

-
handleKeyDown: function(e) {
+
handleKeyDown: function(e) {
   if (e.key === 'Enter') {
     // Handle enter key
   } else if (e.key === ' ') {
diff --git a/blog/2014/07/28/community-roundup-20.html b/blog/2014/07/28/community-roundup-20.html
index 40b9850c91..d66a24c370 100644
--- a/blog/2014/07/28/community-roundup-20.html
+++ b/blog/2014/07/28/community-roundup-20.html
@@ -110,7 +110,7 @@
 
 
ReactIntl Mixin by Yahoo #

 
There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an  internationalization mixin. It's great to see them getting excited about React and contributing back to the community.

-
var MyComponent = React.createClass({
+
var MyComponent = React.createClass({
   mixins: [ReactIntlMixin],
   render: function() {
     return (
@@ -127,9 +127,9 @@
   document.getElementById('example')
 );
 
Thinking and Learning React #

-
Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations. 

+
Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.

 
London React Meetup #

-
If you missed the last London React Meetup, the video is available, with lots of great content. 

+
If you missed the last London React Meetup, the video is available, with lots of great content.

 
 
    
 
  • What's new in React 0.11 and how to improve performance by guaranteeing immutability
    • 
@@ -149,7 +149,7 @@
 
    Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a JSX parser that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
    
 
    ReactScriptLoader #
    
 
    Yariv Sadan created ReactScriptLoader to make it easier to write components that require an external script.
    
-
    var Foo = React.createClass({
+
    var Foo = React.createClass({
   mixins: [ReactScriptLoaderMixin],
   getScriptURL: function() {
     return 'http://d3js.org/d3.v3.min.js';
@@ -164,7 +164,7 @@
     this.setState({scriptLoading: false, scriptLoadError: true});
   },
   render: function() {
-    var message = 
+    var message =
       this.state.scriptLoading ? 'Loading script...' :
       this.state.scriptLoadError ? 'Loading failed' :
       'Loading succeeded';
diff --git a/blog/2014/07/30/flux-actions-and-the-dispatcher.html b/blog/2014/07/30/flux-actions-and-the-dispatcher.html
index 420e5d9b23..021135fac0 100644
--- a/blog/2014/07/30/flux-actions-and-the-dispatcher.html
+++ b/blog/2014/07/30/flux-actions-and-the-dispatcher.html
@@ -109,7 +109,7 @@
 
 
    
 
    Why We Need a Dispatcher #
    
-
    As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.  
    
+
    As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.
    
 
 
    The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.
    
 
diff --git a/blog/2014/08/03/community-roundup-21.html b/blog/2014/08/03/community-roundup-21.html
index 946d1f7edd..08cf0bfcb2 100644
--- a/blog/2014/08/03/community-roundup-21.html
+++ b/blog/2014/08/03/community-roundup-21.html
@@ -97,7 +97,7 @@
     
    
       
    React Router #
    
 
    Ryan Florence and Michael Jackson ported Ember's router to React in a project called React Router. This is a very good example of both communities working together to make the web better!
    
-
    React.renderComponent((
+
    React.renderComponent((
   <Routes>
     <Route handler={App}>
       <Route name="about" handler={About}/>
@@ -133,7 +133,7 @@
 

 
Referencing Dynamic Children #

 
While Matt Zabriskie was working on react-tabs he discovered how to use React.Children.map and React.addons.cloneWithProps in order to reference dynamic children.

-
var App = React.createClass({
+
var App = React.createClass({
   render: function () {
     var children = React.Children.map(this.props.children, function(child, index) {
       return React.addons.cloneWithProps(child, {
@@ -158,7 +158,7 @@
 
HTML Parser2 React #

 
Jason Brown adapted htmlparser2 to React: htmlparser2-react. That allows you to convert raw HTML to the virtual DOM.
 This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.

-
var html = '<div data-id="1" class="hey this is a class" ' +
+
var html = '<div data-id="1" class="hey this is a class" ' +
   'style="width:100%;height: 100%;"><article id="this-article">' +
   '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
   '<li>3</li></ul></div></article></div>';
diff --git a/blog/index.html b/blog/index.html
index 95257c5634..cea9dec62d 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -97,7 +97,7 @@
         

          
React Router #

 
Ryan Florence and Michael Jackson ported Ember's router to React in a project called React Router. This is a very good example of both communities working together to make the web better!

-
React.renderComponent((
+
React.renderComponent((
   <Routes>
     <Route handler={App}>
       <Route name="about" handler={About}/>
@@ -133,7 +133,7 @@
 
 
Referencing Dynamic Children #

 
While Matt Zabriskie was working on react-tabs he discovered how to use React.Children.map and React.addons.cloneWithProps in order to reference dynamic children.

-
var App = React.createClass({
+
var App = React.createClass({
   render: function () {
     var children = React.Children.map(this.props.children, function(child, index) {
       return React.addons.cloneWithProps(child, {
@@ -158,7 +158,7 @@
 
HTML Parser2 React #

 
Jason Brown adapted htmlparser2 to React: htmlparser2-react. That allows you to convert raw HTML to the virtual DOM.
 This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.

-
var html = '<div data-id="1" class="hey this is a class" ' +
+
var html = '<div data-id="1" class="hey this is a class" ' +
   'style="width:100%;height: 100%;"><article id="this-article">' +
   '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
   '<li>3</li></ul></div></article></div>';
@@ -194,7 +194,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 
 

 
Why We Need a Dispatcher #

-
As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.  

+
As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.

 
 
The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.

 
@@ -229,7 +229,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 
 
ReactIntl Mixin by Yahoo #

 
There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an  internationalization mixin. It's great to see them getting excited about React and contributing back to the community.

-
var MyComponent = React.createClass({
+
var MyComponent = React.createClass({
   mixins: [ReactIntlMixin],
   render: function() {
     return (
@@ -246,9 +246,9 @@ This is not the intended way to use React but can be useful as last resort if yo
   document.getElementById('example')
 );
 
Thinking and Learning React #

-
Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations. 

+
Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.

 
London React Meetup #

-
If you missed the last London React Meetup, the video is available, with lots of great content. 

+
If you missed the last London React Meetup, the video is available, with lots of great content.

 
 
    
 
  • What's new in React 0.11 and how to improve performance by guaranteeing immutability
    • 
@@ -268,7 +268,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 
    Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a JSX parser that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
    
 
    ReactScriptLoader #
    
 
    Yariv Sadan created ReactScriptLoader to make it easier to write components that require an external script.
    
-
    var Foo = React.createClass({
+
    var Foo = React.createClass({
   mixins: [ReactScriptLoaderMixin],
   getScriptURL: function() {
     return 'http://d3js.org/d3.v3.min.js';
@@ -283,7 +283,7 @@ This is not the intended way to use React but can be useful as last resort if yo
     this.setState({scriptLoading: false, scriptLoadError: true});
   },
   render: function() {
-    var message = 
+    var message =
       this.state.scriptLoading ? 'Loading script...' :
       this.state.scriptLoadError ? 'Loading failed' :
       'Loading succeeded';
@@ -376,7 +376,7 @@ Minified build for production: Rendering to null #
 
    Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!
    
-
    // Before
+
    // Before
 render: function() {
   if (!this.state.visible) {
     return <span/>;
@@ -393,7 +393,7 @@ Minified build for production: }
 
    JSX Namespacing #
    
 
    Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.
    
-
    // Before
+
    // Before
 var UI = require('UI');
 var UILayout = UI.Layout;
 var UIButton = UI.Button;
@@ -411,7 +411,7 @@ Minified build for production: }
 
    Improved keyboard event normalization #
    
 
    Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:
    
-
    handleKeyDown: function(e) {
+
    handleKeyDown: function(e) {
   if (e.key === 'Enter') {
     // Handle enter key
   } else if (e.key === ' ') {
diff --git a/blog/page2/index.html b/blog/page2/index.html
index 79ed01aac3..8851eac815 100644
--- a/blog/page2/index.html
+++ b/blog/page2/index.html
@@ -117,7 +117,7 @@ Minified build for production: Rendering to null #
 
    Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!
    
-
    // Before
+
    // Before
 render: function() {
   if (!this.state.visible) {
     return <span/>;
@@ -134,7 +134,7 @@ Minified build for production: }
 
    JSX Namespacing #
    
 
    Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.
    
-
    // Before
+
    // Before
 var UI = require('UI');
 var UILayout = UI.Layout;
 var UIButton = UI.Button;
@@ -152,7 +152,7 @@ Minified build for production: }
 
    Improved keyboard event normalization #
    
 
    Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:
    
-
    handleKeyDown: function(e) {
+
    handleKeyDown: function(e) {
   if (e.key === 'Enter') {
     // Handle enter key
   } else if (e.key === ' ') {
@@ -325,14 +325,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
 It has several purposes:
    
 
 
      
-
    • On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
-will be compiled and cached server-side.
      
-
      <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
-
      • 
-
    • JSX to JavaScript compilation via popular minification/combination libraries
+
    • On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.
      • 
+
    
+
       <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
+
    
+
      
+
    • JSX to JavaScript compilation via popular minification/combination libraries
 (Cassette and ASP.NET Bundling and Minification). This is suggested for
-production websites.
      • 
-
    • Server-side component rendering to make your initial render super fast.
      • 
+production websites.
+
    • Server-side component rendering to make your initial render super fast.
      • 
 
    
 
 
    Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
diff --git a/blog/page3/index.html b/blog/page3/index.html
index 2a114b486e..84363c746e 100644
--- a/blog/page3/index.html
+++ b/blog/page3/index.html
@@ -106,7 +106,7 @@
 
    This is really connected to everything. We want to keep the API as simple as possible and help developers fall into the pit of success. Enabling bad patterns with bad APIs is not success.
    
 
    ES6 #
    
 
    Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling React.createClass(...) isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
    
-
    class MyComponent extends React.Component {
+
    class MyComponent extends React.Component {
   render() {
     ...
   }
@@ -156,7 +156,7 @@ Minified build for production: this page. Most of the time you can solve your pattern by using refs.
    
 
 
    Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
    
-
    // This is a common pattern. However instance here really refers to a
+
    // This is a common pattern. However instance here really refers to a
 // "descriptor", not necessarily the mounted instance.
 var instance = <MyComponent/>;
 React.renderComponent(instance);
@@ -230,7 +230,7 @@ Minified build for production: this page. Most of the time you can solve your pattern by using refs.
    
 
 
    Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
    
-
    // This is a common pattern. However instance here really refers to a
+
    // This is a common pattern. However instance here really refers to a
 // "descriptor", not necessarily the mounted instance.
 var instance = <MyComponent/>;
 React.renderComponent(instance);
diff --git a/blog/page4/index.html b/blog/page4/index.html
index dc1229a9a0..9c8a3d17d0 100644
--- a/blog/page4/index.html
+++ b/blog/page4/index.html
@@ -121,19 +121,19 @@ Minified build for production: JSX Whitespace #
 
    In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
    
-
    <div>
+
    <div>
   Monkeys:
   {listOfMonkeys} {submitButton}
 </div>
 
    
 
    In v0.8 and below, it was transformed to the following:
    
-
    React.DOM.div(null,
+
    React.DOM.div(null,
   " Monkeys: ",
   listOfMonkeys, submitButton
 )
 
    
 
    In v0.9, it will be transformed to this JS instead:
    
-
    React.DOM.div(null,
+
    React.DOM.div(null,
   "Monkeys:",
   listOfMonkeys, " ", submitButton
 )
@@ -251,19 +251,19 @@ Minified build for production: file an issue on GitHub if you see anything awry.
    
 
    Upgrade Notes #
    
 
    In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
    
-
    <div>
+
    <div>
   Monkeys:
   {listOfMonkeys} {submitButton}
 </div>
 
    
 
    In v0.8 and below, it was transformed to the following:
    
-
    React.DOM.div(null,
+
    React.DOM.div(null,
   " Monkeys: ",
   listOfMonkeys, submitButton
 )
 
    
 
    In v0.9, it will be transformed to this JS instead:
    
-
    React.DOM.div(null,
+
    React.DOM.div(null,
   "Monkeys:",
   listOfMonkeys, " ", submitButton
 )
@@ -461,7 +461,7 @@ Minified build for production: Creighton Kirkendall created Kioo, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
    
 
 
    A basic example from github:
    
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html lang="en">
   <body>
     <header>
@@ -473,7 +473,7 @@ Minified build for production: <div class="content">place holder</div>
   </body>
 </html>
-
    ...
+
    ...
 
 (defn my-nav-item [[caption func]]
   (kioo/component "main.html" [:.nav-item]
@@ -558,7 +558,7 @@ Minified build for production: Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.
    
 
 
    
-
    git clone https://github.com/necrodome/react-rails-tutorial
+
    git clone https://github.com/necrodome/react-rails-tutorial
 cd react-rails-tutorial
 bundle install
 rake db:migrate
@@ -576,7 +576,7 @@ rails s
 
    Check out the blog post...
    
 
    React Infinite Scroll #
    
 
    Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
    
-
    <InfiniteScroll
+
    <InfiniteScroll
   pageStart={0}
   loadMore={loadFunc}
   hasMore={true || false}
diff --git a/blog/page5/index.html b/blog/page5/index.html
index f9d36e4708..193fcf36d4 100644
--- a/blog/page5/index.html
+++ b/blog/page5/index.html
@@ -141,7 +141,7 @@
 
    
 
    React + Socket.io #
    
 
    Geert Pasteels made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
    
-
    changeHandler: function (data) {
+
    changeHandler: function (data) {
   if (!_.isEqual(data.state, this.state) && this.path === data.path) {
     this.setState(data.state);
   }
@@ -160,7 +160,7 @@
 
    Check it out on GitHub...
    
 
    cssobjectify #
    
 
    Andrey Popp implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
    
-
    /* style.css */
+
    /* style.css */
 MyComponent {
   font-size: 12px;
   background-color: red;
@@ -232,7 +232,7 @@
 
 
    
 
    We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
    
-
    componentWillUpdate: function() {
+
    componentWillUpdate: function() {
   var node = this.getDOMNode();
   this.shouldScrollBottom =
     (node.scrollTop + node.offsetHeight) === node.scrollHeight;
@@ -276,7 +276,7 @@ componentDidUpdate: function() {
 
    
 
    Hoodie React TodoMVC #
    
 
    Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.
    
-
    hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
+
    hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
 
    
 
    Check out on GitHub...
    
 
    JSX Compiler #
    
diff --git a/blog/page6/index.html b/blog/page6/index.html
index 97ea227410..4340ff29cb 100644
--- a/blog/page6/index.html
+++ b/blog/page6/index.html
@@ -234,7 +234,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
    Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.
    
 
 
    Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:
    
-
    /**
+
    /**
  * 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
@@ -299,7 +299,7 @@ Is this some sort of template language? Specifically no. This might have been th
 
    Mockup
    
 
 
    Our JSON API returns some data that looks like this:
    
-
    [
+
    [
   {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
   {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
   {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
diff --git a/blog/page7/index.html b/blog/page7/index.html
index a043649df9..4d86295bc8 100644
--- a/blog/page7/index.html
+++ b/blog/page7/index.html
@@ -123,7 +123,7 @@
 
    
 
    Pump - Clojure bindings for React #
    
 
    Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
    
-
    (ns your.app
+
    (ns your.app
   (:require-macros [pump.def-macros :refer [defr]])
   (:require [pump.core]))
 
@@ -140,7 +140,7 @@
 
 
    
 
    A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
    
-
    npm install -g jsxhint
+
    npm install -g jsxhint
 
    
 
    Check it out on GitHub...
    
 
    
@@ -164,7 +164,7 @@
 
    React is all about components. So let's build one.
    
 
 
    Let's call it Table (to avoid any confusion what the component is about).
    
-
    var Table = React.createClass({
+
    var Table = React.createClass({
   /*stuff goeth here*/
 });
 
    
@@ -264,7 +264,7 @@
 
    This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
    
 
 
    The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.
    
-
    var MyComponent = React.createClass({
+
    var MyComponent = React.createClass({
  mixins: [MeteorMixin],
 
  getMeteorState: function() {
@@ -328,7 +328,7 @@
          
    Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
    
 
    Usage #
    
 
    Transform your JSX files via the provided jsx module:
    
-
    from react import jsx
+
    from react import jsx
 
 # For multiple paths, use the JSXTransformer class.
 transformer = jsx.JSXTransformer()
@@ -339,21 +339,21 @@
 jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
 
    
 
    For full paths to React files, use the source module:
    
-
    from react import source
+
    from react import source
 
 # path_for raises IOError if the file doesn't exist.
 react_js = source.path_for('react.min.js')
 
    Django #
    
 
    PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:
    
-
    PIPELINE_COMPILERS = (
+
    PIPELINE_COMPILERS = (
   'react.utils.pipeline.JSXCompiler',
 )
 
    Installation #
    
 
    PyReact is hosted on PyPI, and can be installed with pip:
    
-
    $ pip install PyReact
+
    $ pip install PyReact
 
    
 
    Alternatively, add it into your requirements file:
    
-
    PyReact==0.1.1
+
    PyReact==0.1.1
 
    
 
    Dependencies: PyReact uses PyExecJS to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend PyV8.
    
 
@@ -376,7 +376,7 @@
 
 
    
 
    Browserify v2 transform for text/jsx. Basic usage is:
    
-
    % browserify -t reactify main.jsx
+
    % browserify -t reactify main.jsx
 
    
 
    reactify transform activates for files with either .jsx extension or /** @jsx React.DOM */ pragma as a first line for any .js file.
    
 
@@ -384,7 +384,7 @@
 
    
 
    React Integration with Este #
    
 
    Daniel Steigerwald is now using React within Este, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
    
-
    este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
+
    este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
   render: ->
     @div [
       este.demos.react.todoList 'items': @state['items']
@@ -396,7 +396,7 @@
           'value': @state['text']
           'autoFocus': true
           'ref': 'textInput'
-        @button "Add ##{@state['items'].length + 1}"
+        @button "Add ##{@state['items'].length + 1}"
       ]
     ]
 
    
diff --git a/blog/page8/index.html b/blog/page8/index.html
index b7313b14c7..fce996c950 100644
--- a/blog/page8/index.html
+++ b/blog/page8/index.html
@@ -105,18 +105,18 @@
 
 
    Packaging react.js #
    
 
    To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:
    
-
    # config/environments/development.rb
+
    # config/environments/development.rb
 
 MyApp::Application.configure do
   config.react.variant = :development
   # use :production in production.rb
 end
-
    // app/assets/javascript/application.js
+
    // app/assets/javascript/application.js
 
 //= require react
 
    Writing JSX #
    
 
    When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 React.renderComponent(<MyComponent/>, document.body)
 
    Asset Pipeline #
    
 
    react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
    
@@ -204,7 +204,7 @@
 

 
React Chosen Wrapper #

 
Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

-
React.renderComponent(
+
React.renderComponent(
   <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
     <option value="Facebook">Facebook</option>
     <option value="Harvest">Harvest</option>
@@ -300,7 +300,7 @@ If you were using React without JSX previously, your code should still work.Oftentimes you want to validate your props before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your render or componentWillReceiveProps functions, but that gets clunky fast.

 
 
React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.

-
React.createClass({
+
React.createClass({
   propTypes: {
     // An optional string prop named "description".
     description: React.PropTypes.string,
@@ -315,7 +315,7 @@ If you were using React without JSX previously, your code should still work.});
 
Default Values #

 
One common pattern we've seen with our React code is to do something like this:

-
React.createClass({
+
React.createClass({
   render: function() {
     var value = this.props.value || 'default value';
     return <div>{value}</div>;
@@ -323,7 +323,7 @@ If you were using React without JSX previously, your code should still work.});
 

 
Do this for a few props across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:

-
React.createClass({
+
React.createClass({
   getDefaultProps: function() {
     return {
       value: 'default value'
diff --git a/blog/page9/index.html b/blog/page9/index.html
index f569ebc3a5..6b26e034da 100644
--- a/blog/page9/index.html
+++ b/blog/page9/index.html
@@ -169,7 +169,7 @@
 
If you take a look at most of our current examples, you'll see us using React.autoBind for event handlers. This is used in place of Function.prototype.bind. Remember that in JS, function calls are late-bound. That means that if you simply pass a function around, the this used inside won't necessarily be the this you expect. Function.prototype.bind creates a new, properly bound, function so that when called, this is exactly what you expect it to be.

 
 
Before we launched React, we would write this:

-
React.createClass({
+
React.createClass({
   onClick: function(event) {/* do something with this */},
   render: function() {
     return <button onClick={this.onClick.bind(this)} />;
@@ -177,7 +177,7 @@
 });
 

 
We wrote React.autoBind as a way to cache the function creation and save on memory usage. Since render can get called multiple times, if you used this.onClick.bind(this) you would actually create a new function on each pass. With React v0.3 you were able to write this instead:

-
React.createClass({
+
React.createClass({
   onClick: React.autoBind(function(event) {/* do something with this */}),
   render: function() {
     return <button onClick={this.onClick} />;
@@ -187,7 +187,7 @@
 
After using React.autoBind for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within React.createClass will already be bound to the correct instance.

 
 
Starting with v0.4 you can just write this:

-
React.createClass({
+
React.createClass({
   onClick: function(event) {/* do something with this */},
   render: function() {
     return <button onClick={this.onClick} />;
@@ -222,14 +222,14 @@
 
 

 
Grunt task for compiling Facebook React's .jsx templates into .js

-
grunt.initConfig({
+
grunt.initConfig({
   react: {
     app: {
       options: { extension: 'js' },
       files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
 

 
It also works great with grunt-browserify!

-
browserify: {
+
browserify: {
   options: {
     transform: [ require('grunt-react').browserify ]
   },
@@ -260,7 +260,7 @@
 
 

 
Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.

-
{div, h3, textarea} = React.DOM
+
{div, h3, textarea} = React.DOM
 (div {className: 'MarkdownEditor'}, [
   (h3 {}, 'Input'),
   (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
diff --git a/docs/animation.html b/docs/animation.html
index 20f397c794..d10202a3b2 100644
--- a/docs/animation.html
+++ b/docs/animation.html
@@ -442,7 +442,7 @@
 
ReactCSSTransitionGroup is based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.

 
Getting Started #

 
ReactCSSTransitionGroup is the interface to ReactTransitions. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
@@ -482,7 +482,7 @@
 
In this component, when a new item is added to ReactCSSTransitionGroup it will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the transitionName prop.

 
 
You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:

-
.example-enter {
+
.example-enter {
   opacity: 0.01;
   transition: opacity .5s ease-in;
 }
@@ -492,7 +492,7 @@
 }
 

 
You'll notice that when you try to remove an item ReactCSSTransitionGroup keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because ReactCSSTransitionGroup keeps your DOM elements on the page until the animation completes. Try adding this CSS:

-
.example-leave {
+
.example-leave {
   opacity: 1;
   transition: opacity .5s ease-in;
 }
@@ -502,7 +502,7 @@
 }
 
Animating One or Zero Items #

 
Although in the example above we rendered a list of items into ReactCSSTransitionGroup, the children of ReactCSSTransitionGroup can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
@@ -546,7 +546,7 @@
 
This is called when the willLeave callback is called (at the same time as componentWillUnmount).

 
Rendering a Different Component #

 
By default ReactTransitionGroup renders as a span. You can change this behavior by providing a component prop. For example, here's how you would render a <ul>:

-
<ReactTransitionGroup component={React.DOM.ul}>
+
<ReactTransitionGroup component={React.DOM.ul}>
   ...
 </ReactTransitionGroup>
 

diff --git a/docs/class-name-manipulation.html b/docs/class-name-manipulation.html
index 363abf1ab8..792aee2678 100644
--- a/docs/class-name-manipulation.html
+++ b/docs/class-name-manipulation.html
@@ -440,7 +440,7 @@
     
classSet() is a neat utility for easily manipulating the DOM class string.

 
 
Here's a common scenario and its solution without classSet():

-
// inside some `<Message />` React component
+
// inside some `<Message />` React component
 render: function() {
   var classString = 'message';
   if (this.props.isImportant) {
@@ -454,7 +454,7 @@
 }
 

 
This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. classSet() solves this problem:

-
render: function() {
+
render: function() {
   var cx = React.addons.classSet;
   var classes = cx({
     'message': true,
diff --git a/docs/component-api.html b/docs/component-api.html
index cfea354d36..dbe3fd46b6 100644
--- a/docs/component-api.html
+++ b/docs/component-api.html
@@ -439,7 +439,7 @@
 
     
ReactComponent #

 
Component classes created by React.createClass() return instances of ReactComponent when called. Most of the time when you're using React you're either creating or consuming these component objects.

-
setState #
setState(object nextState[, function callback])
+
setState #
setState(object nextState[, function callback])
 

 
Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.  In addition, you can supply an optional callback function that is executed once setState is completed and the component is re-rendered.

 
@@ -454,26 +454,26 @@
 
 
setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

 

-
replaceState #
replaceState(object nextState[, function callback])
+
replaceState #
replaceState(object nextState[, function callback])
 

 
Like setState() but deletes any pre-existing state keys that are not in nextState.

-
forceUpdate() #
forceUpdate([function callback])
+
forceUpdate() #
forceUpdate([function callback])
 

 
If your render() method reads from something other than this.props or this.state, you'll need to tell React when it needs to re-run render() by calling forceUpdate(). You'll also need to call forceUpdate() if you mutate this.state directly.

 
 
Calling forceUpdate() will cause render() to be called on the component and its children, but React will still only update the DOM if the markup changes.

 
 
Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your application much simpler and more efficient.

-
getDOMNode #
DOMElement getDOMNode()
+
getDOMNode #
DOMElement getDOMNode()
 

 
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When render returns null or false, this.getDOMNode() returns null.

-
isMounted() #
bool isMounted()
+
isMounted() #
bool isMounted()
 

 
isMounted() returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate().

-
transferPropsTo #
ReactComponent transferPropsTo(ReactComponent targetComponent)
+
transferPropsTo #
ReactComponent transferPropsTo(ReactComponent targetComponent)
 

 
Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, targetComponent is returned as a convenience. This function is useful when creating simple HTML-like components:

-
var Avatar = React.createClass({
+
var Avatar = React.createClass({
   render: function() {
     return this.transferPropsTo(
       <img src={"/avatars/" + this.props.userId + ".png"} userId={null} />
@@ -490,7 +490,7 @@
 
 
Use transferPropsTo with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it's safer to explicitly copy the properties that you need onto the child component.

 

-
setProps #
setProps(object nextProps[, function callback])
+
setProps #
setProps(object nextProps[, function callback])
 

 
When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with React.renderComponent().

 
@@ -503,7 +503,7 @@
 
 
This method can only be called on a root-level component. That is, it's only available on the component passed directly to React.renderComponent() and none of its children. If you're inclined to use setProps() on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in render().

 
-
replaceProps #
replaceProps(object nextProps[, function callback])
+
replaceProps #
replaceProps(object nextProps[, function callback])
 

 
Like setProps() but deletes any pre-existing props instead of merging the two objects.

 
diff --git a/docs/component-specs.html b/docs/component-specs.html
index 6d3f48fbc2..5d052bbf83 100644
--- a/docs/component-specs.html
+++ b/docs/component-specs.html
@@ -439,7 +439,7 @@
 
     
Component Specifications #

 
When creating a component class by invoking React.createClass(), you should provide a specification object that contains a render method and can optionally contain other lifecycle methods described here.

-
render #
ReactComponent render()
+
render #
ReactComponent render()
 

 
The render() method is required.

 
@@ -448,24 +448,24 @@
 
You can also return null or false to indicate that you don't want anything rendered. Behind the scenes, React renders a <noscript> tag to work with our current diffing algorithm. When returning null or false, this.getDOMNode() will return null.

 
 
The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using setTimeout). If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes server rendering more practical and makes components easier to think about.

-
getInitialState #
object getInitialState()
+
getInitialState #
object getInitialState()
 

 
Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

-
getDefaultProps #
object getDefaultProps()
+
getDefaultProps #
object getDefaultProps()
 

 
Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is not specified by the parent component (i.e. using an in check).

 
 
This method is invoked before any instances are created and thus cannot rely on this.props. In addition, be aware that any complex objects returned by getDefaultProps() will be shared across instances, not copied.

-
propTypes #
object propTypes
+
propTypes #
object propTypes
 

 
The propTypes object allows you to validate props being passed to your components. For more information about propTypes, see Reusable Components.

-
mixins #
array mixins
+
mixins #
array mixins
 

 
The mixins array allows you to use mixins to share behavior among multiple components. For more information about mixins, see Reusable Components.

-
statics #
object statics
+
statics #
object statics
 

 
The statics object allows you to define static methods that can be called on the component class. For example:

-
var MyComponent = React.createClass({
+
var MyComponent = React.createClass({
   statics: {
     customMethod: function(foo) {
       return foo === 'bar';
@@ -478,15 +478,15 @@
 MyComponent.customMethod('bar');  // true
 

 
Methods defined within this block are static, meaning that you can run them before any component instances are created, and the methods do not have access to the props or state of your components. If you want to check the value of props in a static method, have the caller pass in the props as an argument to the static method.

-
displayName #
string displayName
+
displayName #
string displayName
 

 
The displayName string is used in debugging messages. JSX sets this value automatically; see JSX in Depth.

 
Lifecycle Methods #

 
Various methods are executed at specific points in a component's lifecycle.

-
Mounting: componentWillMount #
componentWillMount()
+
Mounting: componentWillMount #
componentWillMount()
 

 
Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

-
Mounting: componentDidMount #
componentDidMount()
+
Mounting: componentDidMount #
componentDidMount()
 

 
Invoked immediately after rendering occurs, only on the client (not on the server). At this point in the lifecycle, the component has a DOM representation which you can access via this.getDOMNode().

 
@@ -497,12 +497,12 @@
 
 
Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling this.getDOMNode().

 
-
Updating: componentWillReceiveProps #
componentWillReceiveProps(object nextProps)
+
Updating: componentWillReceiveProps #
componentWillReceiveProps(object nextProps)
 

 
Invoked when a component is receiving new props. This method is not called for the initial render.

 
 
Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function will not trigger an additional render.

-
componentWillReceiveProps: function(nextProps) {
+
componentWillReceiveProps: function(nextProps) {
   this.setState({
     likesIncreasing: nextProps.likeCount > this.props.likeCount
   });
@@ -513,13 +513,13 @@
 
 
There is no analogous method componentWillReceiveState. An incoming prop transition may cause a state change, but the opposite is not true. If you need to perform operations in response to a state change, use componentWillUpdate.

 
-
Updating: shouldComponentUpdate #
boolean shouldComponentUpdate(object nextProps, object nextState)
+
Updating: shouldComponentUpdate #
boolean shouldComponentUpdate(object nextProps, object nextState)
 

 
Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

 
 
Use this as an opportunity to return false when you're certain that the
 transition to the new props and state will not require a component update.

-
shouldComponentUpdate: function(nextProps, nextState) {
+
shouldComponentUpdate: function(nextProps, nextState) {
   return nextProps.id !== this.props.id;
 }
 

@@ -528,7 +528,7 @@ transition to the new props and state will not require a component update.

 
By default, shouldComponentUpdate always returns true to prevent subtle bugs when state is mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

 
 
If performance is a bottleneck, especially with dozens or hundreds of components, use shouldComponentUpdate to speed up your app.

-
Updating: componentWillUpdate #
componentWillUpdate(object nextProps, object nextState)
+
Updating: componentWillUpdate #
componentWillUpdate(object nextProps, object nextState)
 

 
Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.

 
@@ -539,7 +539,7 @@ transition to the new props and state will not require a component update.

 
 
You cannot use this.setState() in this method. If you need to update state in response to a prop change, use componentWillReceiveProps instead.

 
-
Updating: componentDidUpdate #
componentDidUpdate(object prevProps, object prevState)
+
Updating: componentDidUpdate #
componentDidUpdate(object prevProps, object prevState)
 

 
Invoked immediately after updating occurs. This method is not called for the initial render.

 
@@ -550,7 +550,7 @@ transition to the new props and state will not require a component update.

 
 
Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling this.getDOMNode().

 
-
Unmounting: componentWillUnmount #
componentWillUnmount()
+
Unmounting: componentWillUnmount #
componentWillUnmount()
 

 
Invoked immediately before a component is unmounted from the DOM.

 
diff --git a/docs/displaying-data.html b/docs/displaying-data.html
index cc7b33ec8c..dd498c8804 100644
--- a/docs/displaying-data.html
+++ b/docs/displaying-data.html
@@ -440,7 +440,7 @@
     
The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.

 
Getting Started #

 
Let's look at a really simple example. Create a hello-react.html file with the following code:

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <title>Hello React</title>
@@ -458,7 +458,7 @@
 </html>
 

 
For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var HelloWorld = React.createClass({
   render: function() {
diff --git a/docs/events.html b/docs/events.html
index 45e0e8ece1..3f9aa4bd82 100644
--- a/docs/events.html
+++ b/docs/events.html
@@ -441,7 +441,7 @@
 
Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

 
 
If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:

-
boolean bubbles
+
boolean bubbles
 boolean cancelable
 DOMEventTarget currentTarget
 boolean defaultPrevented
@@ -458,16 +458,16 @@
 different browsers.

 
Clipboard Events #

 
Event names:

-
onCopy onCut onPaste
+
onCopy onCut onPaste
 

 
Properties:

-
DOMDataTransfer clipboardData
+
DOMDataTransfer clipboardData
 
Keyboard Events #

 
Event names:

-
onKeyDown onKeyPress onKeyUp
+
onKeyDown onKeyPress onKeyUp
 

 
Properties:

-
boolean altKey
+
boolean altKey
 Number charCode
 boolean ctrlKey
 function getModifierState(key)
@@ -481,23 +481,23 @@ different browsers.

 Number which
 
Focus Events #

 
Event names:

-
onFocus onBlur
+
onFocus onBlur
 

 
Properties:

-
DOMEventTarget relatedTarget
+
DOMEventTarget relatedTarget
 
Form Events #

 
Event names:

-
onChange onInput onSubmit
+
onChange onInput onSubmit
 

 
For more information about the onChange event, see Forms.

 
Mouse Events #

 
Event names:

-
onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
+
onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
 onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
 onMouseMove onMouseOut onMouseOver onMouseUp
 

 
Properties: 

-
boolean altKey
+
boolean altKey
 Number button
 Number buttons
 Number clientX
@@ -516,10 +516,10 @@ onMouseMove onMouseOut onMouseOver onMouseUp
 rendering any component.

 
 
Event names:

-
onTouchCancel onTouchEnd onTouchMove onTouchStart
+
onTouchCancel onTouchEnd onTouchMove onTouchStart
 

 
Properties:

-
boolean altKey
+
boolean altKey
 DOMTouchList changedTouches
 boolean ctrlKey
 function getModifierState(key)
@@ -529,17 +529,17 @@ rendering any component.

 DOMTouchList touches
 
UI Events #

 
Event names:

-
onScroll
+
onScroll
 

 
Properties:

-
Number detail
+
Number detail
 DOMAbstractView view
 
Wheel Events #

 
Event names:

-
onWheel
+
onWheel
 

 
Properties:

-
Number deltaMode
+
Number deltaMode
 Number deltaX
 Number deltaY
 Number deltaZ
diff --git a/docs/flux-overview.html b/docs/flux-overview.html
index ee0310080e..f291f67730 100644
--- a/docs/flux-overview.html
+++ b/docs/flux-overview.html
@@ -493,7 +493,7 @@ Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores ---
 
As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the waitFor() method within the Dispatcher class.  We did not need to use this method within the extremely simple TodoMVC application, but we have included it in the example dispatcher as an example of what a dispatcher should be able to do in a larger, more complex application.

 
 
Within the TodoStore's registered callback we could explicitly wait for any dependencies to first update before moving forward:

-
case 'TODO_CREATE':
+
case 'TODO_CREATE':
   Dispatcher.waitFor([
     PrependedTextStore.dispatcherIndex,
     YetAnotherStore.dispatcherIndex
diff --git a/docs/flux-todo-list.html b/docs/flux-todo-list.html
index 95d5ecd472..b8b9cabc6a 100644
--- a/docs/flux-todo-list.html
+++ b/docs/flux-todo-list.html
@@ -444,7 +444,7 @@
 
The TodoMVC example has all this built into it as well, but if you're starting with react-boilerplate make sure you edit your package.json file to match the file structure and dependencies described in the TodoMVC example's package.json, or else your code won't match up with the explanations below.

 
Source Code Structure #

 
The resulting index.js file may be used as the entry point into our app, but we'll put most of our code in a 'js' directory. Let's let Browserify do its thing, and now we'll open a new tab in Terminal (or a GUI file browser) to look at the directory. It should look something like this:

-
myapp
+
myapp
   |
   + ...
   + js
@@ -455,7 +455,7 @@
   + ...
 

 
Next we'll dive into the js directory, and layout our application's primary directory structure:

-
myapp
+
myapp
   |
   + ...
   + js
@@ -471,7 +471,7 @@
   + ...
 
Creating a Dispatcher #

 
Now we are ready to create a dispatcher. Here is an naive example of a Dispatcher class, written with JavaScript promises, polyfilled with Jake Archibald's ES6-Promises module.

-
var Promise = require('es6-promise').Promise;
+
var Promise = require('es6-promise').Promise;
 var merge = require('react/lib/merge');
 
 var _callbacks = [];
@@ -523,7 +523,7 @@
 
The public API of this basic Dispatcher consists of only two methods: register() and dispatch(). We'll use register() within our stores to register each store's callback. We'll use dispatch() within our actions to trigger the invocation of the callbacks.

 
 
Now we are all set to create a dispatcher that is more specific to our app, which we'll call AppDispatcher.

-
var Dispatcher = require('./Dispatcher');
+
var Dispatcher = require('./Dispatcher');
 
 var merge = require('react/lib/merge');
 
@@ -548,7 +548,7 @@
 
Now we've created an implementation that is a bit more specific to our needs, with a helper function we can use in the actions coming from our views' event handlers. We might expand on this later to provide a separate helper for server updates, but for now this is all we need.

 
Creating Stores #

 
We can use Node's EventEmitter to get started with a store. We need EventEmitter to broadcast the 'change' event to our controller-views. So let's take a look at what that looks like. I've omitted some of the code for the sake of brevity, but for the full version see TodoStore.js in the TodoMVC example code.

-
var AppDispatcher = require('../dispatcher/AppDispatcher');
+
var AppDispatcher = require('../dispatcher/AppDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var TodoConstants = require('../constants/TodoConstants');
 var merge = require('react/lib/merge');
@@ -640,7 +640,7 @@
 
Another important part is the registration of the store's callback with the dispatcher. We pass in our payload handling callback to the dispatcher and preserve the index that this store has in the dispatcher's registry. The callback function currently only handles two actionTypes, but later we can add as many as we need.

 
Listening to Changes with a Controller-View #

 
We need a React component near the top of our component hierarchy to listen for changes in the store. In a larger app, we would have more of these listening components, perhaps one for every section of the page. In Facebook's Ads Creation Tool, we have many of these controller-like views, each governing a specific section of the UI. In the Lookback Video Editor, we only had two: one for the animated preview and one for the image selection interface. Here's one for our TodoMVC example. Again, this is slightly abbreviated, but for the full code you can take a look at the TodoMVC example's TodoApp.react.js

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var Footer = require('./Footer.react');
 var Header = require('./Header.react');
@@ -697,7 +697,7 @@
 
The Header component contains the primary text input for the application, but it does not need to know the state of the store. The MainSection and Footer do need this data, so we pass it down to them.

 
More Views #

 
At a high level, the React component hierarchy of the app looks like this:

-
<TodoApp>
+
<TodoApp>
   <Header>
     <TodoTextInput />
 
@@ -711,7 +711,7 @@
 

 
If a TodoItem is in edit mode, it will also render a TodoTextInput as a child. Let's take a look at how some of these components display the data they receive as props, and how they communicate through actions with the dispatcher.
 The MainSection needs to iterate over the collection of to-do items it received from TodoApp to create the list of TodoItems. In the component's render() method, we can do that iteration like so:

-
var allTodos = this.props.allTodos;
+
var allTodos = this.props.allTodos;
 
 for (var key in allTodos) {
   todos.push(<TodoItem key={key} todo={allTodos[key]} />);
@@ -724,7 +724,7 @@ The MainSection needs to iterate over the collection of to-do items it received
 );
 

 
Now each TodoItem can display its own text, and perform actions utilizing its own ID. Explaining all the different actions that a TodoItem can invoke in the TodoMVC example goes beyond the scope of this article, but let's just take a look at the action that deletes one of the to-do items. Here is an abbreviated version of the TodoItem:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var React = require('react');
 var TodoActions = require('../actions/TodoActions');
@@ -765,7 +765,7 @@ The MainSection needs to iterate over the collection of to-do items it received
 
As you'll see below, with every change to the input, React expects us to update the state of the component. So when we are finally ready to save the text inside the input, we will put the value held in the component's state in the action's payload. This is UI state, rather than application state, and keeping that distinction in mind is a good guide for where state should live. All application state should live in the store, while components occasionally hold on to UI state. Ideally, React components preserve as little state as possible.

 
 
Because TodoTextInput is being used in multiple places within our application, with different behaviors, we'll need to pass the onSave method in as a prop from the component's parent. This allows onSave to invoke different actions depending on where it is used.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var React = require('react');
 var ReactPropTypes = React.PropTypes;
@@ -842,7 +842,7 @@ The MainSection needs to iterate over the collection of to-do items it received
 

 
The Header passes in the onSave method as a prop to allow the TodoTextInput to create new
 to-do items:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var React = require('react');
 var TodoActions = require('../actions/TodoActions');
@@ -883,7 +883,7 @@ to-do items:

 
In a different context, such as in editing mode for an existing to-do item, we might pass an onSave callback that invokes TodoActions.update(text) instead.

 
Creating Semantic Actions #

 
Here is the basic code for the two actions we used above in our views:

-
/**
+
/**
  * TodoActions
  */
 
@@ -919,7 +919,7 @@ to-do items:

 
As you can see, we really would not need to have the helpers AppDispatcher.handleViewAction() or TodoActions.create(). We could, in theory, call AppDispatcher.dispatch() directly and provide a payload. But as our application grows, having these helpers keeps the code clean and semantic. It's just a lot cleaner to write TodoActions.destroy(id) instead of writing a whole lot of things that our TodoItem shouldn't have to know about.

 
 
The payload produced by the TodoActions.create() will look like:

-
{
+
{
   source: 'VIEW_ACTION',
   action: {
     type: 'TODO_CREATE',
@@ -930,7 +930,7 @@ to-do items:

 
This payload is provided to the TodoStore through its registered callback. The TodoStore then broadcasts the 'change' event, and the MainSection responds by fetching the new collection of to-do items from the TodoStore and changing its state. This change in state causes the TodoApp component to call its own render() method, and the render() method of all of its descendents.

 
Start Me Up #

 
The bootstrap file of our application is app.js. It simply takes the TodoApp component and renders it in the root element of the application.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var React = require('react');
 
@@ -944,7 +944,7 @@ to-do items:

 
As I said previously, our Dispatcher implementation is a bit naive. It's pretty good, but it will not suffice for most applications. We need a way to be able to manage dependencies between Stores. Let's add that functionality with a waitFor() method within the main body of the Dispatcher class.

 
 
We'll need another public method, waitFor(). Note that it returns a Promise that can in turn be returned from the Store callback.

-
  /**
+
  /**
    * @param  {array} promisesIndexes
    * @param  {function} callback
    */
diff --git a/docs/forms.html b/docs/forms.html
index 9934b64601..208fddfe43 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -462,12 +462,12 @@
 
Like all DOM events, the onChange prop is supported on all native components and can be used to listen to bubbled change events.

 
Controlled Components #

 
An <input> with value set is a controlled component. In a controlled <input>, the value of the rendered element will always reflect the value prop. For example:

-
  render: function() {
+
  render: function() {
     return <input type="text" value="Hello!" />;
   }
 

 
This will render an input that always has a value of Hello!. Any user input will have no effect on the rendered element because React has declared the value to be Hello!. If you wanted to update the value in response to user input, you could use the onChange event:

-
  getInitialState: function() {
+
  getInitialState: function() {
     return {value: 'Hello!'};
   },
   handleChange: function(event) {
@@ -479,21 +479,21 @@
   }
 

 
In this example, we are simply accepting the newest value provided by the user and updating the value prop of the <input> component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:

-
  handleChange: function(event) {
+
  handleChange: function(event) {
     this.setState({value: event.target.value.substr(0, 140)});
   }
 

 
This would accept user input but truncate the value to the first 140 characters.

 
Uncontrolled Components #

 
An <input> that does not supply a value (or sets it to null) is an uncontrolled component. In an uncontrolled <input>, the value of the rendered element will reflect the user's input. For example:

-
  render: function() {
+
  render: function() {
     return <input type="text" />;
   }
 

 
This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the onChange event just like you can with controlled components.

 
 
If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. For example:

-
  render: function() {
+
  render: function() {
     return <input type="text" defaultValue="Hello!" />;
   }
 

@@ -502,28 +502,28 @@
 
Likewise, <input> supports defaultChecked and <select> supports defaultValue.

 
Advanced Topics #
Why Controlled Components? #

 
Using form components such as <input> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:

-
  <input type="text" name="title" value="Untitled" />
+
  <input type="text" name="title" value="Untitled" />
 

 
This renders an input initialized with the value, Untitled. When the user updates the input, the node's value property will change. However, node.getAttribute('value') will still return the value used at initialization time, Untitled.

 
 
Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:

-
  render: function() {
+
  render: function() {
     return <input type="text" name="title" value="Untitled" />;
   }
 

 
Since this method describes the view at any point in time, the value of the text input should always be Untitled.

 
Why Textarea Value? #

 
In HTML, the value of <textarea> is usually set using its children:

-
  <!-- counterexample: DO NOT DO THIS! -->
+
  <!-- counterexample: DO NOT DO THIS! -->
   <textarea name="description">This is the description.</textarea>
 

 
For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use \n if we want newlines. In a world where we have value and defaultValue, it is ambiguous what role children play. For this reason, you should not use children when setting <textarea> values:

-
  <textarea name="description" value="This is a description." />
+
  <textarea name="description" value="This is a description." />
 

 
If you do decide to use children, they will behave like defaultValue.

 
Why Select Value? #

 
The selected <option> in an HTML <select> is normally specified through that option's selected attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:

-
  <select value="B">
+
  <select value="B">
     <option value="A">Apple</option>
     <option value="B">Banana</option>
     <option value="C">Cranberry</option>
diff --git a/docs/getting-started.html b/docs/getting-started.html
index afc1f61e96..9a1f028f67 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -454,7 +454,7 @@
 

 
 
In the root directory of the starter kit, create a helloworld.html with the following contents.

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <script src="build/react.js"></script>
@@ -475,23 +475,23 @@
 
The XML syntax inside of JavaScript is called JSX; check out the JSX syntax to learn more about it. In order to translate it to vanilla JavaScript we use <script type="text/jsx"> and include JSXTransformer.js to actually perform the transformation in the browser.

 
Separate File #

 
Your React JSX code can live in a separate file. Create the following src/helloworld.js.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 React.renderComponent(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
 );
 

 
Then reference it from helloworld.html:

-
<script type="text/jsx" src="src/helloworld.js"></script>
+
<script type="text/jsx" src="src/helloworld.js"></script>
 
Offline Transform #

 
First install the command-line tools (requires npm):

-
npm install -g react-tools
+
npm install -g react-tools
 

 
Then, translate your src/helloworld.js file to plain JavaScript:

-
jsx --watch src/ build/
+
jsx --watch src/ build/
 

 
The file build/helloworld.js is autogenerated whenever you make a change.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 React.renderComponent(
   React.DOM.h1(null, 'Hello, world!'),
   document.getElementById('example')
@@ -504,7 +504,7 @@
 
 
 
Update your HTML file as below:

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <title>Hello React!</title>
diff --git a/docs/getting-started.zh-CN.html b/docs/getting-started.zh-CN.html
index 668675ae9d..ed4493cf1d 100644
--- a/docs/getting-started.zh-CN.html
+++ b/docs/getting-started.zh-CN.html
@@ -454,7 +454,7 @@
 

 
 
在入门教程包的根目录，创建一个含有下面代码的 helloworld.html

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <script src="build/react.js"></script>
@@ -475,23 +475,23 @@
 
在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 JSX 语法 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 <script type="text/jsx"> 标签包裹着含有 JSX 的代码，然后引入 JSXTransformer.js 库来实现在浏览器里的代码转换。

 
分离文件 #

 
你的 React JSX 代码文件可以写在另外的文件里。新建下面的 src/helloworld.js。

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 React.renderComponent(
   <h1>Hello, world!</h1>,
   document.getElementById('example')
 );
 

 
然后在 helloworld.html 引用该文件：

-
<script type="text/jsx" src="src/helloworld.js"></script>
+
<script type="text/jsx" src="src/helloworld.js"></script>
 
离线转换 #

 
先安装命令行工具（依赖 npm）：

-
npm install -g react-tools
+
npm install -g react-tools
 

 
然后把你的 src/helloworld.js 文件转成标准的 JavaScript:

-
jsx --watch src/ build/
+
jsx --watch src/ build/
 

 
只要你修改了， build/helloworld.js 文件会自动生成。

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 React.renderComponent(
   React.DOM.h1(null, 'Hello, world!'),
   document.getElementById('example')
@@ -504,7 +504,7 @@
 
 
 
对照下面更新你的 HTML 代码

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <title>Hello React!</title>
diff --git a/docs/index.html b/docs/index.html
index ddbba7cca5..c743d939b0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,6 +1,8 @@
-
-
-  
-
-
-
+      
+      
+      Redirecting...
+      
+      
+      
Redirecting...

+      Click here if you are not redirected.
+      
diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html
index 2922b3e977..7d2c67f5db 100644
--- a/docs/interactivity-and-dynamic-uis.html
+++ b/docs/interactivity-and-dynamic-uis.html
@@ -438,7 +438,7 @@
     

 
     
You've already learned how to display data with React. Now let's look at how to make our UIs interactive.

-
A Simple Example #
/** @jsx React.DOM */
+
A Simple Example #
/** @jsx React.DOM */
 
 var LikeButton = React.createClass({
   getInitialState: function() {
diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html
index 40b260a38b..a17e2608f8 100644
--- a/docs/jsx-gotchas.html
+++ b/docs/jsx-gotchas.html
@@ -446,30 +446,30 @@
 
 
HTML Entities #

 
You can insert HTML entities within literal text in JSX:

-
<div>First &middot; Second</div>
+
<div>First &middot; Second</div>
 

 
If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.

-
// Bad: It displays "First &middot; Second"
+
// Bad: It displays "First &middot; Second"
 <div>{'First &middot; Second'}</div>
 

 
There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.

-
<div>{'First · Second'}</div>
+
<div>{'First · Second'}</div>
 

 
A safer alternative is to find the unicode number corresponding to the entity and use it inside of a JavaScript string.

-
<div>{'First \u00b7 Second'}</div>
+
<div>{'First \u00b7 Second'}</div>
 <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
 

 
You can use mixed arrays with strings and JSX elements.

-
<div>{['First ', <span>&middot;</span>, ' Second']}</div>
+
<div>{['First ', <span>&middot;</span>, ' Second']}</div>
 

 
As a last resort, you always have the ability to insert raw HTML.

-
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
+
<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />
 
Custom HTML Attributes #

 
If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with data-.

-
<div data-custom-attribute="foo" />
+
<div data-custom-attribute="foo" />
 

 
Web Accessibility attributes starting with aria- will be rendered properly.

-
<div aria-hidden={true} />
+
<div aria-hidden={true} />
 

 
     

diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html
index a2ab961c46..511c9c6493 100644
--- a/docs/jsx-in-depth.html
+++ b/docs/jsx-in-depth.html
@@ -450,7 +450,7 @@ with React.

 
Why JSX? #

 
React works out of the box without JSX. Simply construct your markup using the
 functions on React.DOM. For example, here's how to construct a simple link:

-
var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
+
var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
 

 
We recommend using JSX for many reasons:

 
@@ -462,7 +462,7 @@ functions on React.DOM. For example, here's how to construct a
 
The Transform #

 
JSX transforms from an XML-like syntax into native JavaScript. XML elements and
 attributes are transformed into function calls and objects, respectively.

-
var Nav;
+
var Nav;
 // Input (JSX):
 var app = <Nav color="blue" />;
 // Output (JS):
@@ -471,7 +471,7 @@ attributes are transformed into function calls and objects, respectively.

 
Notice that in order to use <Nav />, the Nav variable must be in scope.

 
 
JSX also allows specifying children using XML syntax:

-
var Nav, Profile;
+
var Nav, Profile;
 // Input (JSX):
 var app = <Nav color="blue"><Profile>click</Profile></Nav>;
 // Output (JS):
@@ -502,12 +502,12 @@ React in mind. The two valid uses of JSX are:

 
 
React DOM Components #

 
To construct a <div> is to create a variable that refers to React.DOM.div.

-
var div = React.DOM.div;
+
var div = React.DOM.div;
 var app = <div className="appClass">Hello, React!</div>;
 
React Composite Components #

 
To construct an instance of a composite component, create a variable that
 references the class.

-
var MyComponent = React.createClass({/*...*/});
+
var MyComponent = React.createClass({/*...*/});
 var app = <MyComponent someProperty={true} />;
 

 
JSX will infer the component's name from the variable assignment and specify
@@ -527,7 +527,7 @@ as XML attribute names. Instead, React DOM components expect attributes like
 (e.g. var div, span, h1, h2, ...). JSX provides a convenience to address this
 problem by allowing you to specify a variable in an @jsx docblock field. JSX
 will use that field to find DOM components.

-
/**
+
/**
  * @jsx React.DOM
  */
 var Nav;
@@ -546,19 +546,19 @@ used elements. In general, JSX has no notion of the DOM.

 
JavaScript Expressions #
Attribute Expressions #

 
To use a JavaScript expression as an attribute value, wrap the expression in a
 pair of curly braces ({}) instead of quotes ("").

-
// Input (JSX):
+
// Input (JSX):
 var person = <Person name={window.isLoggedIn ? window.name : ''} />;
 // Output (JS):
 var person = Person({name: window.isLoggedIn ? window.name : ''});
 
Child Expressions #

 
Likewise, JavaScript expressions may be used to express children:

-
// Input (JSX):
+
// Input (JSX):
 var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
 // Output (JS):
 var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
 
Comments #

 
It's easy to add comments within your JSX; they're just JS expressions. You just need to be careful to put {} around the comments when you are within the children section of a tag.

-
var content = (
+
var content = (
   <Nav>
     {/* child comment, put {} around */}
     <Person
diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html
index 597590abb8..04c43fe3c8 100644
--- a/docs/more-about-refs.html
+++ b/docs/more-about-refs.html
@@ -440,7 +440,7 @@
     
After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent props are sent to each child that is output from render(). However there are a few cases, where it still might be necessary or beneficial.

 
 
Consider the case when you wish to tell an <input /> element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, ''.

-
  var App = React.createClass({
+
  var App = React.createClass({
     getInitialState: function() {
       return {userInput: ''};
     },
@@ -475,7 +475,7 @@
 
 
 
This means that you should never "hold onto" something that you return from render() and then expect it to be anything meaningful.

-
  // counterexample: DO NOT DO THIS!
+
  // counterexample: DO NOT DO THIS!
   render: function() {
     var myInput = <input />;          // I'm going to try to call methods on this
     this.rememberThisInput = myInput; // input at some point in the future! YAY!
@@ -496,15 +496,17 @@
 
It's as simple as:

 
 
    
-
  1. Assign a ref attribute to anything returned from render such as:
    
-
    <input ref="myInput" />
-
    2. 
-
  2. In some other code (typically event handler code), access the backing instance via this.refs as in:
    
-
    this.refs.myInput
-
    
-
    You can access the component's DOM node directly by calling this.refs.myInput.getDOMNode().
    3. 
+
  3. Assign a ref attribute to anything returned from render such as:
    4. 
 

-
Completing the Example #
  var App = React.createClass({
+
  <input ref="myInput" />
+

+
    
+
  1. In some other code (typically event handler code), access the backing instance via this.refs as in:
    2. 
+

+
  this.refs.myInput
+

+
You can access the component's DOM node directly by calling this.refs.myInput.getDOMNode().

+
Completing the Example #
  var App = React.createClass({
     getInitialState: function() {
       return {userInput: ''};
     },
diff --git a/docs/multiple-components.html b/docs/multiple-components.html
index 396644525c..1326fb7c67 100644
--- a/docs/multiple-components.html
+++ b/docs/multiple-components.html
@@ -442,7 +442,7 @@
 
By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can separate the different concerns of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.

 
Composition Example #

 
Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var Avatar = React.createClass({
   render: function() {
@@ -483,12 +483,12 @@
 
It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, Avatar owns the div, ProfilePic and ProfileLink instances, and div is the parent (but not owner) of the ProfilePic and ProfileLink instances.

 
Children #

 
When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:

-
<Parent><Child /></Parent>
+
<Parent><Child /></Parent>
 

 
Parent can read its children by accessing the special this.props.children prop. this.props.children is an opaque data structure: use the React.Children utilities to manipulate them.

 
Child Reconciliation #

 
Reconciliation is the process by which React updates the DOM with each new render pass. In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:

-
// Render Pass 1
+
// Render Pass 1
 <Card>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
@@ -503,7 +503,7 @@
 
For most components, this is not a big deal. However, for stateful components that maintain data in this.state across render passes, this can be very problematic.

 
 
In most cases, this can be sidestepped by hiding elements instead of destroying them:

-
// Render Pass 1
+
// Render Pass 1
 <Card>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
@@ -515,7 +515,7 @@
 </Card>
 
Dynamic Children #

 
The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a key:

-
  render: function() {
+
  render: function() {
     var results = this.props.results;
     return (
       <ol>
@@ -529,7 +529,7 @@
 
When React reconciles the keyed children, it will ensure that any child with key will be reordered (instead of clobbered) or destroyed (instead of reused).

 
 
You can also key children by passing an object. The object keys will be used as key for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order except for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:

-
  render: function() {
+
  render: function() {
     var items = {};
 
     this.props.results.forEach(function(result) {
diff --git a/docs/perf.html b/docs/perf.html
index bf867b086f..2a50d7ee3a 100644
--- a/docs/perf.html
+++ b/docs/perf.html
@@ -472,7 +472,7 @@
 
The above print methods use Perf.getLastMeasurements() to pretty-print the result.

 
Perf.getLastMeasurements() #

 
Get the measurements array from the last start-stop session. The array contains objects, each of which looks like this:

-
{
+
{
   // The term "inclusive" and "exclusive" are explained below
   "exclusive": {},
   // '.0.0' is the React ID of the node
diff --git a/docs/pure-render-mixin.html b/docs/pure-render-mixin.html
index 0da1bfb322..72806a5fbc 100644
--- a/docs/pure-render-mixin.html
+++ b/docs/pure-render-mixin.html
@@ -440,7 +440,7 @@
     
If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this mixin for a performance boost in some cases.

 
 
Example:

-
var PureRenderMixin = require('react').addons.PureRenderMixin;
+
var PureRenderMixin = require('react').addons.PureRenderMixin;
 React.createClass({
   mixins: [PureRenderMixin],
 
diff --git a/docs/reconciliation.html b/docs/reconciliation.html
index ba098a113c..c244d699d7 100644
--- a/docs/reconciliation.html
+++ b/docs/reconciliation.html
@@ -455,12 +455,12 @@
 
In order to do a tree diff, we first need to be able to diff two nodes. There are three different cases being handled.

 
Different Node Types #

 
If the node type is different, React is going to treat them as two different sub-trees, throw away the first one and build/insert the second one. 

-
renderA: <div />
+
renderA: <div />
 renderB: <span />
 => [removeNode <div />], [insertNode <span />]
 

 
The same logic is used for custom components. If they are not of the same type, React is not going to even try at matching what they render. It is just going to remove the first one from the DOM and insert the second one.

-
renderA: <Header />
+
renderA: <Header />
 renderB: <Content />
 => [removeNode <Header />], [insertNode <Content />]
 

@@ -471,12 +471,12 @@ renderB: <Content />
 
As a corollary, if there is a <Header> element at the same position in two consecutive renders, you would expect to see a very similar structure and it is worth exploring it.

 
DOM Nodes #

 
When comparing two DOM nodes, we look at the attributes of both and can decide which of them changed in linear time.

-
renderA: <div id="before" />
+
renderA: <div id="before" />
 renderB: <div id="after" />
 => [replaceAttribute id "after"]
 

 
Instead of treating style as an opaque string, a key-value object is used instead. This lets us update only the properties that changed.

-
renderA: <div style={{color: 'red'}} />
+
renderA: <div style={{color: 'red'}} />
 renderB: <div style={{fontWeight: 'bold'}} />
 => [removeStyle color], [addStyle font-weight 'bold']
 

@@ -489,19 +489,19 @@ renderB: <div style=In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there's a difference.

 
 
For example if you add an element at the end:

-
renderA: <div><span>first</span></div>
+
renderA: <div><span>first</span></div>
 renderB: <div><span>first</span><span>second</span></div>
 => [insertNode <span>second</span>]
 

 
Inserting an element at the beginning is problematic. React is going to see that both nodes are spans and therefore run into a mutation mode.

-
renderA: <div><span>first</span></div>
+
renderA: <div><span>first</span></div>
 renderB: <div><span>second</span><span>first</span></div>
 => [replaceAttribute textContent 'second'], [insertNode <span>first</span>]
 

 
There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. Levenshtein distance can find the minimum using single element insertion, deletion and substitution in O(n2). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity.

 
Keys #

 
In order to solve this seemingly intractable issue, an optional attribute has been introduced. You can provide for each child a key that is going to be used to do the matching. If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table.

-
renderA: <div><span key="first">first</span></div>
+
renderA: <div><span key="first">first</span></div>
 renderB: <div><span key="second">second</span><span key="first">first</span></div>
 => [insertNode <span>second</span>]
 

diff --git a/docs/reference.html b/docs/reference.html
index b68c0a5f5a..cdf597f46b 100644
--- a/docs/reference.html
+++ b/docs/reference.html
@@ -1,6 +1,8 @@
-
-
-  
-
-
-
+      
+      
+      Redirecting...
+      
+      
+      
Redirecting...

+      Click here if you are not redirected.
+      
diff --git a/docs/reusable-components.html b/docs/reusable-components.html
index 6ba1cced4a..641d94fd19 100644
--- a/docs/reusable-components.html
+++ b/docs/reusable-components.html
@@ -440,7 +440,7 @@
     
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.

 
Prop Validation #

 
As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons propTypes is only checked in development mode. Here is an example documenting the different validators provided:

-
React.createClass({
+
React.createClass({
   propTypes: {
     // You can declare that a prop is a specific JS primitive. By default, these
     // are all optional.
@@ -505,7 +505,7 @@
 });
 
Default Prop Values #

 
React lets you define default values for your props in a very declarative way:

-
var ComponentWithDefaultProps = React.createClass({
+
var ComponentWithDefaultProps = React.createClass({
   getDefaultProps: function() {
     return {
       value: 'default value'
@@ -517,7 +517,7 @@
 
The result of getDefaultProps() will be cached and used to ensure that this.props.value will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.

 
Transferring Props: A Shortcut #

 
A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides transferPropsTo() to do just this.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var CheckLink = React.createClass({
   render: function() {
@@ -536,7 +536,7 @@
 
Single Child #

 
With React.PropTypes.component you can specify that only a single child can be passed to
 a component as children.

-
var MyComponent = React.createClass({
+
var MyComponent = React.createClass({
   propTypes: {
     children: React.PropTypes.component.isRequired
   },
@@ -554,7 +554,7 @@ a component as children.

 
Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called cross-cutting concerns. React provides mixins to solve this problem.

 
 
One common use case is a component wanting to update itself on a time interval. It's easy to use setInterval(), but it's important to cancel your interval when you don't need it anymore to save memory. React provides lifecycle methods that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy setInterval() function that will automatically get cleaned up when your component is destroyed.

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var SetIntervalMixin = {
   componentWillMount: function() {
diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html
index 576bbd7121..3454ae982c 100644
--- a/docs/tags-and-attributes.html
+++ b/docs/tags-and-attributes.html
@@ -441,7 +441,7 @@
 
React attempts to support all common elements. If you need an element that isn't listed here, please file an issue.

 
HTML Elements #

 
The following HTML elements are supported:

-
a abbr address area article aside audio b base bdi bdo big blockquote body br
+
a abbr address area article aside audio b base bdi bdo big blockquote body br
 button canvas caption cite code col colgroup data datalist dd del details dfn
 div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
 head header hr html i iframe img input ins kbd keygen label legend li link
@@ -451,7 +451,7 @@ source span strong style sub summary sup table tbody td textarea tfoot th
 thead time title tr track u ul var video wbr
 
SVG elements #

 
The following SVG elements are supported:

-
circle defs ellipse g line linearGradient mask path pattern polygon polyline
+
circle defs ellipse g line linearGradient mask path pattern polygon polyline
 radialGradient rect stop svg text tspan
 

 
You may also be interested in react-art, a drawing library for React that can render to Canvas, SVG, or VML (for IE8).

@@ -467,7 +467,7 @@ radialGradient rect stop svg text tspan
 
For a list of events, see Supported Events.

 
HTML Attributes #

 
These standard attributes are supported:

-
accept accessKey action allowFullScreen allowTransparency alt async
+
accept accessKey action allowFullScreen allowTransparency alt async
 autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
 className cols colSpan content contentEditable contextMenu controls coords
 crossOrigin data dateTime defer dir disabled download draggable encType form
@@ -487,7 +487,7 @@ style tabIndex target title type useMap value width wmode
 
 
 
There is also the React-specific attribute dangerouslySetInnerHTML (more here), used for directly inserting HTML strings into a component.

-
SVG Attributes #
cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform
+
SVG Attributes #
cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform
 gradientUnits markerEnd markerMid markerStart offset opacity
 patternContentUnits patternUnits points preserveAspectRatio r rx ry
 spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap
diff --git a/docs/test-utils.html b/docs/test-utils.html
index 0d956783df..8349e7bc07 100644
--- a/docs/test-utils.html
+++ b/docs/test-utils.html
@@ -438,57 +438,57 @@
     

 
     
React.addons.TestUtils makes it easy to test React components in the testing framework of your choice (we use Jest).

-
Simulate #
Simulate.{eventName}(DOMElement element, object eventData)
+
Simulate #
Simulate.{eventName}(DOMElement element, object eventData)
 

 
Simulate an event dispatch on a DOM node with optional eventData event data. This is possibly the single most useful utility in ReactTestUtils.

 
 
Example usage:

-
var node = this.refs.input.getDOMNode();
+
var node = this.refs.input.getDOMNode();
 React.addons.TestUtils.Simulate.click(node);
 React.addons.TestUtils.Simulate.change(node);
 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
 

 
Simulate has a method for every event that React understands.

-
renderIntoDocument #
ReactComponent renderIntoDocument(ReactComponent instance)
+
renderIntoDocument #
ReactComponent renderIntoDocument(ReactComponent instance)
 

 
Render a component into a detached DOM node in the document. This function requires a DOM.

-
mockComponent #
object mockComponent(function componentClass, string? tagName)
+
mockComponent #
object mockComponent(function componentClass, string? tagName)
 

 
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple <div> (or other tag if mockTagName is provided) containing any provided children.

-
isComponentOfType #
boolean isComponentOfType(ReactComponent instance, function componentClass)
+
isComponentOfType #
boolean isComponentOfType(ReactComponent instance, function componentClass)
 

 
Returns true if instance is an instance of a React componentClass.

-
isDOMComponent #
boolean isDOMComponent(ReactComponent instance)
+
isDOMComponent #
boolean isDOMComponent(ReactComponent instance)
 

 
Returns true if instance is a DOM component (such as a <div> or <span>).

-
isCompositeComponent #
boolean isCompositeComponent(ReactComponent instance)`
+
isCompositeComponent #
boolean isCompositeComponent(ReactComponent instance)`
 

 
Returns true if instance is a composite component (created with React.createClass())

-
isCompositeComponentWithType #
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
+
isCompositeComponentWithType #
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
 

 
The combination of isComponentOfType() and isCompositeComponent().

-
isTextComponent #
boolean isTextComponent(ReactComponent instance)
+
isTextComponent #
boolean isTextComponent(ReactComponent instance)
 

 
Returns true if instance is a plain text component.

-
findAllInRenderedTree #
array findAllInRenderedTree(ReactComponent tree, function test)
+
findAllInRenderedTree #
array findAllInRenderedTree(ReactComponent tree, function test)
 

 
Traverse all components in tree and accumulate all components where test(component) is true. This is not that useful on its own, but it's used as a primitive for other test utils.

-
scryRenderedDOMComponentsWithClass #
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
+
scryRenderedDOMComponentsWithClass #
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
 

 
Finds all instances of components in the rendered tree that are DOM components with the class name matching className.

-
findRenderedDOMComponentWithClass #
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
+
findRenderedDOMComponentWithClass #
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
 

 
Like scryRenderedDOMComponentsWithClass() but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.

-
scryRenderedDOMComponentsWithTag #
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
+
scryRenderedDOMComponentsWithTag #
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
 

 
Finds all instances of components in the rendered tree that are DOM components with the tag name matching tagName.

-
findRenderedDOMComponentWithTag #
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
+
findRenderedDOMComponentWithTag #
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
 

 
Like scryRenderedDOMComponentsWithTag() but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.

-
scryRenderedComponentsWithType #
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
+
scryRenderedComponentsWithType #
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
 

 
Finds all instances of components with type equal to componentClass.

-
findRenderedComponentWithType #
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
+
findRenderedComponentWithType #
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
 

 
Same as scryRenderedComponentsWithType() but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.

 
diff --git a/docs/thinking-in-react.html b/docs/thinking-in-react.html
index 5fd936bda0..5f6ac9964b 100644
--- a/docs/thinking-in-react.html
+++ b/docs/thinking-in-react.html
@@ -448,7 +448,7 @@
 
Mockup

 
 
Our JSON API returns some data that looks like this:

-
[
+
[
   {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
   {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
   {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
diff --git a/docs/top-level-api.html b/docs/top-level-api.html
index 17800ab010..f959eca3d6 100644
--- a/docs/top-level-api.html
+++ b/docs/top-level-api.html
@@ -439,12 +439,12 @@
 
     
React #

 
React is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can require() it.

-
React.createClass #
function createClass(object specification)
+
React.createClass #
function createClass(object specification)
 

 
Create a component given a specification. A component implements a render method which returns one single child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.

 
 
For more information about the specification object, see Component Specs and Lifecycle.

-
React.renderComponent #
ReactComponent renderComponent(
+
React.renderComponent #
ReactComponent renderComponent(
   ReactComponent component,
   DOMElement container,
   [function callback]
@@ -463,36 +463,36 @@
 pass in. In the future, it may be possible to insert a component to an
 existing DOM node without overwriting the existing children.

 
-
React.unmountComponentAtNode #
boolean unmountComponentAtNode(DOMElement container)
+
React.unmountComponentAtNode #
boolean unmountComponentAtNode(DOMElement container)
 

 
Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

-
React.renderComponentToString #
string renderComponentToString(ReactComponent component)
+
React.renderComponentToString #
string renderComponentToString(ReactComponent component)
 

 
Render a component to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.

 
 
If you call React.renderComponent() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

-
React.renderComponentToStaticMarkup #
string renderComponentToStaticMarkup(ReactComponent component)
+
React.renderComponentToStaticMarkup #
string renderComponentToStaticMarkup(ReactComponent component)
 

 
Similar to renderComponentToString, except this doesn't create extra DOM attributes such as data-react-id, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

 
React.DOM #

 
React.DOM provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the /** @jsx React.DOM */ docblock.

 
React.PropTypes #

 
React.PropTypes includes types that can be used with a component's propTypes object to validate props being passed to your components. For more information about propTypes, see Reusable Components.

-
React.initializeTouchEvents #
initializeTouchEvents(boolean shouldUseTouch)
+
React.initializeTouchEvents #
initializeTouchEvents(boolean shouldUseTouch)
 

 
Configure React's event system to handle touch events on mobile devices.

 
React.Children #

 
React.Children provides utilities for dealing with the this.props.children opaque data structure.

-
React.Children.map #
object React.Children.map(object children, function fn [, object context])
+
React.Children.map #
object React.Children.map(object children, function fn [, object context])
 

 
Invoke fn on every immediate child contained within children with this set to context. If children is a nested object or array it will be traversed: fn will never be passed the container objects. If children is null or undefined returns null or undefined rather than an empty object.

-
React.Children.forEach #
React.Children.forEach(object children, function fn [, object context])
+
React.Children.forEach #
React.Children.forEach(object children, function fn [, object context])
 

 
Like React.Children.map() but does not return an object.

-
React.Children.count #
number React.Children.count(object children)
+
React.Children.count #
number React.Children.count(object children)
 

 
Return the total number of components in children, equal to the number of times that a callback passed to map or forEach would be invoked.

-
React.Children.only #
object React.Children.only(object children)
+
React.Children.only #
object React.Children.only(object children)
 

 
Return the only child in children. Throws otherwise.

 
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 347f2ea5c4..fec5654dec 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -458,7 +458,7 @@
 
It's all on GitHub.

 
Getting started #

 
For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:

-
<!-- template.html -->
+
<!-- template.html -->
 <html>
   <head>
     <title>Hello React</title>
@@ -485,13 +485,13 @@
 
 
Your first component #

 
React is all about modular, composable components. For our comment box example, we'll have the following component structure:

-
- CommentBox
+
- CommentBox
   - CommentList
     - Comment
   - CommentForm
 

 
Let's build the CommentBox component, which is just a simple <div>:

-
// tutorial1.js
+
// tutorial1.js
 var CommentBox = React.createClass({
   render: function() {
     return (
@@ -507,7 +507,7 @@
 );
 
JSX Syntax #

 
The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:

-
// tutorial1-raw.js
+
// tutorial1-raw.js
 var CommentBox = React.createClass({displayName: 'CommentBox',
   render: function() {
     return (
@@ -533,7 +533,7 @@
 
React.renderComponent() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

 
Composing components #

 
Let's build skeletons for CommentList and CommentForm which will, again, be simple <div>s:

-
// tutorial2.js
+
// tutorial2.js
 var CommentList = React.createClass({
   render: function() {
     return (
@@ -555,7 +555,7 @@
 });
 

 
Next, update the CommentBox component to use its new friends:

-
// tutorial3.js
+
// tutorial3.js
 var CommentBox = React.createClass({
   render: function() {
     return (
@@ -571,7 +571,7 @@
 
Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.

 
Component Properties #

 
Let's create our third component, Comment. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the CommentList:

-
// tutorial4.js
+
// tutorial4.js
 var CommentList = React.createClass({
   render: function() {
     return (
@@ -586,7 +586,7 @@
 
Note that we have passed some data from the parent CommentList component to the child Comment components. For example, we passed Pete Hunt (via an attribute) and This is one comment (via an XML-like child node) to the first Comment. Data passed from parent to children components is called props, short for properties.

 
Using props #

 
Let's create the Comment component. Using props we will be able to read the data passed to it from the CommentList, and render some markup:

-
// tutorial5.js
+
// tutorial5.js
 var Comment = React.createClass({
   render: function() {
     return (
@@ -605,7 +605,7 @@
 
Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.

 
 
First, add the third-party Showdown library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):

-
<!-- template.html -->
+
<!-- template.html -->
 <head>
   <title>Hello React</title>
   <script src="http://fb.me/react-0.11.1.js"></script>
@@ -615,7 +615,7 @@
 </head>
 

 
Next, let's convert the comment text to Markdown and output it:

-
// tutorial6.js
+
// tutorial6.js
 var converter = new Showdown.converter();
 var Comment = React.createClass({
   render: function() {
@@ -635,7 +635,7 @@
 
But there's a problem! Our rendered comments look like this in the browser: "<p>This is <em>another</em> comment</p>". We want those tags to actually render as HTML.

 
 
That's React protecting you from an XSS attack. There's a way to get around it but the framework warns you not to use it:

-
// tutorial7.js
+
// tutorial7.js
 var converter = new Showdown.converter();
 var Comment = React.createClass({
   render: function() {
@@ -656,14 +656,14 @@
 
Remember: by using this feature you're relying on Showdown to be secure.

 
Hook up the data model #

 
So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:

-
// tutorial8.js
+
// tutorial8.js
 var data = [
   {author: "Pete Hunt", text: "This is one comment"},
   {author: "Jordan Walke", text: "This is *another* comment"}
 ];
 

 
We need to get this data into CommentList in a modular way. Modify CommentBox and the renderComponent() call to pass this data into the CommentList via props:

-
// tutorial9.js
+
// tutorial9.js
 var CommentBox = React.createClass({
   render: function() {
     return (
@@ -682,7 +682,7 @@
 );
 

 
Now that the data is available in the CommentList, let's render the comments dynamically:

-
// tutorial10.js
+
// tutorial10.js
 var CommentList = React.createClass({
   render: function() {
     var commentNodes = this.props.data.map(function (comment) {
@@ -703,7 +703,7 @@
 
That's it!

 
Fetching from the server #

 
Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:

-
// tutorial11.js
+
// tutorial11.js
 React.renderComponent(
   <CommentBox url="comments.json" />,
   document.getElementById('content')
@@ -716,7 +716,7 @@
 
render() methods are written declaratively as functions of this.props and this.state. The framework guarantees the UI is always consistent with the inputs.

 
 
When the server fetches data, we will be changing the comment data we have. Let's add an array of comment data to the CommentBox component as its state:

-
// tutorial12.js
+
// tutorial12.js
 var CommentBox = React.createClass({
   getInitialState: function() {
     return {data: []};
@@ -735,7 +735,7 @@
 
getInitialState() executes exactly once during the lifecycle of the component and sets up the initial state of the component.

 
Updating state #

 
When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:

-
// tutorial13.json
+
// tutorial13.json
 [
   {"author": "Pete Hunt", "text": "This is one comment"},
   {"author": "Jordan Walke", "text": "This is *another* comment"}
@@ -744,7 +744,7 @@
 
We'll use jQuery to help make an asynchronous request to the server.

 
 
Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. The easiest way to do this is to run python -m SimpleHTTPServer in your application's directory.

-
// tutorial13.js
+
// tutorial13.js
 var CommentBox = React.createClass({
   getInitialState: function() {
     return {data: []};
@@ -773,7 +773,7 @@
 });
 

 
Here, componentDidMount is a method called automatically by React when a component is rendered. The key to dynamic updates is the call to this.setState(). We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.

-
// tutorial14.js
+
// tutorial14.js
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
     $.ajax({
@@ -813,7 +813,7 @@
 
All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the comments.json file; within 2 seconds, the changes will show!

 
Adding new comments #

 
Now it's time to build the form. Our CommentForm component should ask the user for their name and comment text and send a request to the server to save the comment.

-
// tutorial15.js
+
// tutorial15.js
 var CommentForm = React.createClass({
   render: function() {
     return (
@@ -827,7 +827,7 @@
 });
 

 
Let's make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let's listen for the form's submit event and clear it.

-
// tutorial16.js
+
// tutorial16.js
 var CommentForm = React.createClass({
   handleSubmit: function() {
     var author = this.refs.author.getDOMNode().value.trim();
@@ -860,7 +860,7 @@
 
When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in CommentBox since CommentBox owns the state that represents the list of comments.

 
 
We need to pass data from the child component back up to its parent. We do this in our parent's render method by passing a new callback (handleCommentSubmit) into the child, binding it to the child's onCommentSubmit event. Whenever the event is triggered, the callback will be invoked:

-
// tutorial17.js
+
// tutorial17.js
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
     $.ajax({
@@ -896,7 +896,7 @@
 });
 

 
Let's call the callback from the CommentForm when the user submits the form:

-
// tutorial18.js
+
// tutorial18.js
 var CommentForm = React.createClass({
   handleSubmit: function() {
     var author = this.refs.author.getDOMNode().value.trim();
@@ -918,7 +918,7 @@
 });
 

 
Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:

-
// tutorial19.js
+
// tutorial19.js
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
     $.ajax({
@@ -965,7 +965,7 @@
 });
 
Optimization: optimistic updates #

 
Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.

-
// tutorial20.js
+
// tutorial20.js
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
     $.ajax({
diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html
index a5ae179eac..6ec6c424be 100644
--- a/docs/two-way-binding-helpers.html
+++ b/docs/two-way-binding-helpers.html
@@ -460,7 +460,7 @@
 
 
ReactLink: Before and After #

 
Here's a simple form example without using ReactLink:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var NoLink = React.createClass({
   getInitialState: function() {
@@ -476,7 +476,7 @@
 });
 

 
This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use ReactLink to save us some typing:

-
/** @jsx React.DOM */
+
/** @jsx React.DOM */
 
 var WithLink = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
@@ -495,7 +495,7 @@
 
Note that <input> supports ReactLink for both value and checked.

 
Under the Hood #

 
There are two sides to ReactLink: the place where you create the ReactLink instance and the place where you use it. To prove how simple ReactLink is, let's rewrite each side separately to be more explicit.

-
ReactLink Without LinkedStateMixin #
/** @jsx React.DOM */
+
ReactLink Without LinkedStateMixin #
/** @jsx React.DOM */
 
 var WithoutMixin = React.createClass({
   getInitialState: function() {
@@ -514,7 +514,7 @@
 });
 

 
As you can see, ReactLink objects are very simple objects that just have a value and requestChange prop. And LinkedStateMixin is similarly simple: it just populates those fields with a value from this.state and a callback that calls this.setState().

-
ReactLink Without valueLink #
/** @jsx React.DOM */
+
ReactLink Without valueLink #
/** @jsx React.DOM */
 
 var WithoutLink = React.createClass({
   mixins: [React.addons.LinkedStateMixin],
diff --git a/docs/update.html b/docs/update.html
index 6be038a165..8c3f99bdda 100644
--- a/docs/update.html
+++ b/docs/update.html
@@ -442,17 +442,17 @@
 
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like Clojure. However, we've provided a simple immutability helper, update(), that makes dealing with this type of data much easier, without fundamentally changing how your data is represented.

 
The main idea #

 
If you mutate data like this:

-
myData.x.y.z = 7;
+
myData.x.y.z = 7;
 // or...
 myData.a.b.push(9);
 

 
you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of myData and change only the parts of it that need to be changed. Then you can compare the old copy of myData with the new one in shouldComponentUpdate() using triple-equals:

-
var newData = deepCopy(myData);
+
var newData = deepCopy(myData);
 newData.x.y.z = 7;
 newData.a.b.push(9);
 

 
Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:

-
var newData = extend(myData, {
+
var newData = extend(myData, {
   x: extend(myData.x, {
     y: extend(myData.x.y, {z: 7}),
   }),
@@ -462,7 +462,7 @@
 
While this is fairly performant (since it only shallow copies log n objects and reuses the rest), it's a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.

 
 
update() provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:

-
var newData = React.addons.update(myData, {
+
var newData = React.addons.update(myData, {
   x: {y: {z: {$set: 7}}},
   a: {b: {$push: [9]}}
 });
@@ -479,21 +479,21 @@
 
  • {$merge: object} merge the keys of object with the target.
    • 
 
  • {$apply: function} passes in the current value to the function and updates it with the new returned value.
    • 
 
-
    Examples #
    Simple push #
    var initialArray = [1, 2, 3];
+
    Examples #
    Simple push #
    var initialArray = [1, 2, 3];
 var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
 
    
 
    initialArray is still [1, 2, 3].
    
-
    Nested collections #
    var collection = [1, 2, {a: [12, 17, 15]}];
+
    Nested collections #
    var collection = [1, 2, {a: [12, 17, 15]}];
 var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
 // => [1, 2, {a: [12, 13, 14, 15]}]
 
    
 
    This accesses collection's index 2, key a, and does a splice of one item starting from index 1 (to remove 17) while inserting 13 and 14.
    
-
    Updating a value based on its current one #
    var obj = {a: 5, b: 3};
+
    Updating a value based on its current one #
    var obj = {a: 5, b: 3};
 var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
 // => {a: 5, b: 6}
 // This is equivalent, but gets verbose for deeply nested collections:
 var newObj2 = update(obj, {b: {$set: obj.b * 2}});
-
    (Shallow) merge #
    var obj = {a: 5, b: 3};
+
    (Shallow) merge #
    var obj = {a: 5, b: 3};
 var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
 
    
 
diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html
index 1db3228544..4aa422ead0 100644
--- a/docs/working-with-the-browser.html
+++ b/docs/working-with-the-browser.html
@@ -454,7 +454,7 @@
 
 
 
    In order to get a reference to a React component, you can either use this to get the current React component, or you can use refs to refer to a component you own. They work like this:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var MyComponent = React.createClass({
   handleClick: function() {
diff --git a/downloads.html b/downloads.html
index 981e2054dd..fe357c16a8 100644
--- a/downloads.html
+++ b/downloads.html
@@ -75,35 +75,35 @@
 
    If you're just starting out, make sure to use the development version.
    
 
    Individual Downloads #
    React 0.11.1 (development) #
    
 
    The uncompressed, development version of React core with inline documentation.
    
-
    <script src="http://fb.me/react-0.11.1.js"></script>
+
    <script src="http://fb.me/react-0.11.1.js"></script>
 
    React 0.11.1 (production) #
    
 
    The compressed, production version of React core.
    
-
    <script src="http://fb.me/react-0.11.1.min.js"></script>
+
    <script src="http://fb.me/react-0.11.1.min.js"></script>
 
    React with Add-Ons 0.11.1 (development) #
    
 
    The uncompressed, development version of React with add-ons.
    
-
    <script src="http://fb.me/react-with-addons-0.11.1.js"></script>
+
    <script src="http://fb.me/react-with-addons-0.11.1.js"></script>
 
    React with Add-Ons 0.11.1 (production) #
    
 
    The compressed, production version of React with add-ons.
    
-
    <script src="http://fb.me/react-with-addons-0.11.1.min.js"></script>
+
    <script src="http://fb.me/react-with-addons-0.11.1.min.js"></script>
 
    JSX Transformer #
    
 
    The JSX transformer used to support XML syntax in JavaScript.
    
-
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
+
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
 
    
 
    All scripts are also available via CDNJS.
    
 
    npm #
    
 
    To install the JSX transformer on your computer, run:
    
-
    $ npm install -g react-tools
+
    $ npm install -g react-tools
 
    
 
    For more info about the jsx binary, see the Getting Started guide.
    
 
 
    If you're using an npm-compatible packaging system like browserify or webpack, you can use the react package. After installing it using npm install react or adding react to package.json, you can use React:
    
-
    var React = require('react');
+
    var React = require('react');
 React.renderComponent(...);
 
    
 
    If you'd like to use any add-ons, use var React = require('react/addons'); instead.
    
 
 
    Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.
    
-
    Bower #
    $ bower install --save react
+
    Bower #
    $ bower install --save react
 
    
 
     
    
diff --git a/feed.xml b/feed.xml
index 60e8a83955..fe3f87929e 100644
--- a/feed.xml
+++ b/feed.xml
@@ -10,7 +10,7 @@
 				Community Round-up #21
 				<h2><a class="anchor" name="react-router"></a>React Router <a class="hash-link" href="#react-router">#</a></h2>
 <p><a href="http://ryanflorence.com/">Ryan Florence</a> and <a href="http://twitter.com/mjackson">Michael Jackson</a> ported Ember&#39;s router to React in a project called <a href="https://github.com/rackt/react-router">React Router</a>. This is a very good example of both communities working together to make the web better!</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
   <span class="o">&lt;</span><span class="nx">Routes</span><span class="o">&gt;</span>
     <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">App</span><span class="p">}</span><span class="o">&gt;</span>
       <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;about&quot;</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span><span class="o">/&gt;</span>
@@ -46,7 +46,7 @@
 </ul>
 <h2><a class="anchor" name="referencing-dynamic-children"></a>Referencing Dynamic Children <a class="hash-link" href="#referencing-dynamic-children">#</a></h2>
 <p>While Matt Zabriskie was working on <a href="https://www.npmjs.org/package/react-tabs">react-tabs</a> he discovered how to use React.Children.map and React.addons.cloneWithProps in order to <a href="http://www.mattzabriskie.com/blog/react-referencing-dynamic-children">reference dynamic children</a>.</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
   <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
     <span class="kd">var</span> <span class="nx">children</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">cloneWithProps</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span>
@@ -71,7 +71,7 @@
 <h2><a class="anchor" name="html-parser2-react"></a>HTML Parser2 React <a class="hash-link" href="#html-parser2-react">#</a></h2>
 <p><a href="http://browniefed.github.io/">Jason Brown</a> adapted htmlparser2 to React: <a href="https://www.npmjs.org/package/htmlparser2-react">htmlparser2-react</a>. That allows you to convert raw HTML to the virtual DOM.
 This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
   <span class="s1">&#39;style=&quot;width:100%;height: 100%;&quot;&gt;&lt;article id=&quot;this-article&quot;&gt;&#39;</span> <span class="o">+</span>
   <span class="s1">&#39;&lt;p&gt;hey this is a paragraph&lt;/p&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&#39;</span> <span class="o">+</span>
   <span class="s1">&#39;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&#39;</span><span class="p">;</span>
@@ -106,7 +106,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 
 <p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
 <h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
-<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.  </p>
+<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.</p>
 
 <p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
 
@@ -140,7 +140,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 <iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 <h2><a class="anchor" name="reactintl-mixin-by-yahoo"></a>ReactIntl Mixin by Yahoo <a class="hash-link" href="#reactintl-mixin-by-yahoo">#</a></h2>
 <p>There are a couple of React-related projects that recently appeared on Yahoo&#39;s GitHub, the first one being an  <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It&#39;s great to see them getting excited about React and contributing back to the community.</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
   <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactIntlMixin</span><span class="p">],</span>
   <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
     <span class="k">return</span> <span class="p">(</span>
@@ -157,9 +157,9 @@ This is not the intended way to use React but can be useful as last resort if yo
   <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
 <span class="p">);</span>
 </code></pre></div><h2><a class="anchor" name="thinking-and-learning-react"></a>Thinking and Learning React <a class="hash-link" href="#thinking-and-learning-react">#</a></h2>
-<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations. </p>
+<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations.</p>
 <h2><a class="anchor" name="london-react-meetup"></a>London React Meetup <a class="hash-link" href="#london-react-meetup">#</a></h2>
-<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content. </p>
+<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content.</p>
 
 <ul>
 <li>What&#39;s new in React 0.11 and how to improve performance by guaranteeing immutability</li>
@@ -179,7 +179,7 @@ This is not the intended way to use React but can be useful as last resort if yo
 <p>Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a <a href="https://github.com/RReverser/acorn-jsx">JSX parser</a> that&#39;s 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it&#39;s always a good thing to get competition on performance!</p>
 <h2><a class="anchor" name="reactscriptloader"></a>ReactScriptLoader <a class="hash-link" href="#reactscriptloader">#</a></h2>
 <p>Yariv Sadan created <a href="https://github.com/yariv/ReactScriptLoader">ReactScriptLoader</a> to make it easier to write components that require an external script.</p>
-<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
   <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactScriptLoaderMixin</span><span class="p">],</span>
   <span class="nx">getScriptURL</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
     <span class="k">return</span> <span class="s1">&#39;http://d3js.org/d3.v3.min.js&#39;</span><span class="p">;</span>
@@ -194,7 +194,7 @@ This is not the intended way to use React but can be useful as last resort if yo
     <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
   <span class="p">},</span>
   <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-    <span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span> 
+    <span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">scriptLoading</span> <span class="o">?</span> <span class="s1">&#39;Loading script...&#39;</span> <span class="o">:</span>
       <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">scriptLoadError</span> <span class="o">?</span> <span class="s1">&#39;Loading failed&#39;</span> <span class="o">:</span>
       <span class="s1">&#39;Loading succeeded&#39;</span><span class="p">;</span>
@@ -285,7 +285,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
 <h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
 <p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
 <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
   <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
     <span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">/&gt;</span><span class="p">;</span>
@@ -302,7 +302,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <span class="p">}</span>
 </code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
 <p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
 <span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
 <span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
 <span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -320,7 +320,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <span class="p">}</span>
 </code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
 <p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
   <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
     <span class="c1">// Handle enter key</span>
   <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
@@ -428,7 +428,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
 <h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
 <p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
 <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
   <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
     <span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">/&gt;</span><span class="p">;</span>
@@ -445,7 +445,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <span class="p">}</span>
 </code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
 <p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
 <span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
 <span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
 <span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -463,7 +463,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
 <span class="p">}</span>
 </code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
 <p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
-<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
   <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
     <span class="c1">// Handle enter key</span>
   <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
@@ -632,14 +632,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
 It has several purposes:</p>
 
 <ul>
-<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
-will be compiled and cached server-side.</p>
-<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
-</code></pre></div></li>
-<li><p>JSX to JavaScript compilation via popular minification/combination libraries
+<li>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
+will be compiled and cached server-side.</li>
+</ul>
+<div class="highlight"><pre><code class="language-html" data-lang="html">   <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+</code></pre></div>
+<ul>
+<li>JSX to JavaScript compilation via popular minification/combination libraries
 (Cassette and ASP.NET Bundling and Minification). This is suggested for
-production websites.</p></li>
-<li><p>Server-side component rendering to make your initial render super fast.</p></li>
+production websites.</li>
+<li>Server-side component rendering to make your initial render super fast.</li>
 </ul>
 
 <p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
diff --git a/tips/children-props-type.html b/tips/children-props-type.html
index eb70c5e348..31a8cd44ae 100644
--- a/tips/children-props-type.html
+++ b/tips/children-props-type.html
@@ -434,7 +434,7 @@
     
    Type of the Children props
    
     
    
     
    Usually, a component's children (this.props.children) is an array of components:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var GenericWrapper = React.createClass({
   componentDidMount: function() {
@@ -452,7 +452,7 @@
 );
 
    
 
    However, when there is only a single child, this.props.children will be the single child component itself without the array wrapper. This saves an array allocation.
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var GenericWrapper = React.createClass({
   componentDidMount: function() {
diff --git a/tips/children-undefined.html b/tips/children-undefined.html
index 9d73223368..d58f7d542c 100644
--- a/tips/children-undefined.html
+++ b/tips/children-undefined.html
@@ -434,7 +434,7 @@
     
    this.props.children undefined
    
     
    
     
    You can't access the children of your component through this.props.children. this.props.children designates the children being passed onto you by the owner:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var App = React.createClass({
   componentDidMount: function() {
diff --git a/tips/communicate-between-components.html b/tips/communicate-between-components.html
index 6a17414897..f9ca2a831e 100644
--- a/tips/communicate-between-components.html
+++ b/tips/communicate-between-components.html
@@ -437,7 +437,7 @@
 
 
    For child-parent communication:
 Say your GroceryList component has a list of items generated through an array. When a list item is clicked, you want to display its name:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var GroceryList = React.createClass({
   handleClick: function(i) {
diff --git a/tips/controlled-input-null-value.html b/tips/controlled-input-null-value.html
index 934410def9..646950c8de 100644
--- a/tips/controlled-input-null-value.html
+++ b/tips/controlled-input-null-value.html
@@ -438,7 +438,7 @@
 
    You might have run into a problem where value is specified, but the input can still be changed without consent. In this case, you might have accidentally set value to undefined or null.
    
 
 
    The snippet below shows this phenomenon; after a second, the text becomes editable.
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 React.renderComponent(<input value="hi" />, mountNode);
 
diff --git a/tips/dom-event-listeners.html b/tips/dom-event-listeners.html
index a49cc32078..888a11f843 100644
--- a/tips/dom-event-listeners.html
+++ b/tips/dom-event-listeners.html
@@ -440,7 +440,7 @@
 
 
 
    Try to resize the window:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var Box = React.createClass({
   getInitialState: function() {
diff --git a/tips/expose-component-functions.html b/tips/expose-component-functions.html
index 31498cda7b..bf0c584e71 100644
--- a/tips/expose-component-functions.html
+++ b/tips/expose-component-functions.html
@@ -436,7 +436,7 @@
     
    There's another (uncommon) way of communicating between components: simply expose a method on the child component for the parent to call.
    
 
 
    Say a list of todos, which upon clicking get removed. If there's only one unfinished todo left, animate it:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var Todo = React.createClass({
   render: function() {
diff --git a/tips/false-in-jsx.html b/tips/false-in-jsx.html
index 64e7c4fb96..37495e26a1 100644
--- a/tips/false-in-jsx.html
+++ b/tips/false-in-jsx.html
@@ -436,15 +436,15 @@
     
    Here's how false renders in different contexts:
    
 
 
    Renders as id="false":
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 React.renderComponent(<div id={false} />, mountNode);
 
    
 
    String "false" as input value:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 React.renderComponent(<input value={false} />, mountNode);
 
    
 
    No child:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 React.renderComponent(<div>{false}</div>, mountNode);
 
    
 
    The reason why this one doesn't render as the string "false" as a div child is to allow the more common use-case: <div>{x > 1 && 'You have more than one item'}</div>.
    
diff --git a/tips/if-else-in-JSX.html b/tips/if-else-in-JSX.html
index b77a5948c8..2ad69033a9 100644
--- a/tips/if-else-in-JSX.html
+++ b/tips/if-else-in-JSX.html
@@ -434,7 +434,7 @@
     
    If-Else in JSX
    
     
    
     
    if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 // This JSX:
 React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
@@ -443,7 +443,7 @@
 React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);
 
    
 
    This means that if statements don't fit in. Take this example:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 // This JSX:
 <div id={if (condition) { 'msg' }}>Hello World!</div>
@@ -452,7 +452,7 @@
 React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!");
 
    
 
    That's not valid JS. You probably want to make use of a ternary expression:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
 
    
diff --git a/tips/initial-ajax.html b/tips/initial-ajax.html
index c3b2a4c7d8..06c57023ab 100644
--- a/tips/initial-ajax.html
+++ b/tips/initial-ajax.html
@@ -438,7 +438,7 @@
 
    When processing the response of an asynchronous request, be sure to check that the component is still mounted before updating its state by using this.isMounted().
    
 
 
    This example fetches the desired Github user's latest gist:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var UserGist = React.createClass({
   getInitialState: function() {
diff --git a/tips/inline-styles.html b/tips/inline-styles.html
index a125549ca9..bc1e1b5f6f 100644
--- a/tips/inline-styles.html
+++ b/tips/inline-styles.html
@@ -434,7 +434,7 @@
     
    Inline Styles
    
     
    
     
    In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string (more on that later):
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var divStyle = {
   color: 'white',
diff --git a/tips/props-in-getInitialState-as-anti-pattern.html b/tips/props-in-getInitialState-as-anti-pattern.html
index fed573f8e9..d0992f8cce 100644
--- a/tips/props-in-getInitialState-as-anti-pattern.html
+++ b/tips/props-in-getInitialState-as-anti-pattern.html
@@ -442,7 +442,7 @@
 
    Using props, passed down from parent, to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble.
    
 
 
    Bad example:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var MessageBox = React.createClass({
   getInitialState: function() {
@@ -457,7 +457,7 @@
 React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
 
    
 
    Better:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var MessageBox = React.createClass({
   render: function() {
@@ -470,7 +470,7 @@
 
    (For more complex logic, simply isolate the computation in a method.)
    
 
 
    However, it's not an anti-pattern if you make it clear that synchronization's not the goal here:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var Counter = React.createClass({
   getInitialState: function() {
diff --git a/tips/references-to-components.html b/tips/references-to-components.html
index 6136f9cd69..9653e3ebad 100644
--- a/tips/references-to-components.html
+++ b/tips/references-to-components.html
@@ -434,12 +434,12 @@
     
    References to Components
    
     
    
     
    If you're using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. React.renderComponent returns a reference to the mounted component:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var myComponent = React.renderComponent(<MyComponent />, myContainer);
 
    
 
    Keep in mind, however, that the "constructor" of a component doesn't return a component instance! It's just a descriptor: a lightweight representation that tells React what the mounted component should look like.
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var myComponent = <MyComponent />; // This is just a descriptor.
 
diff --git a/tips/style-props-value-px.html b/tips/style-props-value-px.html
index 0cfb94345e..f05f84789d 100644
--- a/tips/style-props-value-px.html
+++ b/tips/style-props-value-px.html
@@ -434,7 +434,7 @@
     
    Shorthand for Specifying Pixel Values in style props
    
     
    
     
    When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works:
    
-
    /** @jsx React.DOM */
+
    /** @jsx React.DOM */
 
 var divStyle = {height: 10}; // rendered as "height:10px"
 React.renderComponent(<div style={divStyle}>Hello World!</div>, mountNode);