Update to latest

Includes #2419, #2428, #2418, #2443, #2433

Author: zpao

docs/interactivity-and-dynamic-uis.html

@@ -406,9 +406,9 @@ <h2><a class="anchor" name="a-simple-example"></a>A Simple Example <a class="has
 
 <p>If you&#39;d like to use React on a touch device such as a phone or tablet, simply call <code>React.initializeTouchEvents(true);</code> to enable touch event handling.</p>
 <h2><a class="anchor" name="under-the-hood-autobinding-and-event-delegation"></a>Under the Hood: Autobinding and Event Delegation <a class="hash-link" href="#under-the-hood-autobinding-and-event-delegation">#</a></h2>
-<p>Under the hood React does a few things to keep your code performant and easy to understand.</p>
+<p>Under the hood, React does a few things to keep your code performant and easy to understand.</p>
 
-<p><strong>Autobinding:</strong> When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of <code>this</code> is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it&#39;s extremely CPU and memory efficient. It&#39;s also less typing!</p>
+<p><strong>Autobinding:</strong> When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of <code>this</code> is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it&#39;s extremely CPU and memory efficient. It&#39;s also less typing!</p>
 
 <p><strong>Event delegation:</strong> React doesn&#39;t actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React&#39;s event handlers are simple no-ops. To learn more about why this is fast, see <a href="http://davidwalsh.name/event-delegate">David Walsh&#39;s excellent blog post</a>.</p>
 <h2><a class="anchor" name="components-are-just-state-machines"></a>Components are Just State Machines <a class="hash-link" href="#components-are-just-state-machines">#</a></h2>

docs/jsx-spread.html

@@ -379,7 +379,7 @@ <h1>
     </h1>
     <div class="subHeader"></div>
 
-    <p>If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:</p>
+    <p>If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX:</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">var</span> <span class="nx">component</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">foo</span><span class="o">=</span><span class="p">{</span><span class="nx">x</span><span class="p">}</span> <span class="nx">bar</span><span class="o">=</span><span class="p">{</span><span class="nx">y</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
 </code></pre></div><h2><a class="anchor" name="mutating-props-is-bad-mkay"></a>Mutating Props is Bad, mkay <a class="hash-link" href="#mutating-props-is-bad-mkay">#</a></h2>
 <p>If you don&#39;t know which properties you want to set, you might be tempted to add them onto the object later:</p>

docs/transferring-props.html

@@ -400,7 +400,7 @@ <h2><a class="anchor" name="manual-transfer"></a>Manual Transfer <a class="hash-
     <span class="p">);</span>
   <span class="p">}</span>
 <span class="p">});</span>
-<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
+<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
   <span class="o">&lt;</span><span class="nx">FancyCheckbox</span> <span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">}</span><span class="o">&gt;</span>
     <span class="nx">Hello</span> <span class="nx">world</span><span class="o">!</span>
   <span class="o">&lt;</span><span class="err">/FancyCheckbox&gt;,</span>
@@ -425,7 +425,7 @@ <h2><a class="anchor" name="transferring-with-...-in-jsx"></a>Transferring with
     <span class="p">);</span>
   <span class="p">}</span>
 <span class="p">});</span>
-<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
+<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
   <span class="o">&lt;</span><span class="nx">FancyCheckbox</span> <span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">}</span><span class="o">&gt;</span>
     <span class="nx">Hello</span> <span class="nx">world</span><span class="o">!</span>
   <span class="o">&lt;</span><span class="err">/FancyCheckbox&gt;,</span>

docs/tutorial.html

@@ -399,7 +399,7 @@ <h1>
 <h3><a class="anchor" name="want-to-skip-all-this-and-just-see-the-source"></a>Want to skip all this and just see the source? <a class="hash-link" href="#want-to-skip-all-this-and-just-see-the-source">#</a></h3>
 <p><a href="https://github.com/reactjs/react-tutorial">It&#39;s all on GitHub.</a></p>
 <h3><a class="anchor" name="getting-started"></a>Getting started <a class="hash-link" href="#getting-started">#</a></h3>
-<p>For this tutorial we&#39;ll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:</p>
+<p>For this tutorial, we&#39;ll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:</p>
 <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
 <span class="nt">&lt;html&gt;</span>
   <span class="nt">&lt;head&gt;</span>

js/jsfiddle-integration.js

@@ -0,0 +1,11 @@
+(function() {
+  var tag = document.querySelector(
+    'script[type="application/javascript;version=1.7"]'
+  );
+  if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
+    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+  }
+  tag.setAttribute('type', 'text/jsx;harmony=true');
+  tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
+})();
+

tips/if-else-in-JSX.html

@@ -387,7 +387,7 @@ <h1>If-Else in JSX</h1>
 <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span> <span class="s1">&#39;msg&#39;</span> <span class="p">}}</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;</span>
 
 <span class="c1">// Is transformed to this JS:</span>
-<span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;dov&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span> <span class="s1">&#39;msg&#39;</span> <span class="p">}},</span> <span class="s2">&quot;Hello World!&quot;</span><span class="p">);</span>
+<span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">id</span><span class="o">:</span> <span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span> <span class="s1">&#39;msg&#39;</span> <span class="p">}},</span> <span class="s2">&quot;Hello World!&quot;</span><span class="p">);</span>
 </code></pre></div>
 <p>That&#39;s not valid JS. You probably want to make use of a ternary expression:</p>
 <div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="nx">condition</span> <span class="o">?</span> <span class="s1">&#39;msg&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;, mountNode);</span>