Update to latest

Includes: #2630, #2633, #2616, #2623, #2622, #2636, #2615, #2649, #2639, #2635

blog/2014/11/25/community-roundup-24.html

@@ -136,7 +136,7 @@ <h2><a class="anchor" name="community-components"></a>Community Components <a cl
 
 <p>Jed Watson (<a href="https://github.com/JedWatson">jedwatson</a>) helps you manage touch, tap, and press events using the <a href="https://github.com/JedWatson/react-tappable">react-tappable</a> component.</p>
 
-<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components, and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>
+<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>
 <h2><a class="anchor" name="waiter-theres-a-css-in-my-javascript"></a>Waiter, There&#39;s a CSS In My JavaScript <a class="hash-link" href="#waiter-theres-a-css-in-my-javascript">#</a></h2>
 <p>The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (<a href="https://github.com/vjeux">vjeux</a>) talks about some of the <a href="https://speakerdeck.com/vjeux/react-css-in-js">fundamental style management challenges</a> we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused <a href="https://github.com/js-next/react-style">react-style</a>.</p>
 <h2><a class="anchor" name="test-isolation"></a>Test Isolation <a class="hash-link" href="#test-isolation">#</a></h2>

blog/index.html

@@ -136,7 +136,7 @@ <h2><a class="anchor" name="community-components"></a>Community Components <a cl
 
 <p>Jed Watson (<a href="https://github.com/JedWatson">jedwatson</a>) helps you manage touch, tap, and press events using the <a href="https://github.com/JedWatson/react-tappable">react-tappable</a> component.</p>
 
-<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components, and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>
+<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>
 <h2><a class="anchor" name="waiter-theres-a-css-in-my-javascript"></a>Waiter, There&#39;s a CSS In My JavaScript <a class="hash-link" href="#waiter-theres-a-css-in-my-javascript">#</a></h2>
 <p>The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (<a href="https://github.com/vjeux">vjeux</a>) talks about some of the <a href="https://speakerdeck.com/vjeux/react-css-in-js">fundamental style management challenges</a> we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused <a href="https://github.com/js-next/react-style">react-style</a>.</p>
 <h2><a class="anchor" name="test-isolation"></a>Test Isolation <a class="hash-link" href="#test-isolation">#</a></h2>

docs/addons.html

@@ -385,15 +385,15 @@ <h1>
 <li><a href="animation.html"><code>TransitionGroup</code> and <code>CSSTransitionGroup</code></a>, for dealing with animations and transitions that are usually not simple to implement, such as before a component&#39;s removal.</li>
 <li><a href="two-way-binding-helpers.html"><code>LinkedStateMixin</code></a>, to simplify the coordination between user&#39;s form input data and the component&#39;s state.</li>
 <li><a href="class-name-manipulation.html"><code>classSet</code></a>, for manipulating the DOM <code>class</code> string a bit more cleanly.</li>
-<li><a href="test-utils.html"><code>TestUtils</code></a>, simple helpers for writing test cases (unminified build only).</li>
 <li><a href="clone-with-props.html"><code>cloneWithProps</code></a>, to make shallow copies of React components and change their props.</li>
 <li><a href="update.html"><code>update</code></a>, a helper function that makes dealing with immutable data in JavaScript easier.</li>
+<li><a href="pure-render-mixin.html"><code>PureRenderMixin</code></a>, a performance booster under certain situations.</li>
 </ul>
 
 <p>The add-ons below are in the development (unminified) version of React only:</p>
 
 <ul>
-<li><a href="pure-render-mixin.html"><code>PureRenderMixin</code></a>, a performance booster under certain situations.</li>
+<li><a href="test-utils.html"><code>TestUtils</code></a>, simple helpers for writing test cases (unminified build only).</li>
 <li><a href="perf.html"><code>Perf</code></a>, for measuring performance and giving you hint where to optimize.</li>
 </ul>
 

docs/events.html

@@ -403,7 +403,9 @@ <h2><a class="anchor" name="syntheticevent"></a>SyntheticEvent <a class="hash-li
 </blockquote>
 <h2><a class="anchor" name="supported-events"></a>Supported Events <a class="hash-link" href="#supported-events">#</a></h2>
 <p>React normalizes events so that they have consistent properties across
-different browsers.</p>
+different browsers. </p>
+
+<p>The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append <code>Capture</code> to the event name; for example, instead of using <code>onClick</code>, you would use <code>onClickCapture</code> to handle the click event in the capture phase.</p>
 <h3><a class="anchor" name="clipboard-events"></a>Clipboard Events <a class="hash-link" href="#clipboard-events">#</a></h3>
 <p>Event names:</p>
 <div class="highlight"><pre><code class="language-text" data-lang="text">onCopy onCut onPaste

docs/getting-started.html

@@ -383,8 +383,8 @@ <h2><a class="anchor" name="jsfiddle"></a>JSFiddle <a class="hash-link" href="#j
 <p>The easiest way to start hacking on React is using the following JSFiddle Hello World examples:</p>
 
 <ul>
-<li><strong><a href="http://jsfiddle.net/vjeux/kb3gN/">React JSFiddle</a></strong></li>
-<li><a href="http://jsfiddle.net/vjeux/VkebS/">React JSFiddle without JSX</a></li>
+<li><strong><a href="http://jsfiddle.net/reactjs/69z2wepo/">React JSFiddle</a></strong></li>
+<li><a href="http://jsfiddle.net/reactjs/5vjqabv3/">React JSFiddle without JSX</a></li>
 </ul>
 <h2><a class="anchor" name="starter-kit"></a>Starter Kit <a class="hash-link" href="#starter-kit">#</a></h2>
 <p>Download the starter kit to get started.</p>
@@ -452,7 +452,11 @@ <h3><a class="anchor" name="separate-file"></a>Separate File <a class="hash-link
 </code></pre></div><h2><a class="anchor" name="want-commonjs"></a>Want CommonJS? <a class="hash-link" href="#want-commonjs">#</a></h2>
 <p>If you want to use React with <a href="http://browserify.org/">browserify</a>, <a href="http://webpack.github.io/">webpack</a>, or another CommonJS-compatible module system, just use the <a href="https://www.npmjs.org/package/react"><code>react</code> npm package</a>. In addition, the <code>jsx</code> build tool can be integrated into most packaging systems (not just CommonJS) quite easily.</p>
 <h2><a class="anchor" name="next-steps"></a>Next Steps <a class="hash-link" href="#next-steps">#</a></h2>
-<p>Check out <a href="/react/docs/tutorial.html">the tutorial</a> and the other examples in the starter kit&#39;s <code>examples</code> directory to learn more. Good luck, and welcome!</p>
+<p>Check out <a href="/react/docs/tutorial.html">the tutorial</a> and the other examples in the starter kit&#39;s <code>examples</code> directory to learn more. </p>
+
+<p>We also have a wiki where the community contributes with <a href="https://github.com/facebook/react/wiki/Complementary-Tools">workflows, UI-components, routing, data management etc.</a></p>
+
+<p>Good luck, and welcome!</p>
 
 
     <div class="docs-prevnext">

docs/getting-started.zh-CN.html

@@ -383,8 +383,8 @@ <h2><a class="anchor" name="jsfiddle"></a>JSFiddle <a class="hash-link" href="#j
 <p>开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds</p>
 
 <ul>
-<li><strong><a href="http://jsfiddle.net/vjeux/kb3gN/">React JSFiddle</a></strong></li>
-<li><a href="http://jsfiddle.net/vjeux/VkebS/">React JSFiddle without JSX</a></li>
+<li><strong><a href="http://jsfiddle.net/reactjs/69z2wepo/">React JSFiddle</a></strong></li>
+<li><a href="http://jsfiddle.net/reactjs/5vjqabv3/">React JSFiddle without JSX</a></li>
 </ul>
 <h2><a class="anchor" name="-starter-kit"></a>入门教程包 (Starter Kit) <a class="hash-link" href="#-starter-kit">#</a></h2>
 <p>开始先下载入门教程包</p>

docs/interactivity-and-dynamic-uis.html

@@ -431,7 +431,7 @@ <h2><a class="anchor" name="what-shouldnt-go-in-state"></a>What <em>Shouldn’t<
 <ul>
 <li><strong>Computed data:</strong> Don&#39;t worry about precomputing values based on state — it&#39;s easier to ensure that your UI is consistent if you do all computation within <code>render()</code>. For example, if you have an array of list items in state and you want to render the count as a string, simply render <code>this.state.listItems.length + &#39; list items&#39;</code> in your <code>render()</code> method rather than storing it on state.</li>
 <li><strong>React components:</strong> Build them in <code>render()</code> based on underlying props and state.</li>
-<li><strong>Duplicated data from props:</strong> Try to use props as the source of truth where possible. Because props can change over time, it&#39;s appropriate to store props in state to be able to know its previous values.</li>
+<li><strong>Duplicated data from props:</strong> Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it&#39;s previous values, because props can change over time.</li>
 </ul>
 
 

docs/jsx-spread.html

@@ -404,22 +404,7 @@ <h2><a class="anchor" name="spread-attributes"></a>Spread Attributes <a class="h
   <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="p">{...</span><span class="nx">props</span><span class="p">}</span> <span class="nx">foo</span><span class="o">=</span><span class="p">{</span><span class="s1">&#39;override&#39;</span><span class="p">}</span> <span class="o">/&gt;</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="nx">component</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">foo</span><span class="p">);</span> <span class="c1">// &#39;override&#39;</span>
 </code></pre></div><h2><a class="anchor" name="whats-with-the-weird-...-notation"></a>What&#39;s with the weird <code>...</code> notation? <a class="hash-link" href="#whats-with-the-weird-...-notation">#</a></h2>
-<p>The <code>...</code> operator (or spread operator) is already supported for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">arrays in ES6</a>. There is also an ES7 proposal for <a href="https://github.com/sebmarkbage/ecmascript-rest-spread">Object Rest and Spread Properties</a>.</p>
-
-<p>In fact, you can already use this in our code base as an experimental syntax:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">var</span> <span class="nx">oldObj</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">&#39;hello&#39;</span><span class="p">,</span> <span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;world&#39;</span> <span class="p">};</span>
-  <span class="kd">var</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">oldObj</span><span class="p">,</span> <span class="nx">foo</span><span class="o">:</span> <span class="s1">&#39;hi&#39;</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="nx">newObj</span><span class="p">.</span><span class="nx">foo</span><span class="p">);</span> <span class="c1">// &#39;hi&#39;;</span>
-  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newObj</span><span class="p">.</span><span class="nx">bar</span><span class="p">);</span> <span class="c1">// &#39;world&#39;;</span>
-</code></pre></div>
-<p>Merging two objects can be expressed as:</p>
-<div class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kd">var</span> <span class="nx">ab</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">a</span><span class="p">,</span> <span class="p">...</span><span class="nx">b</span> <span class="p">};</span>
-</code></pre></div>
-<blockquote>
-<p>Note:</p>
-
-<p>Use the <a href="http://npmjs.org/package/react-tools">JSX command-line tool</a> with the <code>--harmony</code> flag to activate the experimental ES7 syntax.</p>
-</blockquote>
+<p>The <code>...</code> operator (or spread operator) is already supported for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">arrays in ES6</a>. There is also an ES7 proposal for <a href="https://github.com/sebmarkbage/ecmascript-rest-spread">Object Rest and Spread Properties</a>. We&#39;re taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.</p>
 
 
     <div class="docs-prevnext">

docs/thinking-in-react.html

@@ -435,7 +435,7 @@ <h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="h
 </ul></li>
 </ul>
 <h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
-<iframe width="100%" height="300" src="http://jsfiddle.net/n25pd/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/yun1vgqb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>Now that you have your component hierarchy it&#39;s time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It&#39;s easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We&#39;ll see why.</p>
 
@@ -479,7 +479,7 @@ <h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representat
 <li>The value of the checkbox</li>
 </ul>
 <h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
-<iframe width="100%" height="300" src="http://jsfiddle.net/t53sx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/zafjbw1e/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>OK, so we&#39;ve identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
 
@@ -506,7 +506,7 @@ <h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>St
 
 <p>You can start seeing how your application will behave: set <code>filterText</code> to <code>&quot;ball&quot;</code> and refresh your app. You&#39;ll see the data table is updated correctly.</p>
 <h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
-<iframe width="100%" height="300" src="http://jsfiddle.net/F8H7p/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/n47gckhr/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 <p>So far we&#39;ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it&#39;s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
 

docs/top-level-api.html

@@ -386,6 +386,15 @@ <h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="h
 <p>Create a component given a specification. A component implements a <code>render</code> method which returns <strong>one single</strong> child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don&#39;t need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
 
 <p>For more information about the specification object, see <a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>.</p>
+<h3><a class="anchor" name="react.createelement"></a>React.createElement <a class="hash-link" href="#react.createelement">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">createElement</span><span class="p">(</span>
+  <span class="nx">string</span><span class="o">/</span><span class="nx">ReactComponent</span> <span class="nx">type</span><span class="p">,</span>
+  <span class="p">[</span><span class="nx">object</span> <span class="nx">props</span><span class="p">],</span>
+  <span class="p">[</span><span class="nx">children</span> <span class="p">...]</span>
+<span class="p">)</span>
+</code></pre></div>
+<p>Create and return a new ReactElement of the given type. The type argument can be either an
+html tag name string (eg. &#39;div&#39;, &#39;span&#39;, etc), or a <code>ReactComponent</code> class that was created
+with <code>React.createClass</code>.</p>
 <h3><a class="anchor" name="react.render"></a>React.render <a class="hash-link" href="#react.render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">(</span>
   <span class="nx">ReactElement</span> <span class="nx">element</span><span class="p">,</span>
   <span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">,</span>