[docs] Fox Ryan's name: #3311

(cherry picked from commit a3642d3995)

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.12.2 (December 18, 2014)
+
+### React Core
+
+* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+* Added `strokeOpacity` to the list of unitless CSS properties
+* Removed trailing commas (allows npm module to be bundled and used in IE8)
+* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools
+
+* JSX-related transforms now always use double quotes for props and `displayName`
+
+
+## 0.12.1 (November 18, 2014)
+
+### React Tools
+
+* Types transform updated with latest support
+* jstransform version updated with improved ES6 transforms
+* Explicit Esprima dependency removed in favor of using Esprima information exported by jstransform
+
+
 ## 0.12.0 (October 28, 2014)
 
 ### React Core

CONTRIBUTING.md

@@ -67,4 +67,4 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 ## License
 
-By contributing to React, you agree that your contributions will be licensed under its BSD license..
+By contributing to React, you agree that your contributions will be licensed under its BSD license.

README.md

@@ -35,12 +35,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
 
 ```html
 <!-- The core React library -->
-<script src="http://fb.me/react-0.12.0.js"></script>
+<script src="http://fb.me/react-0.12.2.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
+<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.12.0.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.12.2.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
 
 If you'd like to use [bower](http://bower.io), it's as easy as:
 

docs/Gemfile.lock

@@ -61,7 +61,7 @@ GEM
     rb-inotify (0.9.5)
       ffi (>= 0.5.0)
     redcarpet (3.1.2)
-    safe_yaml (1.0.3)
+    safe_yaml (1.0.4)
     sanitize (2.0.6)
       nokogiri (>= 1.4.4)
     sass (3.3.14)

docs/_config.yml

@@ -34,4 +34,4 @@ sass:
   sass_dir: _css
 gems:
 - jekyll-redirect-from
-react_version: 0.11.2
+react_version: 0.12.2

docs/_data/nav_docs.yml

@@ -63,6 +63,8 @@
       title: PureRenderMixin
     - id: perf
       title: Performance Tools
+  - id: advanced-performance
+    title: Advanced Performance
 - title: Reference
   items:
   - id: top-level-api

docs/_data/nav_tips.yml

@@ -34,3 +34,5 @@
     title: References to Components
   - id: children-undefined
     title: this.props.children undefined
+  - id: use-react-with-other-libraries
+    title: Use React with Other Libraries

docs/_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\[/, '');
+})();
+

docs/_js/jsx-compiler.js

@@ -37,7 +37,7 @@ var CompilerPlayground = React.createClass({
         </label>
       </div>
     );
-  },
+  }
 });
 React.render(
   <CompilerPlayground />,

docs/_layouts/default.html

@@ -79,7 +79,7 @@
         <a href="/react/acknowledgements.html">Acknowledgements</a>
       </div>
       <div class="right">
-        &copy; 2013&ndash;2014 Facebook Inc.<br>
+        &copy; 2013&ndash;{{ site.time | date: '%Y' }} Facebook Inc.<br>
         Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
       </div>
     </footer>

docs/_posts/2014-09-24-testing-flux-applications.md

@@ -3,6 +3,8 @@ title: "Testing Flux Applications"
 author: Bill Fisher
 ---
 
+**A more up-to-date version of this post is available as part of the [Flux documentation](http://facebook.github.io/flux/docs/testing-flux-applications.html).**
+
 [Flux](http://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](http://facebook.github.io/react/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](http://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](http://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
 
 

docs/_posts/2014-10-17-community-roundup-23.md

@@ -61,7 +61,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
 >
 > - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.
 >
-> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just to hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
+> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
 >
 > - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.
 >

docs/_posts/2014-11-24-react-js-conf-updates.md

@@ -0,0 +1,39 @@
+---
+title: React.js Conf Updates
+author: Vjeux
+---
+
+Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were
+surprised to have received a total of **one hundred talk proposals** and were
+amazed that 600 people requested to be notified when ticket go on sale. This is incredible!
+
+When we organized the conference, we decided to start small since this is the
+first React.js conference. Also, we weren't sure what level of demand to expect,
+so we planned for a single-track, two-day conference on Facebook's campus. The
+largest room available would accomodate 18 speaking slots and 200 attendees.
+The spacial configuration makes it difficult to add a second track and changing
+venues only two months in advance would be too difficult, so we are deciding to
+stick with the originally planned format and venue on Facebook's campus.
+
+Unfortunately, this means that we can only accept a small number of the awesome
+conference talk proposals. In order to make sure attendees get a fair shot at
+registering, we're going to to sell tickets in three separate first-come,
+first-serve phases. **Tickets will cost $200 regardless of which phase they are
+purchased from and all proceeds will go to charity**.
+
+- Friday November 28th 2014 — Noon PST: First wave of tickets
+- Friday December 5th 2014 — Noon PST: Second wave of tickets
+- Friday December 12th 2014 — Noon PST: Third and last wave of tickets
+
+We really do wish that everyone could attend React.js Conf, but in order to
+ensure a quality experience for those who attend, we feel it will be best to
+limit the size of the conference to what was originally planned for. This means
+that not everyone who wants to attend will be able to, and many talks that
+would be excellent contributions to the conference will have to be postponed
+until the next conference. All the talks will be recorded and put online shortly after.
+
+We hope to see many of you at React.js Conf this January.
+
+Sincerely,
+
+React Core Team

docs/_posts/2014-11-25-community-roundup-24.md

@@ -0,0 +1,99 @@
+---
+title: "Community Round-up #24"
+layout: post
+author: Steven Luscher
+---
+
+## Keep it Simple
+
+Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.
+
+<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic of complexity in this blog post about [coping with scaling up](http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/), where he describes how his team used React to make possible the “nearly impossible.”
+
+I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
+
+James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
+
+## All About Isomorphism
+
+Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side.
+
+<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
+
+Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (literally) using an application that's server-client [isomorphic and indexable](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/). Demo and sample code included – cold ones sold separately.
+
+And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React.
+
+## React Router Mows the Lawn
+
+Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements).
+
+## React in Practice
+
+Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
+
+<iframe width="420" height="315" src="//www.youtube.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
+
+If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
+
+We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself.
+
+## Be Kind, Rewind
+
+Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
+
+<iframe width="420" height="315" src="//www.youtube.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
+
+## Community Components
+
+Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](http://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](http://tomchentw.github.io/react-prism/) component, for good measure.
+
+Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
+
+To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform).
+
+## Waiter, There's a CSS In My JavaScript
+
+The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) 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 [react-style](https://github.com/js-next/react-style).
+
+## Test Isolation
+
+Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil).
+
+## You've Got The Hang of Flux, Now Let's Flow
+
+Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications!
+
+## Countdown to React.js Conf 2014
+
+We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.
+
+## React Meetups Around the World
+
+<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>&mdash; ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>&mdash; rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I&#39;ll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I&#39;m presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>&mdash; Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
+  </div>
+</div>
+
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

docs/_posts/2014-12-18-react-v0.12.2.md

@@ -0,0 +1,37 @@
+---
+title: React v0.12.2
+author: Paul O’Shannessy
+---
+
+We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.
+
+You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of [Flow](http://flowtype.org/), with only transform-related changes. Namely we added a flag to the `jsx` executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.
+
+The release is available for download from the CDN:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.12.2.js>  
+  Minified build for production: <http://fb.me/react-0.12.2.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.12.2.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.12.2.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.12.2.js>
+
+We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Changelog
+
+### React Core
+
+* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+* Added `strokeOpacity` to the list of unitless CSS properties
+* Removed trailing commas (allows npm module to be bundled and used in IE8)
+* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools
+
+* JSX-related transforms now always use double quotes for props and `displayName`
+

docs/_posts/2014-12-19-react-js-conf-diversity-scholarship.md

@@ -0,0 +1,37 @@
+---
+title: React.js Conf Diversity Scholarship
+author: Paul O’Shannessy
+---
+
+Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.
+
+I'm really excited about this and I hope you are too! The full announcement is below:
+
+- - -
+
+The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
+
+Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html) [updates](http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
+
+At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
+Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
+
+To apply for the scholarship, please visit the Application Page: <https://www.surveymonkey.com/s/XVJGK6R>
+
+## Award Includes
+
+* Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
+* Paid travel and lodging expenses
+* Additional $200 meal stipend
+
+## Important Dates
+
+* Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
+* Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
+* Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
+
+## Eligibility
+
+* Must currently be studying or working in Computer Science or a related field
+* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
+* You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park

docs/_posts/2015-01-27-react-v0.13.0-beta-1.md

@@ -0,0 +1,162 @@
+---
+title: React v0.13.0 Beta 1
+author: Sebastian Markbåge
+---
+
+React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.
+
+Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then.
+
+We just published a beta version of React v0.13.0 to [npm](https://www.npmjs.com/package/react)! You can install it with `npm install react@0.13.0-beta.1`. Since this is a pre-release, we don't have proper release notes ready.
+
+So what is that one feature I'm so excited about that I just couldn't wait to share?
+
+
+## Plain JavaScript Classes!!
+
+JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.
+
+We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.
+
+In React 0.13.0 you no longer need to use `React.createClass` to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with `react-tools` by making use of the harmony option: `jsx --harmony`.
+
+
+### ES6 Classes
+
+```javascript
+class HelloMessage extends React.Component {
+  render() {
+    return <div>Hello {this.props.name}</div>;
+  }
+}
+
+React.render(<HelloMessage name="Sebastian" />, mountNode);
+```
+
+The API is mostly what you would expect, with the exception for `getInitialState`. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise `getDefaultProps` and `propTypes` are really just properties on the constructor.
+
+```javascript
+export class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: props.initialCount};
+  }
+  tick() {
+    this.setState({count: this.state.count + 1});
+  }
+  render() {
+    return (
+      <div onClick={this.tick.bind(this)}>
+        Clicks: {this.state.count}
+      </div>
+    );
+  }
+}
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+### ES7+ Property Initializers
+
+Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:
+
+```javascript
+// Future Version
+export class Counter extends React.Component {
+  static propTypes = { initialCount: React.PropTypes.number };
+  static defaultProps = { initialCount: 0 };
+  state = { count: this.props.initialCount };
+  tick() {
+    this.setState({ count: this.state.count + 1 });
+  }
+  render() {
+    return (
+      <div onClick={this.tick.bind(this)}>
+        Clicks: {this.state.count}
+      </div>
+    );
+  }
+}
+```
+
+This was inspired by TypeScript's property initializers.
+
+### Autobinding
+
+`React.createClass` has a built-in magic feature that bound all methods to `this` automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.
+
+Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.
+
+```javascript
+class Counter extends React.Component {
+  constructor() {
+    super();
+    this.tick = this.tick.bind(this);
+  }
+  tick() {
+    ...
+  }
+  ...
+}
+```
+
+However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:
+
+```javascript
+class Counter extends React.Component {
+  tick = () => {
+    ...
+  }
+  ...
+}
+```
+
+### Mixins
+
+Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
+
+There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.
+
+Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.
+
+Luckily, if you want to keep using mixins, you can just keep using `React.createClass`.
+
+> **Note:**
+>
+> The classic `React.createClass` style of creating classes will continue to work just fine.
+
+## Other Languages!
+
+Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.
+
+You can also use CoffeeScript classes:
+
+```coffeescript
+div = React.createFactory 'div'
+
+class Counter extends React.Component
+  @propTypes =
+    initialCount: React.PropTypes.number
+  @defaultProps =
+    initialCount: 0
+  constructor: ->
+    @state =
+      count: @props.initialCount
+  tick: =>
+    @setState count: @state.count + 1
+  render: ->
+    div(onClick: @tick, 'Clicks: ', @state.count)
+```
+
+You can even use the old ES3 module pattern if you want:
+
+```javascript
+function MyComponent(initialProps) {
+  return {
+    state: { value: initialProps.initialValue },
+    render: function() {
+      return <span className={this.state.value} />
+    }
+  };
+}
+```

docs/_posts/2015-02-18-react-conf-roundup-2015.md

@@ -0,0 +1,269 @@
+---
+title: React.js Conf Round-up 2015
+layout: post
+author: Steven Luscher
+---
+
+It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
+
+## The talks
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
+    <p>
+      <strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
+    <p>
+      <strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
+    <p>
+      <strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
+    <p>
+      <strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
+    <p>
+      <strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
+    <p>
+      <strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
+    <p>
+      <strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
+    <p>
+      <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
+    <p>
+      <strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
+    <p>
+      <strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
+    <p>
+      <strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
+    <p>
+      <strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
+    <p>
+      <strong>Lee Byron</strong> led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps Javascript in general.
+    </p>
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
+    <p>
+      <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
+    <p>
+      <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
+    <p>
+      <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
+    <p>
+      <strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
+    <p>
+      <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
+    <p>
+      <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&amp;A <a class="hash-link" href="#talk-qa">#</a></h3>
+    <p>
+      <strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&amp;A session.
+  </div>
+  <div class="skinny-col">
+    <iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
+  </div>
+</div>
+
+## Reactions
+
+The conference is over, but the conversation has just begun.
+
+**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/03/i-didn't-attend-react.js-conf/).
+
+And, in case you missed a session, you can borrow **Michael Chan’s** [drawings](http://chantastic.io/2015-reactjs-conf/), **Mihai Parparita’s** [summary](https://quip.com/uJQeABv7nkFN), or **Shaohua Zhou’s** [day 1](http://getshao.com/2015/01/29/react-js-conf-notes-day1/) / [day 2](http://getshao.com/2015/01/29/react-js-conf-notes-day-2/) notes.
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>&#39;s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk &quot;Data fetching for React applications at Facebook&quot; <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>&mdash; Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>&mdash; xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React&#39;s model for the UI layer is vastly better than UIKit&#39;s. React Native is a *huge* deal.</p>&mdash; Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
+    <blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>&mdash; Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
+  </div>
+</div>
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
+
+<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>

docs/_posts/2015-02-20-introducing-relay-and-graphql.md

@@ -0,0 +1,63 @@
+---
+title: "Introducing Relay and GraphQL"
+layout: post
+author: Greg Hurrell
+---
+
+## Data fetching for React applications
+
+There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
+
+The two projects &mdash; Relay and GraphQL &mdash; have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.
+
+<script async class="speakerdeck-embed" data-id="7af7c2f33bf9451a892dcd91de55b7c2" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
+
+## What is Relay?
+
+Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
+
+Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on `this.props`.
+
+Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.
+
+## What is GraphQL?
+
+GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.
+
+On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.
+
+## The value proposition
+
+Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.
+
+By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.
+
+Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime).
+
+Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.
+
+Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.
+
+By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:
+
+- **Performance:** All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently "in flight", so queries can be automatically de-duplicated and the minimal queries can be produced.
+- **Subscriptions:** All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions.
+- **Common patterns:** We can make common patterns easy. Pagination is the example that [Jing](https://twitter.com/jingc) gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available.
+- **Simplified server implementation:** Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
+- **Uniform mutations:** There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
+
+## How does it relate to Flux?
+
+In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.
+
+At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.
+
+## Open source plans
+
+We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).
+
+In the meantime, we'll be providing more and more information in the form of blog posts (and in [other channels](https://gist.github.com/wincent/598fa75e22bdfa44cf47)). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.
+
+Watch this space!

docs/_posts/2015-02-24-react-v0.13-rc1.md

@@ -0,0 +1,78 @@
+---
+title: "React v0.13 RC"
+author: Paul O'Shannessy
+date: 2015-02-24 14:00
+---
+
+Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!
+
+We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/react/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/react/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.
+
+
+The release candidate is available for download:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.13.0-rc1.js>  
+  Minified build for production: <http://fb.me/react-0.13.0-rc1.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc1.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc1.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.13.0-rc1.js>
+
+We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+- - -
+
+## Changelog
+
+### React Core
+
+#### Breaking Changes
+
+* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
+* Static methods (defined in `statics`) are no longer autobound to the component class
+* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
+* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
+* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
+* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
+
+#### New Features
+
+* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
+* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
+* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`)
+* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` -- this means that you no longer need to use this._pendingState, which is now gone.
+* Support for iterators and immutable-js sequences as children
+
+#### Deprecations
+
+* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`)
+* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (for example, `getDOMNode`, `setProps`, `replaceState`).
+
+
+### React with Add-Ons
+
+#### Deprecations
+
+* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
+
+
+### React Tools
+
+#### Breaking Changes
+
+* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
+
+#### New Features
+
+* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
+  * `es5` is the default.
+  * `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
+* The transform for the call spread operator has also been enabled.
+
+
+### JSX
+
+#### Breaking Changes
+* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.

docs/_posts/2015-02-24-streamlining-react-elements.md

@@ -0,0 +1,230 @@
+---
+title: "Streamlining React Elements"
+author: Sebastian Markbåge
+date: 2015-02-24 11:00
+---
+
+React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.
+
+If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!
+
+## Immutable Props
+
+In React 0.12, the props object was mutable. It allows you to do patterns like this:
+
+```js
+var element = <Foo bar={false} />;
+if (shouldUseFoo) {
+  element.props.foo = 10;
+  element.props.bar = true;
+}
+```
+
+The problem is that we don’t have a convenient way to tell when you’re done mutating.
+
+### Problem: Mutating Props You Don’t Own
+
+If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:
+
+```js
+var element = this.props.child;
+element.props.count = this.state.count;
+return element;
+```
+
+You take a ReactElement through `props.child` and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in `props.child`. It will be the same one. You're mutating the same props.
+
+You could imagine that this would work. However, this disables the ability for any component to use `shouldComponentUpdate`. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time.
+
+Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.
+
+It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.
+
+### Problem: Too Late Validation
+
+In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.
+
+The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.
+
+### Solution: Immutable Props
+
+Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate `element.props` after this point.
+
+You can generally refactor these pattern to simply use two different JSX calls:
+
+```js
+if (shouldUseFoo) {
+  return <Foo foo={10} bar={true} />;
+} else {
+  return <Foo bar={false} />;
+}
+```
+
+However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:
+
+```js
+var props = { bar: false };
+if (shouldUseFoo) {
+  props.foo = 10;
+  props.bar = true;
+}
+return <Foo {...props} />;
+```
+
+It is still OK to do deep mutations of objects. E.g:
+
+```js
+return <Foo nestedObject={this.state.myModel} />;
+```
+
+In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.
+
+### Solution: Early PropType Warnings
+
+We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.
+
+Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.
+
+```js
+var element1 = <Foo />; // extra prop is optional
+var element2 = React.addons.cloneWithProps(element1, { extra: 'prop' });
+```
+
+## Owner
+
+In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.
+
+```js
+class Foo {
+  render() {
+    return <div><span /></div>;
+  }
+}
+```
+
+In this example, the owner of the `span` is `Foo` but the parent is the `div`.
+
+There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.
+
+### Problem: The Semantics are Opaque and Confusing
+
+The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:
+
+```js
+var foo = <input className="foo" />;
+class Component {
+  render() {
+    return bar ? <input className="bar" /> : foo;
+  }
+}
+```
+
+These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use `React.addons.cloneWithProps`, the owner changes.
+
+### Problem: Timing Matters
+
+The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:
+
+```js
+class A {
+  render() {
+    return <B renderer={text => <span>{text}</span>} />;
+  }
+}
+class B {
+  render() {
+    return this.props.renderer('foo');
+  }
+}
+```
+
+The owner of the `span` is actually `B`, not `A` because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.
+
+### Problem: It Couples JSX to React
+
+Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have `React.createElement` in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.
+
+### Solution: Make Context Parent-Based Instead of Owner-Based
+
+The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.
+
+### Solution: Remove the Semantic Implications of Owner
+
+It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.
+
+### Pending: Change the refs Semantics
+
+Refs are still based on "owner". We haven’t fully solved this special case just yet.
+
+In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.
+
+## Keyed Objects as Maps
+
+In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.
+
+```js
+<div>{ {a: <span />, b: <span />} }</div>
+```
+
+### Problem: Relies on Enumeration Order
+
+The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.
+
+### Problem: Using Objects as Maps is Bad
+
+It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.
+
+More importantly, this can have important security implications. For example this has a potential security problem:
+
+```js
+var children = {};
+items.forEach(item => children[item.title] = <span />);
+return <div>{children}</div>;
+```
+
+Imagine if `item.title === '__proto__'` for example.
+
+### Problem: Can’t be Differentiated from Arbitrary Objects
+
+Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.
+
+To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
+
+### Solution: Just use an Array and key={…}
+
+Most of the time you can just use an array with keyed ReactElements.
+
+```js
+var children = items.map(item => <span key={item.title} />);
+<div>{children}</div>
+```
+
+### Solution: React.addons.createFragment
+
+However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to `React.addons` called `createFragment()`. This accepts a keyed object and returns an opaque type.
+
+```js
+<div>{React.addons.createFragment({ a: <div />, b: this.props.children })}</div>
+```
+
+The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.
+
+Note: This will still not be valid as the direct return value of `render()`. Unfortunately, they still need to be wrapped in a `<div />` or some other element.
+
+## Compiler Optimizations: Unlocked!
+
+These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and `React.createElement/Factory`*!
+
+See these GitHub Issues for a deep dive into compiler optimizations:
+
+- [Reuse Constant Value Types](https://github.com/facebook/react/issues/3226)
+- [Tagging ReactElements](https://github.com/facebook/react/issues/3227)
+- [Inline ReactElements](https://github.com/facebook/react/issues/3228)
+
+\* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.
+
+## Rationale
+
+I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.
+
+As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.

docs/_posts/2015-03-03-react-v0.13-rc2.md

@@ -0,0 +1,58 @@
+---
+title: "React v0.13 RC2"
+author: Sebastian Markbåge
+---
+
+Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes:
+
+* Introduced a new API (`React.cloneElement`, see below for details).
+* Fixed a bug related to validating `propTypes` when using the new `React.addons.createFragment` API.
+* Improved a couple warning messages.
+* Upgraded jstransform and esprima.
+
+The release candidate is available for download:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.13.0-rc2.js>  
+  Minified build for production: <http://fb.me/react-0.13.0-rc2.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc2.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc2.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.13.0-rc2.js>
+
+We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+- - -
+
+## React.cloneElement
+
+In React v0.13 RC2 we will introduce a new API, similar to `React.addons.cloneWithProps`, with this signature:
+
+```js
+React.cloneElement(element, props, ...children);
+```
+
+Unlike `cloneWithProps`, this new function does not have any magic built-in behavior for merging `style` and `className` for the same reason we don't have that feature from `transferPropsTo`. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when `style` has a different signature (e.g. in the upcoming React Native).
+
+`React.cloneElement` is *almost* equivalent to:
+
+```js
+<element.type {...element.props} {...props}>{children}</element.type>
+```
+
+However, unlike JSX and `cloneWithProps`, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
+
+One common pattern is to map over your children and add a new prop. There were many issues reported about `cloneWithProps` losing the ref, making it harder to reason about your code. Now following the same pattern with `cloneElement` will work as expected. For example:
+
+```js
+var newChildren = React.Children.map(this.props.children, function(child) {
+  return React.cloneElement(child, { foo: true })
+});
+```
+
+> Note: `React.cloneElement(child, { ref: 'newRef' })` *DOES* override the `ref` so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.
+
+This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the `ref`. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.
+
+We plan to eventually deprecate `React.addons.cloneWithProps`. We're not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using `React.cloneElement` instead. We'll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.

docs/_posts/2015-03-04-community-roundup-25.md

@@ -0,0 +1,63 @@
+---
+title: "Community Round-up #25"
+layout: post
+author: Matthew Johnston
+---
+
+## React 101
+
+Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started.
+
+[Ryan Clark](https://github.com/rynclark) provides a [great overview of the basics of React](http://ryanclark.me/getting-started-with-react/) with the goal of building a really simple dropdown nav.
+
+[Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
+
+<iframe width="650" height="300" src="//www.youtube.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
+
+[AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
+
+Black Mutt Media [takes us through their usage of React](http://blackmuttmedia.com/blog/react-tmdb-api/) and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.
+
+Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Platform Podcast](http://thewebplatform.libsyn.com/31-building-with-reactjs) to have a chat about all aspects of React.
+
+<iframe style="border: none" src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height="26" width="650" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>
+
+## Community Additions
+
+[Formidable Labs](https://github.com/FormidableLabs) have been busy, as they've also[ just launched Radium](http://projects.formidablelabs.com/radium/), a React component that provides you with the ability to use inline styles instead of CSS. They're also [looking for some help](http://projects.formidablelabs.com/radium-bootstrap/) contributing to a Radium Bootstrap implementation.
+
+[Reactiflux.com](http://reactiflux.com/) is a new Slack community based around (you guessed it!) React, and Flux.
+
+[React Week](http://reactweek.com/) is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by [Ryan Florence](https://github.com/ryanflorence).
+
+[Babel-sublime](https://github.com/babel/babel-sublime) is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.
+
+[react-meteor](https://github.com/reactjs/react-meteor), a package that replaces the default templating system of the Meteor platform with React, recently received a big update.
+
+## Rebuilding with React
+
+[Rich Manalang](https://github.com/rmanalan) from Atlassian [explains why](https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/) they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients.
+
+[Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
+
+A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](http://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
+
+[Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.
+
+<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/react/img/blog/polarr.jpg"></a></center>
+
+## It's F8!
+
+F8 2015 is just around the corner, and you can [sign up for the video streams](https://www.fbf8.com/stream.html) in advance because we're sure to be covering all things React.
+
+## Meetups
+
+<table><tr><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
+</td><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>&mdash; James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
+</td></tr><tr><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>&mdash; Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
+</td><td width="50%" valign="top">
+<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>&mdash; ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
+</td></tr></table>

docs/css/react.scss

@@ -7,7 +7,7 @@
 
 @mixin code-typography {
   font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
-  font-size: 0.8em;
+  font-size: 13px;
   line-height: 1.5;
 }
 
@@ -288,6 +288,19 @@ h1, h2, h3, h4, h5, h6 {
   width: 400px;
 }
 
+.skinny-row {
+  @include clearfix;
+}
+
+.skinny-col {
+  float: left;
+  margin-left: $columnGutter;
+  width: ($skinnyContentWidth - $columnGutter) / 2;
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
 .marketing-row {
   @include clearfix;
   margin: 50px 0;
@@ -671,6 +684,10 @@ p code {
   height: 100px
 }
 
+.MarkdownEditor .content {
+  white-space: pre-wrap;
+}
+
 .hll {
   background-color: #f7ebc6;
   border-left: 5px solid #f7d87c;

docs/docs/01-why-react.zh-CN.md

@@ -13,9 +13,9 @@ React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript
 
 仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
 
-### 表达能力 (Declarative)
+### 声明式 (Declarative)
 
-当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。
+数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
 
 ## 构建可组合的组件
 

docs/docs/02-displaying-data.md

@@ -66,7 +66,7 @@ The inputs to this component are called `props` — short for "properties". They
 
 ## Components are Just Like Functions
 
-React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
+React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
 
 > Note:
 >
@@ -100,11 +100,12 @@ The easiest way to get started with JSX is to use the in-browser `JSXTransformer
 
 ## React without JSX
 
-JSX is completely optional. You don't have to use JSX with React. You can create these trees through `React.createElement`. The first argument is the tag, pass a properties object as the second argument and children to the third argument.
+JSX is completely optional; you don't have to use JSX with React. You can create React elements in plain JavaScript using `React.createElement`, which takes a tag name or component, a properties object, and variable number of optional child arguments.
 
 ```javascript
-var child = React.createElement('li', null, 'Text Content');
-var root = React.createElement('ul', { className: 'my-list' }, child);
+var child1 = React.createElement('li', null, 'First Text Content');
+var child2 = React.createElement('li', null, 'Second Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
 React.render(root, document.body);
 ```
 

docs/docs/02-displaying-data.zh-CN.md

@@ -4,10 +4,11 @@ title: 显示数据
 layout: docs
 permalink: displaying-data-zh-CN.html
 prev: why-react-zh-CN.html
-next: jsx-in-depth.html
+next: jsx-in-depth-zh-CN.html
 ---
 
-通过用户界面，最基础可以做的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。
+用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单，当数据变化的时候，用户界面会自动同步更新。
+
 
 ## 开始
 
@@ -54,6 +55,7 @@ setInterval(function() {
 }, 500);
 ```
 
+
 ## 被动更新 (Reactive Updates)
 
 在浏览器中打开 `hello-react.html` ，在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间， 任何你在输入框输入的内容一直保留着，即使你没有写任何代码来完成这个功能。React 为你解决了这个问题，做了正确的事。
@@ -62,6 +64,7 @@ setInterval(function() {
 
 对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法，它们通过参数传递。你必须知道在组件里，这些属性是不可改变的，也就是说 **`this.props` 是只读的**。
 
+
 ## 组件就像是函数
 
 React 组件非常简单。你可以认为它们就是简单的函数，接受 `props` 和 `state` (后面会讨论) 作为参数，然后渲染出 HTML。正是应为它们是这么的简单，这使得它们非常容易理解。
@@ -70,16 +73,53 @@ React 组件非常简单。你可以认为它们就是简单的函数，接受 `
 >
 > **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点，它们*必须*被包含在同一个节点里。
 
+
 ## JSX 语法
 
 我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。
 
 我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板，这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单，我们做了一个非常简单、**可选**类似 HTML 语法 ，通过函数调用即可生成模板的编译器，称为 JSX。
 
-**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： `React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通过 JSX 这就变成了 `<a href="http://facebook.github.io/react/">Hello React!</a>`。我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
+**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接，通过纯 JavaScript 你可以这么写： 
 
-JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。
+`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。
 
-JSX 类似于 HTML，但不是完全一样。参考[JSX gotchas](/react/docs/jsx-gotchas.html) 学习关键区别。
+通过 JSX 这就变成了
+
+`<a href="http://facebook.github.io/react/">Hello React!</a>`。
+
+我们发现这会使搭建 React 应用更加简单，设计师也偏向用这用语法，但是每个人可以有它们自己的工作流，所以**JSX 不是必须用的。**
+
+JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，请看 [深入理解 JSX](/react/docs/jsx-in-depth-zh-CN.html)。或者直接使用[在线 JSX 编译器](/react/jsx-compiler.html)观察变化过程。
+
+JSX 类似于 HTML，但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
 
 最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](http://npmjs.org/package/react-tools) 包来预编译你的代码。
+
+
+## 没有 JSX 的 React
+
+你完全可以选择是否使用 JSX，并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签，第二个参数是一个属性对象，每三个是子节点。
+
+```javascript
+var child = React.createElement('li', null, 'Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child);
+React.render(root, document.body);
+```
+
+方便起见，你可以创建基于自定义组件的速记工厂方法。
+
+```javascript
+var Factory = React.createFactory(ComponentClass);
+...
+var root = Factory({ custom: 'prop' });
+React.render(root, document.body);
+```
+
+React 已经为 HTML 标签提供内置工厂方法。
+
+```javascript
+var root = React.DOM.ul({ className: 'my-list' },
+  React.DOM.li(null, 'Text Content')
+);
+```

docs/docs/02.1-jsx-in-depth.md

@@ -29,7 +29,7 @@ var myDivElement = <div className="foo" />;
 React.render(myDivElement, document.body);
 ```
 
-To render a React Component, just a local variable that starts with an upper-case letter:
+To render a React Component, just create a local variable that starts with an upper-case letter:
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});
@@ -47,7 +47,7 @@ React's JSX uses the upper vs. lower case convention to distinguish between loca
 
 ## The Transform
 
-React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments to `React.createElement`.
+React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments that are passed to `React.createElement`.
 
 ```javascript
 var Nav;
@@ -87,6 +87,69 @@ If you want to use JSX, the [Getting Started](/react/docs/getting-started.html)
 > ReactElement as an object literal to bypass the validation code in
 > `React.createElement`.
 
+## Namespaced Components
+
+If you are building a component that has many children, like a form, you might end up with something with a lot of variable declarations:
+
+```javascript
+// Awkward block of variable declarations
+var Form = MyFormComponent;
+var FormRow = Form.Row;
+var FormLabel = Form.Label;
+var FormInput = Form.Input;
+
+var App = (
+  <Form>
+    <FormRow>
+      <FormLabel />
+      <FormInput />
+    </FormRow>
+  </Form>
+);
+```
+
+To make it simpler and easier, *namespaced components* let you use one component that has other components as attributes:
+
+```javascript
+var Form = MyFormComponent;
+
+var App = (
+  <Form>
+    <Form.Row>
+      <Form.Label />
+      <Form.Input />
+    </Form.Row>
+  </Form>
+);
+```
+
+To do this, you just need to create your *"sub-components"* as attributes of the main component:
+
+```javascript
+var MyFormComponent = React.createClass({ ... });
+
+MyFormComponent.Row = React.createClass({ ... });
+MyFormComponent.Label = React.createClass({ ... });
+MyFormComponent.Input = React.createClass({ ... });
+```
+
+JSX will handle this properly when compiling your code.
+
+```javascript
+var App = (
+  React.createElement(Form, null, 
+    React.createElement(Form.Row, null, 
+      React.createElement(Form.Label, null), 
+      React.createElement(Form.Input, null)
+    )
+  )
+);
+```
+
+> Note:
+>
+> This feature is available in [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
+
 ## JavaScript Expressions
 
 ### Attribute Expressions

docs/docs/02.1-jsx-in-depth.zh-CN.md

@@ -0,0 +1,140 @@
+---
+id: jsx-in-depth-zh-CN
+title: 深入 JSX
+permalink: jsx-in-depth-zh-CN.html
+prev: displaying-data-zh-CN.html
+next: jsx-spread-zh-CN.html
+---
+
+[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
+
+
+## 为什么要用 JSX？
+
+你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
+
+它对于非专职开发者比如设计师也比较熟悉。
+
+XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
+
+它没有修改 JavaScript 语义。
+
+
+## HTML 标签对比 React 组件
+
+React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
+
+要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
+
+```javascript
+var myDivElement = <div className="foo" />;
+React.render(myDivElement, document.body);
+```
+
+要渲染 React 组件，只需创建一个大写字母开头的本地变量。
+
+```javascript
+var MyComponent = React.createClass({/*...*/});
+var myElement = <MyComponent someProperty={true} />;
+React.render(myElement, document.body);
+```
+
+React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
+
+> 注意:
+>
+> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML
+> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
+
+
+## 转换（Transform）
+
+JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
+
+```javascript
+var Nav;
+// 输入 (JSX):
+var app = <Nav color="blue" />;
+// 输出 (JS):
+var app = React.createElement(Nav, {color:"blue"});
+```
+
+注意，要想使用 `<Nav />`，`Nav` 变量一定要在作用区间内。
+
+JSX 也支持使用 XML 语法定义子结点：
+
+```javascript
+var Nav, Profile;
+// 输入 (JSX):
+var app = <Nav color="blue"><Profile>click</Profile></Nav>;
+// 输出 (JS):
+var app = React.createElement(
+  Nav,
+  {color:"blue"},
+  React.createElement(Profile, null, "click")
+);
+```
+
+使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
+
+如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
+
+> 注意:
+>
+> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
+> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
+> `React.createElement` 里的校验代码。
+
+
+## JavaScript 表达式
+
+### 属性表达式
+
+要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`""`)。
+
+```javascript
+// 输入 (JSX):
+var person = <Person name={window.isLoggedIn ? window.name : ''} />;
+// 输出 (JS):
+var person = React.createElement(
+  Person,
+  {name: window.isLoggedIn ? window.name : ''}
+);
+```
+
+### 子节点表达式
+
+同样地，JavaScript 表达式可用于描述子结点：
+
+```javascript
+// 输入 (JSX):
+var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
+// 输出 (JS):
+var content = React.createElement(
+  Container,
+  null,
+  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
+```
+
+### 注释
+
+JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。
+
+```javascript
+var content = (
+  <Nav>
+    {/* 一般注释, 用 {} 包围 */}
+    <Person
+      /* 多
+         行
+         注释 */
+      name={window.isLoggedIn ? window.name : ''} // 行尾注释
+    />
+  </Nav>
+);
+```
+
+> 注意:
+> 
+> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。

docs/docs/02.2-jsx-spread.md

@@ -6,7 +6,7 @@ prev: jsx-in-depth.html
 next: jsx-gotchas.html
 ---
 
-If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:
+If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX:
 
 ```javascript
   var component = <Component foo={x} bar={y} />;
@@ -49,23 +49,4 @@ You can use this multiple times or combine it with other attributes. The specifi
 
 ## What's with the weird `...` notation?
 
-The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread).
-
-In fact, you can already use this in our code base as an experimental syntax:
-
-```javascript
-  var oldObj = { foo: 'hello', bar: 'world' };
-  var newObj = { ...oldObj, foo: 'hi' };
-  console.log(newObj.foo); // 'hi';
-  console.log(newObj.bar); // 'world';
-```
-
-Merging two objects can be expressed as:
-
-```javascript
-  var ab = { ...a, ...b };
-```
-
-> Note:
->
-> Use the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
+The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread). We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.

docs/docs/02.2-jsx-spread.zh-CN.md

@@ -0,0 +1,55 @@
+---
+id: jsx-spread-zh-CN
+title: JSX 展开属性
+permalink: jsx-spread-zh-CN.html
+prev: jsx-in-depth-zh-CN.html
+next: jsx-gotchas-zh-CN.html
+---
+
+如果你事先知道组件需要的全部 Props（属性），JSX 很容易地这样写：
+
+```javascript
+  var component = <Component foo={x} bar={y} />;
+```
+
+
+## 修改 Props 是不好的，明白吗
+
+如果你不知道要设置哪些 Props，那么现在最好不要设置它：
+
+```javascript
+  var component = <Component />;
+  component.props.foo = x; // 不好
+  component.props.bar = y; // 同样不好
+```
+
+这样是反模式，因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
+
+Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。
+
+
+## 展开属性（Spread Attributes）
+
+现在你可以使用 JSX 的新特性 - 展开属性：
+
+```javascript
+  var props = {};
+  props.foo = x;
+  props.bar = y;
+  var component = <Component {...props} />;
+```
+
+传入对象的属性会被复制到组件内。
+
+它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
+
+```javascript
+  var props = { foo: 'default' };
+  var component = <Component {...props} foo={'override'} />;
+  console.log(component.props.foo); // 'override'
+```
+
+
+## 这个奇怪的 `...` 标记是什么？
+
+这个 `...` 操作符（增强的操作符）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。

docs/docs/02.3-jsx-gotchas.zh-CN.md

@@ -0,0 +1,67 @@
+---
+id: jsx-gotchas-zh-CN
+title: JSX 陷阱
+permalink: jsx-gotchas-zh-CN.html
+prev: jsx-spread-zh-CN.html
+next: interactivity-and-dynamic-uis-zh-CN.html
+---
+
+JSX 与 HTML 非常相似，但是有些关键区别要注意。
+
+> 注意:
+>
+> 关于 DOM 的区别，如行内样式属性 `style`，参考 [DOM 区别](/react/docs/dom-differences.html)
+
+## HTML 实体
+
+HTML 实体可以插入到 JSX 的文本中。
+
+```javascript
+<div>First &middot; Second</div>
+```
+
+如果想在 JSX 表达式中显示 HTML 实体，可以会遇到二次转义的问题，因为 React 默认会转义所有字符串，为了防止各种 XSS 攻击。
+
+```javascript
+// 错误: 会显示 “First &middot; Second”
+<div>{'First &middot; Second'}</div>
+```
+
+有多种绕过的方法。最简单的是直接用 Unicode 字符。这时要确保文件是 UTF-8 编码且网页也指定为 UTF-8 编码。
+
+```javascript
+<div>{'First · Second'}</div>
+```
+
+安全的做法是先找到 [实体的 Unicode 编号](http://www.fileformat.info/info/unicode/char/b7/index.htm) ，然后在 JavaScript 字符串里使用。
+
+```javascript
+<div>{'First \u00b7 Second'}</div>
+<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
+```
+
+可以在数组里混合使用字符串和 JSX 元素。
+
+```javascript
+<div>{['First ', <span>&middot;</span>, ' Second']}</div>
+```
+
+万不得已，可以直接使用原始 HTML。
+
+```javascript
+<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
+```
+
+## 自定义 HTML 属性
+
+如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 `data-` 前缀。
+
+```javascript
+<div data-custom-attribute="foo" />
+```
+
+以 `aria-` 开头的 [网络无障碍] 属性可以正常使用。
+
+```javascript
+<div aria-hidden={true} />
+```

docs/docs/03-interactivity-and-dynamic-uis.md

@@ -45,9 +45,9 @@ If you'd like to use React on a touch device such as a phone or tablet, simply c
 
 ## Under the Hood: Autobinding and Event Delegation
 
-Under the hood React does a few things to keep your code performant and easy to understand.
+Under the hood, React does a few things to keep your code performant and easy to understand.
 
-**Autobinding:** When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
+**Autobinding:** When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
 
 **Event delegation:** React doesn'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's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
 
@@ -83,4 +83,4 @@ A common pattern is to create several stateless components that just render data
 
 * **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
 * **React components:** Build them in `render()` based on underlying props and state.
-* **Duplicated data from props:** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.
+* **Duplicated data from props:** 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 its previous values, because props can change over time.

docs/docs/03-interactivity-and-dynamic-uis.zh-CN.md

@@ -0,0 +1,86 @@
+---
+id: interactivity-and-dynamic-uis-zh-CN
+title: 动态交互式用户界面
+permalink: interactivity-and-dynamic-uis-zh-CN.html
+prev: jsx-gotchas-zh-CN.html
+next: multiple-components-zh-CN.html
+---
+
+我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。
+
+
+## 简单例子
+
+```javascript
+var LikeButton = React.createClass({
+  getInitialState: function() {
+    return {liked: false};
+  },
+  handleClick: function(event) {
+    this.setState({liked: !this.state.liked});
+  },
+  render: function() {
+    var text = this.state.liked ? 'like' : 'haven\'t liked';
+    return (
+      <p onClick={this.handleClick}>
+        You {text} this. Click to toggle.
+      </p>
+    );
+  }
+});
+
+React.render(
+  <LikeButton />,
+  document.getElementById('example')
+);
+```
+
+
+## 事件处理与合成事件（Synthetic Events）
+
+React 里只需把事件处理器（event handler）以骆峰命名（camelCased）形式当作组件的 props 传入即可，就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说，React 知道如何冒泡和捕获事件，而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致，无论你使用哪种浏览器。
+
+如果需要在手机或平板等触摸设备上使用 React，需要调用 `React.initializeTouchEvents(true);` 启用触摸事件处理。
+
+## 幕后原理：自动绑定（Autobinding）和事件代理（Event Delegation）
+
+在幕后，React 做了一些操作来让代码高效运行且易于理解。
+
+**Autobinding:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。有了 React，所有方法被自动绑定到了它的组件实例上。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！
+
+**事件代理 ：** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里处理器时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。
+
+
+## 组件其实是状态机（State Machines）
+
+React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。
+
+React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。
+
+
+## State 工作原理
+
+常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并（merge） `data` 到 `this.state`，并重新渲染组件。渲染完成后，调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`，因为 React 会负责把界面更新到最新状态。
+
+
+## 哪些组件应该有 State？
+
+大部分组件的工作应该是从 `props` 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。
+
+** 尝试把尽可能多的组件无状态化。** 这样做能隔离 state，把它放到最合理的地方，也能减少冗余并，同时易于解释程序运作过程。
+
+常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 `props` 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。
+
+
+## 哪些 *应该* 作为 State？
+
+**State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。
+
+
+## 哪些 *不应该* 作为 State？
+
+`this.state` 应该仅包括能表示用户界面状态所需的最少数据。因些，它不应该包括：
+
+* **计算所得数据：** 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 `render()` 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 `render()` 里使用 `this.state.listItems.length + ' list items'` 比把它放到 state 里好的多。
+* **React 组件：** 在 `render()` 里使用当前 props 和 state 来创建它。
+* **基于 props 的重复数据：** 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。

docs/docs/04-multiple-components.md

@@ -171,7 +171,7 @@ var MyComponent = React.createClass({
 });
 ```
 
-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:
+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 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:
 
 ```javascript
   render: function() {

docs/docs/04-multiple-components.zh-CN.md

@@ -0,0 +1,204 @@
+---
+id: multiple-components-zh-CN
+title: 复合组件
+permalink: multiple-components-zh-CN.html
+prev: interactivity-and-dynamic-uis-zh-CN.html
+next: reusable-components-zh-CN.html
+---
+
+目前为止，我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一：可组合性（composability）。
+
+
+## 动机：关注分离
+
+通过复用那些接口定义良好的组件来开发新的模块化组件，我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的*不同关注面分离*。如果为程序开发一套自定义的组件库，那么就能以最适合业务场景的方式来展示你的用户界面。
+
+## 组合实例
+
+一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。
+
+```javascript
+var Avatar = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <ProfilePic username={this.props.username} />
+        <ProfileLink username={this.props.username} />
+      </div>
+    );
+  }
+});
+
+var ProfilePic = React.createClass({
+  render: function() {
+    return (
+      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
+    );
+  }
+});
+
+var ProfileLink = React.createClass({
+  render: function() {
+    return (
+      <a href={'http://www.facebook.com/' + this.props.username}>
+        {this.props.username}
+      </a>
+    );
+  }
+});
+
+React.render(
+  <Avatar username="pwh" />,
+  document.getElementById('example')
+);
+```
+
+
+## 从属关系
+
+上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，
+如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。
+
+把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例，`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**（但不是拥有者）。
+
+
+## 子级
+
+实例化 React 组件时，你可以在开始标签和结束标签之间引用在React 组件或者Javascript 表达式：
+
+```javascript
+<Parent><Child /></Parent>
+```
+
+`Parent` 能通过专门的 `this.props.children`  props 读取子级。**`this.props.children` 是一个不透明的数据结构：** 通过 [React.Children 工具类](/react/docs/top-level-api.html#react.children) 来操作。
+
+### 子级校正（Reconciliation）
+
+**校正就是每次 render 方法调用后 React 更新 DOM 的过程。** 一般情况下，子级会根据它们被渲染的顺序来做校正。例如，下面代码描述了两次渲染的过程：
+
+```html
+// 第一次渲染
+<Card>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+// 第二次渲染
+<Card>
+  <p>Paragraph 2</p>
+</Card>
+```
+
+直观来看，只是删除了`<p>Paragraph 1</p>`。事实上，React 先更新第一个子级的内容，然后删除最后一个组件。React 是根据子级的*顺序*来校正的。
+
+### 子组件状态管理
+
+对于大多数组件，这没什么大碍。但是，对于使用 `this.state` 来在多次渲染过程中里维持数据的状态化组件，这样做潜在很多问题。
+
+多数情况下，可以通过隐藏组件而不是删除它们来绕过这些问题。
+
+```html
+// 第一次渲染
+<Card>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+// 第二次渲染
+<Card>
+  <p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</Card>
+```
+
+### 动态子级
+
+如果子组件位置会改变（如在搜索结果中）或者有新组件添加到列表开头（如在流中）情况会变得更加复杂。如果子级要在多个渲染阶段保持自己的特征和状态，在这种情况下，你可以通过给子级设置惟一标识的 `key` 来区分。
+
+```javascript
+  render: function() {
+    var results = this.props.results;
+    return (
+      <ol>
+        {results.map(function(result) {
+          return <li key={result.id}>{result.text}</li>;
+        })}
+      </ol>
+    );
+  }
+```
+
+当 React 校正带有 key 的子级时，它会确保它们被重新排序（而不是破坏）或者删除（而不是重用）。
+`务必` 把 `key` 添加到子级数组里组件本身上，而不是每个子级内部最外层 HTML 上：
+
+```javascript
+// 错误！
+var ListItemWrapper = React.createClass({
+  render: function() {
+    return <li key={this.props.data.id}>{this.props.data.text}</li>;
+  }
+});
+var MyComponent = React.createClass({
+  render: function() {
+    return (
+      <ul>
+        {this.props.results.map(function(result) {
+          return <ListItemWrapper data={result}/>;
+        })}
+      </ul>
+    );
+  }
+});
+
+// 正确 :)
+var ListItemWrapper = React.createClass({
+  render: function() {
+    return <li>{this.props.data.text}</li>;
+  }
+});
+var MyComponent = React.createClass({
+  render: function() {
+    return (
+      <ul>
+        {this.props.results.map(function(result) {
+           return <ListItemWrapper key={result.id} data={result}/>;
+        })}
+      </ul>
+    );
+  }
+});
+```
+
+也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 `key`。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序，**除了** 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况，React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免：
+
+```javascript
+  render: function() {
+    var items = {};
+
+    this.props.results.forEach(function(result) {
+      // 如果 result.id 看起来是一个数字（比如短哈希），那么
+      // 对象字面量的顺序就得不到保证。这种情况下，需要添加前缀
+      // 来确保 key 是字符串。
+      items['result-' + result.id] = <li>{result.text}</li>;
+    });
+
+    return (
+      <ol>
+        {items}
+      </ol>
+    );
+  }
+```
+
+## 数据流
+
+React 里，数据通过上面介绍过的 `props` 从拥有者流向归属者。这就是高效的单向数据绑定(one-way data binding)：拥有者通过它的 `props` 或 `state` 计算出一些值，并把这些值绑定到它们拥有的组件的 props 上。因为这个过程会递归地调用，所以数据变化会自动在所有被使用的地方自动反映出来。
+
+
+## 性能提醒
+
+你或许会担心如果一个拥有者有大量子级时，对于数据变化做出响应非常耗费性能。值得庆幸的是执行 JavaScript  非常的快，而且 `render()` 方法一般比较简单，所以在大部分应用里这样做速度极快。此外，性能的瓶颈大多是因为 DOM 更新，而非 JS 执行，而且 React 会通过批量更新和变化检测来优化性能。
+
+但是，有时候需要做细粒度的性能控制。这种情况下，可以重写 `shouldComponentUpdate()` 方法返回 false 来让 React 跳过对子树的处理。参考 [React reference docs](/react/docs/component-specs.html) 了解更多。
+
+> 注意：
+> 
+> 如果在数据变化时让 `shouldComponentUpdate()` 返回 false，React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么，并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度，DOM 操作通常才是慢的原因。

docs/docs/05-reusable-components.md

@@ -25,12 +25,12 @@ React.createClass({
     optionalObject: React.PropTypes.object,
     optionalString: React.PropTypes.string,
 
-    // Anything that can be rendered: numbers, strings, components or an array
+    // Anything that can be rendered: numbers, strings, elements or an array
     // containing these types.
-    optionalRenderable: React.PropTypes.renderable,
+    optionalNode: React.PropTypes.node,
 
-    // A React component.
-    optionalComponent: React.PropTypes.component,
+    // A React element.
+    optionalElement: React.PropTypes.element,
 
     // You can also declare that a prop is an instance of a class. This uses
     // JS's instanceof operator.
@@ -120,13 +120,13 @@ React.render(
 
 ## Single Child
 
-With `React.PropTypes.component` you can specify that only a single child can be passed to
+With `React.PropTypes.element` you can specify that only a single child can be passed to
 a component as children.
 
 ```javascript
 var MyComponent = React.createClass({
   propTypes: {
-    children: React.PropTypes.component.isRequired
+    children: React.PropTypes.element.isRequired
   },
 
   render: function() {

docs/docs/05-reusable-components.zh-CN.md

@@ -0,0 +1,183 @@
+---
+id: reusable-components-zh-CN
+title: 可复用组件
+permalink: reusable-components-zh-CN.html
+prev: multiple-components-zh-CN.html
+next: transferring-props-zh-CN.html
+---
+
+设计接口的时候，把通用的设计元素（按钮，表单框，布局组件等）拆成接口良好定义的可复用的组件。这样，下次开发相同界面程序时就可以写更少的代码，也意义着更高的开发效率，更少的 Bug 和更少的程序体积。
+
+
+## Prop 验证
+
+随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入 `propTypes`。`React.PropTypes` 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 `propTypes`。下面用例子来说明不同验证器的区别：
+
+```javascript
+React.createClass({
+  propTypes: {
+    // 可以声明 prop 为指定的 JS 基本类型。默认
+    // 情况下，这些 prop 都是可传可不传的。
+    optionalArray: React.PropTypes.array,
+    optionalBool: React.PropTypes.bool,
+    optionalFunc: React.PropTypes.func,
+    optionalNumber: React.PropTypes.number,
+    optionalObject: React.PropTypes.object,
+    optionalString: React.PropTypes.string,
+
+    // 所有可以被渲染的对象：数字，
+    // 字符串，DOM 元素或包含这些类型的数组。
+    optionalNode: React.PropTypes.node,
+
+    // React 元素
+    optionalElement: React.PropTypes.element,
+
+    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
+    optionalMessage: React.PropTypes.instanceOf(Message),
+
+    // 用 enum 来限制 prop 只接受指定的值。
+    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
+
+    // 指定的多个对象类型中的一个
+    optionalUnion: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+      React.PropTypes.instanceOf(Message)
+    ]),
+
+    // 指定类型组成的数组
+    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
+
+    // 指定类型的属性构成的对象
+    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
+
+    // 特定形状参数的对象
+    optionalObjectWithShape: React.PropTypes.shape({
+      color: React.PropTypes.string,
+      fontSize: React.PropTypes.number
+    }),
+
+    // 以后任意类型加上 `isRequired` 来使 prop 不可空。
+    requiredFunc: React.PropTypes.func.isRequired,
+
+    // 不可空的任意类型
+    requiredAny: React.PropTypes.any.isRequired,
+
+    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
+    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
+    customProp: function(props, propName, componentName) {
+      if (!/matchme/.test(props[propName])) {
+        return new Error('Validation failed!');
+      }
+    }
+  },
+  /* ... */
+});
+```
+
+
+## 默认 Prop 值
+
+React 支持以声明式的方式来定义 `props` 的默认值。
+
+```javascript
+var ComponentWithDefaultProps = React.createClass({
+  getDefaultProps: function() {
+    return {
+      value: 'default value'
+    };
+  }
+  /* ... */
+});
+```
+
+当父级没有传入 props 时，`getDefaultProps()` 可以保证  `this.props.value` 有默认值，注意 `getDefaultProps` 的结果会被 *缓存*。得益于此，你可以直接使用 props，而不必写手动编写一些重复或无意义的代码。
+
+## 传递 Props：小技巧
+
+有一些常用的 React 组件只是对 HTML 做简单扩展。通常，你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX 的 _spread_ 语法会帮到你：
+
+```javascript
+var CheckLink = React.createClass({
+  render: function() {
+    // 这样会把 CheckList 所有的 props 复制到 <a>
+    return <a {...this.props}>{'√ '}{this.props.children}</a>;
+  }
+});
+
+React.render(
+  <CheckLink href="/checked.html">
+    Click here!
+  </CheckLink>,
+  document.getElementById('example')
+);
+```
+
+## 单个子级
+
+`React.PropTypes.element` 可以限定只能有一个子级传入。
+
+```javascript
+var MyComponent = React.createClass({
+  propTypes: {
+    children: React.PropTypes.element.isRequired
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.props.children} // 有且仅有一个元素，否则会抛异常。
+      </div>
+    );
+  }
+
+});
+```
+
+
+## Mixins
+
+组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](http://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
+
+一个通用的场景是：一个组件需要定期更新。用 `setInterval()` 做很容易，但当不需要它的时候取消定时器来节省内存是非常重要的。React 提供 [生命周期方法](/react/docs/working-with-the-browser.html#component-lifecycle) 来告知组件创建或销毁的时间。下面来做一个简单的 mixin，使用 `setInterval()` 并保证在组件销毁时清理定时器。
+
+```javascript
+var SetIntervalMixin = {
+  componentWillMount: function() {
+    this.intervals = [];
+  },
+  setInterval: function() {
+    this.intervals.push(setInterval.apply(null, arguments));
+  },
+  componentWillUnmount: function() {
+    this.intervals.map(clearInterval);
+  }
+};
+
+var TickTock = React.createClass({
+  mixins: [SetIntervalMixin], // 引用 mixin
+  getInitialState: function() {
+    return {seconds: 0};
+  },
+  componentDidMount: function() {
+    this.setInterval(this.tick, 1000); // 调用 mixin 的方法
+  },
+  tick: function() {
+    this.setState({seconds: this.state.seconds + 1});
+  },
+  render: function() {
+    return (
+      <p>
+        React has been running for {this.state.seconds} seconds.
+      </p>
+    );
+  }
+});
+
+React.render(
+  <TickTock />,
+  document.getElementById('example')
+);
+```
+
+关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。

docs/docs/06-transferring-props.md

@@ -37,8 +37,8 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
-  <FancyCheckbox checked={true} onClick={console.log}>
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
   document.body
@@ -70,8 +70,8 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
-  <FancyCheckbox checked={true} onClick={console.log}>
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
   document.body

docs/docs/06-transferring-props.zh-CN.md

@@ -0,0 +1,164 @@
+---
+id: transferring-props-zh-CN
+title: 传递 Props
+permalink: transferring-props-zh-CN.html
+prev: reusable-components-zh-CN.html
+next: forms-zh-CN.html
+---
+
+React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。
+
+可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值：
+
+```javascript
+return <Component {...this.props} more="values" />;
+```
+
+如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 `Object.assign` 或 Underscore `_.extend`。
+
+```javascript
+return Component(Object.assign({}, this.props, { more: 'values' }));
+```
+
+下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。
+
+
+## 手动传递
+
+大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      <div className={fancyClass} onClick={this.props.onClick}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    Hello world!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+但 `name` 这个属性怎么办？还有 `title`、`onMouseOver` 这些 props？
+
+
+## 在 JSX 里使用 `...` 传递
+
+有时把所有属性都传下去是不安全或啰嗦的。这时可以使用 [解构赋值](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 中的剩余属性特性来把未知属性批量提取出来。
+
+列出所有要当前使用的属性，后面跟着 `...other`。
+
+```javascript
+var { checked, ...other } = this.props;
+```
+
+这样能确保把所有 props 传下去，*除了* 那些已经被使用了的。
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    // `other` 包含 { onClick: console.log } 但 checked 属性除外
+    return (
+      <div {...other} className={fancyClass} />
+    );
+  }
+});
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
+    Hello world!
+  </FancyCheckbox>,
+  document.body
+);
+```
+
+> 注意:
+> 
+> 上面例子中，`checked` 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值，那么可能无意中把它传下去。
+
+在传递这些未知的 `other` 属性时，要经常使用解构赋值模式。
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
+    // 反模式：`checked` 会被传到里面的组件里
+    return (
+      <div {...this.props} className={fancyClass} />
+    );
+  }
+});
+```
+
+
+## 使用和传递同一个 Prop
+
+如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好，因为更利于重构和语法检查。
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var { checked, title, ...other } = this.props;
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    var fancyTitle = checked ? 'X ' + title : 'O ' + title;
+    return (
+      <label>
+        <input {...other}
+          checked={checked}
+          className={fancyClass}
+          type="checkbox"
+        />
+        {fancyTitle}
+      </label>
+    );
+  }
+});
+```
+
+> 注意:
+> 
+> 顺序很重要，把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。
+
+
+## 剩余属性和展开属性 `...`
+
+剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。
+
+这是 [ES7 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。
+
+```javascript
+var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
+x; // 1
+y; // 2
+z; // { a: 3, b: 4 }
+```
+
+> 注意:
+>
+> 使用 [JSX 命令行工具](http://npmjs.org/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。
+
+
+## 使用 Underscore 来传递
+
+如果不使用 JSX，可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性，`_.extend` 复制属性到新的对象。
+
+```javascript
+var FancyCheckbox = React.createClass({
+  render: function() {
+    var checked = this.props.checked;
+    var other = _.omit(this.props, 'checked');
+    var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
+    return (
+      React.DOM.div(_.extend({}, other, { className: fancyClass }))
+    );
+  }
+});
+```

docs/docs/07-forms.zh-CN.md

@@ -0,0 +1,168 @@
+---
+id: forms-zh-CN
+title: 表单组件
+permalink: forms-zh-CN.html
+prev: transferring-props-zh-CN.html
+next: working-with-the-browser-zh-CN.html
+---
+
+诸如 `<input>`、`<textarea>`、`<option>` 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
+  
+关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#form-events)。
+
+## 交互属性    
+    
+表单组件支持几个受用户交互影响的属性：
+    
+* `value`，用于 `<input>`、`<textarea>` 组件。
+* `checked`，用于类型为 `checkbox` 或者 `radio` 的 `<input>` 组件。
+* `selected`，用于 `<option>` 组件。
+
+在 HTML 中，`<textarea>` 的值通过子节点设置；在 React 中则应该使用 `value` 代替。        
+
+表单组件可以通过 `onChange` 回调函数来监听组件变化。当用户做出以下交互时，`onChange` 执行并通过浏览器做出响应：
+          
+* `<input>` 或 `<textarea>` 的 `value` 发生变化时。
+* `<input>` 的 `checked` 状态改变时。
+* `<option>` 的 `selected` 状态改变时。
+              
+和所有 DOM 事件一样，所有的 HTML 原生组件都支持 `onChange` 属性，而且可以用来监听冒泡的 `change` 事件。               
+              
+              
+## 受限组件              
+
+设置了 `value` 的 `<input>` 是一个*受限*组件。 对于受限的 `<input>`，渲染出来的 HTML 元素始终保持 `value` 属性的值。例如：
+
+```javascript
+  render: function() {
+    return <input type="text" value="Hello!" />;
+  }
+```
+              
+上面的代码将渲染出一个值为 `Hello!` 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为     `Hello!`。如果想响应更新用户输入的值，就得使用 `onChange` 事件：
+
+```javascript
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+  render: function() {
+    var value = this.state.value;
+    return <input type="text" value={value} onChange={this.handleChange} />;
+  }
+```
+
+上面的代码中，React 将用户输入的值更新到 `<input>` 组件的 `value` 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：
+
+```javascript
+  handleChange: function(event) {
+    this.setState({value: event.target.value.substr(0, 140)});
+  }
+```
+
+上面的代码接受用户输入，并截取前 140 个字符。
+
+              
+## 不受限组件
+
+没有设置 `value`(或者设为 `null`) 的 `<input>` 组件是一个*不受限*组件。对于不受限的 `<input>` 组件，渲染出来的元素直接反应用户输入。例如：
+
+```javascript
+  render: function() {
+    return <input type="text" />;
+  }
+```
+
+上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 `onChange` 事件可以监听值的变化。
+
+如果想给组件设置一个非空的初始值，可以使用 `defaultValue` 属性。例如：
+
+```javascript
+  render: function() {
+    return <input type="text" defaultValue="Hello!" />;
+  }
+```
+
+上面的代码渲染出来的元素和**受限组件**一样有一个初始值，但这个值用户可以改变并会反应到界面上。
+
+同样地， 类型为 `radio`、`checkbox` 的`<input>` 支持 `defaultChecked` 属性， `<select>` 支持 `defaultValue` 属性。
+
+```javascript
+  render: function() {
+      return (
+          <div>
+            <input type="radio" name="opt" defaultChecked /> Option 1
+            <input type="radio" name="opt" /> Option 2
+            <select defaultValue="C">
+              <option value="A">Apple</option>
+              <option value="B">Banana</option>
+              <option value="C">Cranberry</option>
+            </select>
+          </div>
+      );
+    }
+```                
+
+
+## 高级主题
+                
+### 为什么使用受限组件？
+
+在 React 中使用诸如 `<input>` 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。
+                
+比如下面的代码：                
+
+```html
+  <input type="text" name="title" value="Untitled" />
+```
+
+在 HTML 中将渲染初始值为 `Untitled` 的输入框。用户改变输入框的值时，节点的 `value` 属性（*property*）将随之变化，但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
+
+与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：
+
+```javascript
+  render: function() {
+    return <input type="text" name="title" value="Untitled" />;
+  }
+```
+
+该方法在任何时间点渲染组件以后，输入框的值就应该*始终*为 `Untitled`。
+
+
+### 为什么 `<textarea>` 使用 `value` 属性？
+
+在 HTML 中， `<textarea>` 的值通常使用子节点设置：
+
+```html
+  <!-- 反例：在 React 中不要这样使用！ -->
+  <textarea name="description">This is the description.</textarea>
+```
+                  
+对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 `<textarea>` 值时不应该使用子节点：
+
+```javascript
+  <textarea name="description" value="This is a description." />
+```
+
+如果*非要**使用子节点，效果和使用 `defaultValue` 一样。
+
+
+### 为什么 `<select>` 使用 `value` 属性                  
+
+HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：
+
+```javascript
+  <select value="B">
+    <option value="A">Apple</option>
+    <option value="B">Banana</option>
+    <option value="C">Cranberry</option>
+  </select>
+```
+
+如果是不受限组件，则使用 `defaultValue`。
+
+> 注意：
+>
+> 给 `value` 属性传递一个数组，可以选中多个选项：`<select multiple={true} value={['B', 'C']}>`。

docs/docs/09-tooling-integration.md

@@ -32,7 +32,11 @@ If you like using JSX, we provide an in-browser JSX transformer for development
 
 ### Productionizing: Precompiled JSX
 
-If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`. Run `jsx --help` for more information on how to use this tool.
+If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`.
+
+By default JSX files with a `.js` extension are transformed. Use `jsx --extension jsx src/ build/` to transform files with a `.jsx` extension.
+
+Run `jsx --help` for more information on how to use this tool.
 
 
 ### Helpful Open-Source Projects

docs/docs/10-addons.md

@@ -11,13 +11,13 @@ next: animation.html
 - [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
 - [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
 - [`classSet`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
-- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
 - [`cloneWithProps`](clone-with-props.html), to make shallow copies of React components and change their props.
 - [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
+- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
 
 The add-ons below are in the development (unminified) version of React only:
 
-- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
+- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
 - [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.
 
 To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.

docs/docs/10.1-animation.md

@@ -141,7 +141,7 @@ You can disable animating `enter` or `leave` animations if you want. For example
 
 ## Low-level API: `ReactTransitionGroup`
 
-`ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
+`ReactTransitionGroup` is the basis for animations. It is accessible as `React.addons.TransitionGroup`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
 
 ### `componentWillEnter(callback)`
 
@@ -175,7 +175,7 @@ Every DOM component that React can render is available for use. However, `compon
 >
 > Prior to v0.12, when using DOM components, the `component` prop needed to be a reference to `React.DOM.*`. Since the component is simply passed to `React.createElement`, it must now be a string. Composite components must pass the factory.
 
-Any additional, user-defined, properties will be become properties of the rendered component. For example, here's how you would you render a `<ul>` with css class:
+Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `<ul>` with css class:
 
 ```javascript{1}
 <ReactTransitionGroup component="ul" className="animated-list">

docs/docs/10.4-test-utils.md

@@ -21,7 +21,7 @@ Example usage:
 ```javascript
 var node = this.refs.input.getDOMNode();
 React.addons.TestUtils.Simulate.click(node);
-React.addons.TestUtils.Simulate.change(node);
+React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
 ```
 
@@ -43,6 +43,14 @@ object mockComponent(function componentClass, string? mockTagName)
 
 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.
 
+### isElement
+
+```javascript
+boolean isElement(ReactElement element)
+```
+
+Returns true if `element` is any ReactElement.
+
 ### isElementOfType
 
 ```javascript
@@ -73,7 +81,7 @@ Returns true if `instance` is a composite component (created with `React.createC
 boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
 ```
 
-The combination of `isComponentOfType()` and `isCompositeComponent()`.
+Returns true if `instance` is a composite component (created with `React.createClass()`) whose type is of a React `componentClass`.
 
 ### isTextComponent
 

docs/docs/10.5-clone-with-props.md

@@ -15,7 +15,9 @@ Do a shallow copy of `component` and merge any props provided by `extraProps`. T
 > Note:
 >
 > `cloneWithProps` does not transfer `key` to the cloned component. If you wish to preserve the key, add it to the `extraProps` object:
+>
 > ```js
 > var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.key });
 > ```
+>
 > `ref` is similarly not preserved.

docs/docs/10.6-update.md

@@ -20,7 +20,7 @@ myData.x.y.z = 7;
 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:
+you have no way of determining which data has changed since the previous copy is overridden. 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:
 
 ```js
 var newData = deepCopy(myData);
@@ -58,7 +58,7 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati
 
   * `{$push: array}` `push()` all the items in `array` on the target.
   * `{$unshift: array}` `unshift()` all the items in `array` on the target.
-  * `{$splice: array of arrays}` for each item in `array()` call `splice()` on the target with the parameters provided by the item.
+  * `{$splice: array of arrays}` for each item in `arrays` call `splice()` on the target with the parameters provided by the item.
   * `{$set: any}` replace the target entirely.
   * `{$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.

docs/docs/10.7-pure-render-mixin.md

@@ -11,7 +11,7 @@ If your React component's render function is "pure" (in other words, it renders
 Example:
 
 ```js
-var PureRenderMixin = require('react').addons.PureRenderMixin;
+var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 React.createClass({
   mixins: [PureRenderMixin],
 

docs/docs/10.8-perf.md

@@ -3,6 +3,7 @@ id: perf
 title: Performance Tools
 permalink: perf.html
 prev: pure-render-mixin.html
+next: advanced-performance.html
 ---
 
 React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) hook where you can add optimization hints to React's diff algorithm.

docs/docs/11-advanced-performance.md

@@ -0,0 +1,207 @@
+---
+id: advanced-performance
+title: Advanced Performance
+permalink: advanced-performance.html
+prev: perf.html
+---
+
+One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React version. The idea of re-rendering an entire subtree of components in response to every state change makes people wonder whether this process negatively impacts performance. React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.
+
+## Avoiding reconciling the DOM
+
+React makes use of a *virtual DOM*, which is a descriptor of a DOM subtree rendered in the browser. This parallel representation allows React to avoid creating DOM nodes and accessing existing ones, which is slower than operations on JavaScript objects. When a component's props or state change, React decides whether an actual DOM update is necessary by constructing a new virtual DOM and comparing it to the old one. Only in the case they are not equal, will React [reconcile](http://facebook.github.io/react/docs/reconciliation.html) the DOM, applying as few mutations as possible.
+
+On top of this, React provides a component lifecycle function, `shouldComponentUpdate`, which is triggered before the re-rendering process starts, giving the developer the ability to short circuit this process. The default implementation of this function returns `true`, leaving React to perform the update:
+
+```javascript
+shouldComponentUpdate: function(nextProps, nextState) {
+  return true;
+}
+```
+
+Keep in mind that React will invoke this function pretty often, so the implementation has to be fast.
+
+Say you have a messaging application with several chat threads. Suppose only one of the threads has changed. If we implement `shouldComponentUpdate` on the `ChatThread` component, React can skip the rendering step for the other threads:
+
+```javascript
+shouldComponentUpdate: function(nextProps, nextState) {
+  // TODO: return whether or not current chat thread is
+  // different to former one.
+}
+```
+
+So, in summary, React avoids carrying out expensive DOM operations required to reconcile subtrees of the DOM by allowing the user to short circuit the process using `shouldComponentUpdate`, and, for those which should update, by comparing virtual DOMs.
+
+## shouldComponentUpdate in action
+
+Here's a subtree of components. For each one is indicated what `shouldComponentUpdate` returned and whether or not the virtual DOMs were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.
+
+<figure><img src="/react/img/docs/should-component-update.png" /></figure>
+
+In the example above, since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React had no need to generate the new virtual DOM, and therefore, it neither needed to reconcile the DOM. Note that React didn't even had to invoke `shouldComponentUpdate` on C4 and C5.
+
+For C1 and C3 `shouldComponentUpdate` returned `true`, so React had to go down to the leaves and check them. For C6 it returned `true`; since the virtual DOMs weren't equivalent it had to reconcile the DOM.
+The last interesting case is C8. For this node React had to compute the virtual DOM, but since it was equal to the old one, it didn't have to reconcile it's DOM.
+
+Note that React only had to do DOM mutations for C6, which was inevitable. For C8 it bailed out by comparing the virtual DOMs, and for C2's subtree and C7, it didn't even have to compute the virtual DOM as we bailed out on `shouldComponentUpdate`.
+
+So, how should we implement `shouldComponentUpdate`? Say that you have a component that just renders a string value:
+
+```javascript
+React.createClass({
+  propsTypes: {
+    value: React.PropTypes.string.isRequired
+  },
+
+  render: function() {
+    return <div>this.props.value</div>;
+  }
+});
+```
+
+We could easily implement `shouldComponentUpdate` as follow:
+
+```javascript
+shouldComponentUpdate: function(nextProps, nextState) {
+  return this.props.value !== nextProps.value;
+}
+```
+
+So far so good, dealing with such simple props/state structures is easy. We could even generalize an implementation based on shallow equality and mix it into components. In fact, React already provides such implementation: [PureRenderMixin](http://facebook.github.io/react/docs/pure-render-mixin.html).
+
+But what if your components' props or state are mutable data structures?. Say the prop the component receives, instead of being a string like `'bar'`, is a Javascript object that contains a string such as, `{ foo: 'bar' }`:
+
+```javascript
+React.createClass({
+  propsTypes: {
+    value: React.PropTypes.object.isRequired
+  },
+
+  render: function() {
+    return <div>this.props.value.foo</div>;
+  }
+});
+```
+
+The implementation of `shouldComponentUpdate` we had before wouldn't always work as expected:
+
+```javascript
+// assume this.props.value is { foo: 'bar' }
+// assume nextProps.value is { foo: 'bar' },
+// but this reference is different to this.props.value
+this.props.value !== nextProps.value; // true
+```
+
+The problem is `shouldComponentUpdate` will return `true` when the prop actually didn't change. To fix this we could come up with this alternative implementation:
+
+```javascript
+shouldComponentUpdate: function(nextProps, nextState) {
+  return this.props.value.foo !== nextProps.value.foo;
+}
+```
+
+Basically, we ended up doing a deep comparison to make sure we properly track changes. This approach is pretty expensive in terms of performance and it doesn't scale as we would have to write different deep equality code for each model. On top of that, it might not even work if we don't carefully manage object references. Say this component is used by a parent:
+
+```javascript
+React.createClass({
+  getInitialState: function() {
+    return { value: { foo: 'bar' } };
+  },
+
+  onClick: function() {
+    var value = this.state.value;
+    value.foo += 'bar'; // ANTI-PATTERN!
+    this.setState({ value: value });
+  },
+
+  render: function() {
+    return (
+      <div>
+        <InnerComponent value={this.state.value} />
+        <a onClick={this.onClick}>Click me</a>
+      </div>
+    );
+  }
+});
+```
+
+The first time the inner component gets rendered it will have `{ foo: 'bar' }` as the value prop. If the user clicks on the anchor, the parent component's state will get updated to `{ value: { foo: 'barbar' } }`, triggering the re-rendering process of the inner component, which will receive `{ foo: 'barbar' }` as the new value for the prop.
+
+The problem is that since the parent and inner components share a reference to the same object, when the object gets mutated on line 2 of the `onClick` function, the prop the inner component had will change. So, when the re-rendering process starts, and `shouldComponentUpdate` gets invoked, `this.props.value.foo` will be equal to `nextProps.value.foo`, because in fact, `this.props.value` references the same object as `nextProps.value`.
+
+Consequently, since we'll miss the change on the prop and short circuit the re-rendering process, the UI won't get updated from `'bar'` to `'barbar'`.
+
+## Immutable-js to the rescue
+
+[Immutable-js](https://github.com/facebook/immutable-js) is a Javascript collections library  written by Lee Byron, which Facebook recently open-sourced. It provides *immutable persistent* collections via *structural sharing*. Lets see what these properties mean:
+
+* *Immutable*: once created, a collection cannot be altered at another point in time.
+* *Persistent*: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.
+* *Structural Sharing*: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to achieve space efficiency and acceptable performance. If the new collection is equal to the original, the original is often returned.
+
+Immutability makes tracking changes cheap; a change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular Javascript code:
+
+```javascript
+var x = { foo: "bar" };
+var y = x;
+y.foo = "baz";
+x === y; // true
+```
+
+Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. However, this code could be written using immutable-js as follows:
+
+```javascript
+var SomeRecord = Immutable.Record({ foo: null });
+var x = new SomeRecord({ foo: 'bar'  });
+var y = x.set('foo', 'baz');
+x === y; // false
+```
+
+In this case, since a new reference is returned when mutating `x`, we can safely assume that `x` has changed.
+
+Another possible way to track changes could be doing dirty checking by having a flag set by setters. A problem with this approach is that it forces you to use setters and, either write a lot of additional code, or somehow instrument your classes. Alternatively, you could deep copy the object just before the mutations and deep compare to determine whether there was a change or not. A problem with this approach is both deepCopy and deepCompare are expensive operations.
+
+So, Immutable data structures provides you a cheap and less verbose way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. Therefore, if we model props and state attributes using the abstractions provided by immutable-js we'll be able to use `PureRenderMixin` and get a nice boost in perf.
+
+## Immutable-js and Flux
+
+If you're using [Flux](http://facebook.github.io/flux/), you should start writing your stores using immutable-js. Take a look at the [full API](http://facebook.github.io/immutable-js/docs/#/).
+
+Let's see one possible way to model the thread example using Immutable data structures. First, we need to define a `Record` for each of the entities we're trying to model. Records are just immutable containers that hold values for a specific set of fields:
+
+```javascript
+var User = Immutable.Record({
+  id: undefined,
+  name: undefined,
+  email: undefined
+});
+
+var Message = Immutable.Record({
+  timestamp: new Date(),
+  sender: undefined,
+  text: ''
+});
+```
+
+The object the `Record` function receives defines the fields the object has and their default values.
+
+The messages *store* could keep track of the users and messages using two lists:
+
+```javascript
+this.users = Immutable.List();
+this.messages = Immutable.List();
+```
+
+It should be pretty straightforward to implement functions to process each *payload* type. For instance, when the store sees a payload representing a new message,  we can just create a new record and append it to the messages list:
+
+```javascript
+this.messages = this.messages.push(new Message({
+  timestamp: payload.timestamp,
+  sender: payload.sender,
+  text: payload.text
+});
+```
+
+Note that since the data structures are immutable, we need to assign the result of the push function to this.messages.
+
+On the React side, if we also use immutable-js data structures to hold the components' state, we could mix `PureRenderMixin` into all our components and short circuit the re-rendering process.

docs/docs/complementary-tools.zh-CN.md

@@ -0,0 +1,9 @@
+---
+id: complementary-tools-zh-CN
+title: 补充工具
+permalink: complementary-tools-zh-CN.html
+prev: videos-zh-CN.html
+next: examples-zh-CN.html
+---
+
+本页被移到了 [GitHub wiki](https://github.com/facebook/react/wiki/Complementary-Tools)。

docs/docs/examples.zh-CN.md

@@ -0,0 +1,8 @@
+---
+id: examples-zh-CN
+title: 示例
+permalink: examples-zh-CN.html
+prev: complementary-tools-zh-CN.html
+---
+
+本页被移到了 [GitHub wiki](https://github.com/facebook/react/wiki/Examples)。

docs/docs/flux-overview.zh-CN.md

@@ -0,0 +1,7 @@
+---
+id: flux-overview-zh-CN
+title: Flux 应用架构
+permalink: flux-overview-zh-CN.html
+---
+
+本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/overview.html)。

docs/docs/flux-todo-list.zh-CN.md

@@ -0,0 +1,7 @@
+---
+id: flux-todo-list-zh-CN
+title: Flux TodoMVC 教程
+permalink: flux-todo-list-zh-CN.html
+---
+
+本页被移到了 Flux 网站。[点击访问](http://facebook.github.io/flux/docs/todo-list.html)。

docs/docs/getting-started.md

@@ -9,8 +9,8 @@ redirect_from: "docs/index.html"
 
 The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
 
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
+ * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
+ * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
 
 ## Starter Kit
 
@@ -110,4 +110,8 @@ If you want to use React with [browserify](http://browserify.org/), [webpack](ht
 
 ## Next Steps
 
-Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. Good luck, and welcome!
+Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. 
+
+We also have a wiki where the community contributes with [workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
+
+Good luck, and welcome!

docs/docs/getting-started.zh-CN.md

@@ -1,19 +1,21 @@
 ---
 id: getting-started-zh-CN
 title: 入门教程
-next: tutorial.html
+permalink: getting-started-zh-CN.html
+next: tutorial-zh-CN.html
+redirect_from: "docs/index-zh-CN.html"
 ---
 
 ## JSFiddle
 
-开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
+开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds：
 
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
+ * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
+ * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
 
 ## 入门教程包 (Starter Kit)
 
-开始先下载入门教程包
+开始先下载入门教程包。
 
 <div class="buttons-unit downloads">
   <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
@@ -21,7 +23,7 @@ next: tutorial.html
   </a>
 </div>
 
-在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`
+在入门教程包的根目录，创建一个含有下面代码的 `helloworld.html`。
 
 ```html
 <!DOCTYPE html>
@@ -93,7 +95,7 @@ React.render(
   <head>
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- No need for JSXTransformer! -->
+    <!-- 不需要 JSXTransformer！ -->
   </head>
   <body>
     <div id="example"></div>
@@ -102,11 +104,16 @@ React.render(
 </html>
 ```
 
+
 ## 想用 CommonJS？
 
-如果你想在一个模块系统里使用 React，[fork 我们的代码](http://github.com/facebook/react)， `npm install` 然后运行 `grunt`。一个漂亮的 CommonJS 模块集将会被生成。我们的 `jsx` 转换工具可以很轻松的集成到大部分打包系统里（不仅仅是 CommonJS）。
+如果你想在 [browserify](http://browserify.org/)，[webpack](http://webpack.github.io/) 或者或其它兼容CommonJS的模块系统里使用 React，只要使用 [`react` npm 包](https://www.npmjs.org/package/react) 即可。而且，`jsx` 转换工具可以很轻松的地集成到大部分打包系统里（不仅仅是 CommonJS）。
+
 
 ## 下一步
 
-去看看[入门教程](/react/docs/tutorial.html)，然后学习其他在 `/examples` 目录里的示例代码。祝你好运，欢迎来到 React 的世界。
+去看看[入门教程](/react/docs/tutorial.html) 和入门教程包 `examples` 目录下的其它例子学习更多。
 
+我们还有一个社区开发者共建的 Wiki：[workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
+
+恭喜你，欢迎来到 React 的世界。

docs/docs/ref-01-top-level-api.md

@@ -8,20 +8,47 @@ redirect_from: "/docs/reference.html"
 
 ## 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` is the entry point to the React library. 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
 
 ```javascript
-function createClass(object specification)
+ReactClass 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.
+Create a component class, 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/docs/component-specs.html).
 
 
+### React.createElement
+
+```javascript
+ReactElement createElement(
+  string/ReactClass type,
+  [object props],
+  [children ...]
+)
+```
+
+Create and return a new `ReactElement` of the given type. The type argument can be either an
+html tag name string (eg. 'div', 'span', etc), or a `ReactClass` (created via `React.createClass`).
+
+
+### React.createFactory
+
+```javascript
+factoryFunction createFactory(
+  string/ReactClass type
+)
+```
+
+Return a function that produces ReactElements of a given type. Like `React.createElement`,
+the type argument can be either an html tag name string (eg. 'div', 'span', etc), or a
+`ReactClass`.
+
+
 ### React.render
 
 ```javascript
@@ -57,10 +84,10 @@ Remove a mounted React component from the DOM and clean up its event handlers an
 ### React.renderToString
 
 ```javascript
-string renderToString(ReactComponent component)
+string renderToString(ReactElement element)
 ```
 
-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.
+Render a ReactElement 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.render()` 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.
 
@@ -68,7 +95,7 @@ If you call `React.render()` on a node that already has this server-rendered mar
 ### React.renderToStaticMarkup
 
 ```javascript
-string renderToStaticMarkup(ReactComponent component)
+string renderToStaticMarkup(ReactElement element)
 ```
 
 Similar to `renderToString`, 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.

docs/docs/ref-02-component-api.md

@@ -39,7 +39,7 @@ replaceState(object nextState[, function callback])
 Like `setState()` but deletes any pre-existing state keys that are not in nextState.
 
 
-### forceUpdate()
+### forceUpdate
 
 ```javascript
 forceUpdate([function callback])
@@ -61,7 +61,7 @@ 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()
+### isMounted
 
 ```javascript
 bool isMounted()

docs/docs/ref-03-component-specs.md

@@ -195,7 +195,7 @@ Use this as an opportunity to perform preparation before an update occurs.
 componentDidUpdate(object prevProps, object prevState)
 ```
 
-Invoked immediately after updating occurs. This method is not called for the initial render.
+Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.
 
 Use this as an opportunity to operate on the DOM when the component has been updated.
 

docs/docs/ref-04-tags-and-attributes.md

@@ -53,15 +53,16 @@ These standard attributes are supported:
 
 ```
 accept acceptCharset accessKey action allowFullScreen allowTransparency alt
-async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
+async autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked classID
 className cols colSpan content contentEditable contextMenu controls coords
 crossOrigin data dateTime defer dir disabled download draggable encType form
-formNoValidate frameBorder height hidden href hrefLang htmlFor httpEquiv icon
-id label lang list loop manifest max maxLength media mediaGroup method min
-multiple muted name noValidate open pattern placeholder poster preload
-radioGroup readOnly rel required role rows rowSpan sandbox scope scrolling
-seamless selected shape size sizes span spellCheck src srcDoc srcSet start step
-style tabIndex target title type useMap value width wmode
+formAction formEncType formMethod formNoValidate formTarget frameBorder height
+hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
+marginHeight marginWidth max maxLength media mediaGroup method min multiple
+muted name noValidate open pattern placeholder poster preload radioGroup
+readOnly rel required role rows rowSpan sandbox scope scrolling seamless
+selected shape size sizes span spellCheck src srcDoc srcSet start step style
+tabIndex target title type useMap value width wmode
 ```
 
 In addition, the following non-standard attributes are supported:

docs/docs/ref-05-events.md

@@ -17,14 +17,14 @@ boolean bubbles
 boolean cancelable
 DOMEventTarget currentTarget
 boolean defaultPrevented
-Number eventPhase
+number eventPhase
 boolean isTrusted
 DOMEvent nativeEvent
 void preventDefault()
 void stopPropagation()
 DOMEventTarget target
-Date timeStamp
-String type
+number timeStamp
+string type
 ```
 
 > Note:
@@ -35,7 +35,9 @@ String type
 ## Supported Events
 
 React normalizes events so that they have consistent properties across
-different browsers.
+different browsers. 
+
+The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
 
 
 ### Clipboard Events

docs/docs/ref-05-events.zh-CN.md

@@ -0,0 +1,194 @@
+---
+id: events-zh-CN
+title: 事件系统
+permalink: events-zh-CN.html
+prev: tags-and-attributes-zh-CN.html
+next: dom-differences-zh-CN.html
+---
+
+## 合成事件
+
+事件处理程序通过 `合成事件`（`SyntheticEvent`）的实例传递，`SyntheticEvent` 是浏览器原生事件跨浏览器的封装。`SyntheticEvent` 和浏览器原生事件一样有 `stopPropagation()`、`preventDefault()` 接口，而且这些接口夸浏览器兼容。
+
+如果出于某些原因想使用浏览器原生事件，可以使用 `nativeEvent` 属性获取。每个和成事件（`SyntheticEvent`）对象都有以下属性：
+
+```javascript
+boolean bubbles
+boolean cancelable
+DOMEventTarget currentTarget
+boolean defaultPrevented
+Number eventPhase
+boolean isTrusted
+DOMEvent nativeEvent
+void preventDefault()
+void stopPropagation()
+DOMEventTarget target
+Date timeStamp
+String type
+```
+
+> 注意：
+>
+> React v0.12 中，事件处理程序返回 `false` 不再停止事件传播，取而代之，应该根据需要手动触发 `e.stopPropagation()` 或 `e.preventDefault()`。
+
+
+## 支持的事件
+
+React 将事件统一化，使事件在不同浏览器上有一致的属性。
+
+下面的事件处理程序在事件冒泡阶段被触发。如果要注册事件捕获处理程序，应该使用 `Capture` 事件，例如使用 `onClickCapture` 处理点击事件的捕获阶段，而不是 `onClick`。
+
+
+### 剪贴板事件
+
+事件名称：
+
+```
+onCopy onCut onPaste
+```
+
+属性：
+
+```javascript
+DOMDataTransfer clipboardData
+```
+
+
+### 键盘事件 
+
+事件名称：
+
+```
+onKeyDown onKeyPress onKeyUp
+```
+
+属性：
+
+```javascript
+boolean altKey
+Number charCode
+boolean ctrlKey
+function getModifierState(key)
+String key
+Number keyCode
+String locale
+Number location
+boolean metaKey
+boolean repeat
+boolean shiftKey
+Number which
+```
+
+
+### 焦点事件
+
+事件名称
+
+```
+onFocus onBlur
+```
+
+属性：
+
+```javascript
+DOMEventTarget relatedTarget
+```
+
+
+### 表单事件
+
+事件名称：
+
+```
+onChange onInput onSubmit
+```
+
+关于 `onChange` 事件的更多信息，参见 [表单组件](/react/docs/forms-zh-CN.html)。
+
+
+### 鼠标事件
+
+事件名称：
+
+```
+onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
+onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
+onMouseMove onMouseOut onMouseOver onMouseUp
+```
+
+属性：
+
+```javascript
+boolean altKey
+Number button
+Number buttons
+Number clientX
+Number clientY
+boolean ctrlKey
+function getModifierState(key)
+boolean metaKey
+Number pageX
+Number pageY
+DOMEventTarget relatedTarget
+Number screenX
+Number screenY
+boolean shiftKey
+```
+
+
+### 触控事件
+
+在渲染任意组件之前调用 `React.initializeTouchEvents(true)`，以启用触控事件。
+
+事件名称：
+
+```
+onTouchCancel onTouchEnd onTouchMove onTouchStart
+```
+
+属性：
+
+```javascript
+boolean altKey
+DOMTouchList changedTouches
+boolean ctrlKey
+function getModifierState(key)
+boolean metaKey
+boolean shiftKey
+DOMTouchList targetTouches
+DOMTouchList touches
+```
+
+
+### 用户界面事件
+
+事件名称：
+
+```
+onScroll
+```
+
+属性：
+
+```javascript
+Number detail
+DOMAbstractView view
+```
+
+
+### 滚轮事件
+
+事件名称：
+
+```
+onWheel
+```
+
+属性：
+
+```javascript
+Number deltaMode
+Number deltaX
+Number deltaY
+Number deltaZ
+```

docs/docs/ref-08-reconciliation.md

@@ -46,9 +46,9 @@ renderB: <Content />
 => [removeNode <Header />], [insertNode <Content />]
 ```
 
-Having this high level knowledge is a very important aspect of why React diff algorithm is both fast and precise. It provides a good heuristic to quickly prune big parts of the tree and focus on parts likely to be similar.
+Having this high level knowledge is a very important aspect of why React's diff algorithm is both fast and precise. It provides a good heuristic to quickly prune big parts of the tree and focus on parts likely to be similar.
 
-It is very unlikely that a `<Header>` element is going generate a DOM that is going to look like what a `<Content>` would generate. Instead of spending time trying to match those two structures, React just re-builds the tree from scratch.
+It is very unlikely that a `<Header>` element is going to generate a DOM that is going to look like what a `<Content>` would generate. Instead of spending time trying to match those two structures, React just re-builds the tree from scratch.
 
 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.
 
@@ -121,7 +121,7 @@ In practice, finding a key is not really hard. Most of the time, the element you
 
 ## Trade-offs
 
-It is important to remember that the reconciliation algorithm is an implementation detail. React could re-render the whole app on every action, the end-result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
+It is important to remember that the reconciliation algorithm is an implementation detail. React could re-render the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
 
 In the current implementation, you can express the fact that a sub-tree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will re-render that full sub-tree.
 

docs/docs/ref-09-glossary.md

@@ -21,7 +21,7 @@ You can create one of these object through `React.createElement`.
 var root = React.createElement('div');
 ```
 
-To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` a long with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
+To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` along with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
 
 ```javascript
 React.render(root, document.body);
@@ -62,7 +62,7 @@ var root = div({ className: 'my-div' });
 React.render(root, document.body);
 ```
 
-React already have built-in factories for common HTML tags:
+React already has built-in factories for common HTML tags:
 
 ```javascript
 var root = React.DOM.ul({ className: 'my-list' },
@@ -76,6 +76,7 @@ If you are using JSX you have no need for factories. JSX already provides a conv
 ## React Nodes
 
 A `ReactNode` can be either:
+
 - `ReactElement`
 - `string` (aka `ReactText`)
 - `number` (aka `ReactText`)

docs/docs/thinking-in-react.md

@@ -11,6 +11,10 @@ React is, in my opinion, the premier way to build big, fast Web apps with JavaSc
 
 One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.
 
+> Note:
+>
+> If you can't see the embedded code snippets on this page, make sure you're NOT loading this page on `https`.
+
 ## Start with a mock
 
 Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:
@@ -60,7 +64,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build a static version in React
 
-<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>
 
 Now that you have your component hierarchy it'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'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'll see why.
 
@@ -104,7 +108,7 @@ So finally, our state is:
 
 ## Step 4: Identify where your state should live
 
-<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>
 
 OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
 
@@ -129,7 +133,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add inverse data flow
 
-<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>
 
 So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
 

docs/docs/tutorial.md

@@ -5,7 +5,7 @@ prev: getting-started.html
 next: thinking-in-react.html
 ---
 
-We'll be building a simple, but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.
+We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.
 
 We'll provide:
 
@@ -16,19 +16,25 @@ We'll provide:
 It'll also have a few neat features:
 
 * **Optimistic commenting:** comments appear in the list before they're saved on the server so it feels fast.
-* **Live updates:** as other users comment we'll pop them into the comment view in real time
-* **Markdown formatting:** users can use Markdown to format their text
+* **Live updates:** other users' comments are popped into the comment view in real time.
+* **Markdown formatting:** users can use Markdown to format their text.
 
 ### Want to skip all this and just see the source?
 
 [It's all on GitHub.](https://github.com/reactjs/react-tutorial)
 
+### Running a server
+
+While it's not necessary to get started with this tutorial, later on we'll be adding functionality that requires `POST`ing to a running server. If this is something you are intimately familiar with and want to create your own server, please do. For the rest of you who might want to focus on learning about React without having to worry about the server-side aspects, we have written simple servers in a number of languages - JavaScript (using Node.js), Python, and Ruby. These are all available on GitHub. You can [view the source](https://github.com/reactjs/react-tutorial/) or [download a zip file](https://github.com/reactjs/react-tutorial/archive/master.zip) to get started.
+
+To get started using the tutorial download, just start editing `public/index.html`.
+
 ### 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:
+For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:
 
 ```html
-<!-- template.html -->
+<!-- index.html -->
 <html>
   <head>
     <title>Hello React</title>
@@ -141,7 +147,7 @@ var CommentForm = React.createClass({
 });
 ```
 
-Next, update the `CommentBox` component to use its new friends:
+Next, update the `CommentBox` component to use these new components:
 
 ```javascript{6-8}
 // tutorial3.js
@@ -209,7 +215,7 @@ Markdown is a simple way to format your text inline. For example, surrounding te
 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):
 
 ```html{7}
-<!-- template.html -->
+<!-- index.html -->
 <head>
   <title>Hello React</title>
   <script src="http://fb.me/react-{{site.react_version}}.js"></script>
@@ -379,7 +385,7 @@ When the component is first created, we want to GET some JSON from the server an
 
 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.
+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. [As mentioned above](#running-a-server), we have provided several servers you can use [on GitHub](https://github.com/reactjs/react-tutorial/). They provide the functionality you need for the rest of this tutorial.
 
 ```javascript{6-17}
 // tutorial13.js
@@ -413,7 +419,7 @@ var CommentBox = React.createClass({
 
 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.
 
-```javascript{3,19-20,34}
+```javascript{3,14,19-20,34}
 // tutorial14.js
 var CommentBox = React.createClass({
   loadCommentsFromServer: function() {
@@ -476,7 +482,7 @@ var CommentForm = React.createClass({
 
 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.
 
-```javascript{3-14,17-19}
+```javascript{3-13,16-19}
 // tutorial16.js
 var CommentForm = React.createClass({
   handleSubmit: function(e) {
@@ -489,7 +495,6 @@ var CommentForm = React.createClass({
     // TODO: send request to the server
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
-    return;
   },
   render: function() {
     return (
@@ -571,7 +576,6 @@ var CommentForm = React.createClass({
     this.props.onCommentSubmit({author: author, text: text});
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
-    return;
   },
   render: function() {
     return (

docs/docs/videos.md

@@ -96,6 +96,11 @@ A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking i
 
 By [Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke)
 
+### Backbone + React + Middleman Screencast
+<iframe width="650" height="315" src="//www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
+
+Backbone is a great way in interface a REST API with React. This screencast shows how to integate the two using [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman is the framework used in this example but could easily be replaced with other frameworks. A supported template of this can be found [here](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
+
 ### Developing User Interfaces With React - Super VanJS
 
 <iframe width="650" height="315" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
@@ -127,3 +132,17 @@ by [Stoyan Stefanov](http://www.phpied.com/)
 <iframe width="650" height="315" src="//www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
 
 Facebook engineers [Bill Fisher](http://twitter.com/fisherwebdev) and [Jing Chen](http://twitter.com/jingc) talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
+
+### Server-Side Rendering of Isomorphic Apps at SoundCloud
+
+<iframe src="//player.vimeo.com/video/108488724" width="500" height="281" frameborder="0" allowfullscreen></iframe>
+
+Walk-through by [Andres Suarez](https://github.com/zertosh) on how [SoundCloud](https://developers.soundcloud.com/blog/) is using React and Flux for server-side rendering.
+
+[Slides and sample code](https://github.com/zertosh/ssr-demo-kit)
+
+### Introducing React Native (+Playlist) - React.js Conf 2015
+
+<iframe width="650" height="315" src="//www.youtube.com/watch?v=KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
+
+[Tom Occhino](https://twitter.com/tomocchino) reviews the past and present of React in 2015, and teases where it's going next.

docs/tips/03-if-else-in-JSX.md

@@ -24,7 +24,7 @@ This means that `if` statements don't fit in. Take this example:
 <div id={if (condition) { 'msg' }}>Hello World!</div>
 
 // Is transformed to this JS:
-React.createElement("dov", {id: if (condition) { 'msg' }}, "Hello World!");
+React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
 ```
 
 That's not valid JS. You probably want to make use of a ternary expression:

docs/tips/05-maximum-number-of-jsx-root-nodes.md

@@ -9,4 +9,4 @@ next: style-props-value-px.html
 
 Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.
 
-Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.
+Don't forget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.

docs/tips/06-style-props-value-px.md

@@ -29,6 +29,7 @@ Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of pr
 - `opacity`
 - `order`
 - `orphans`
+- `strokeOpacity`
 - `widows`
 - `zIndex`
 - `zoom`

docs/tips/14-communicate-between-components.md

@@ -38,4 +38,4 @@ React.render(
 
 Notice the use of `bind(this, arg1, arg2, ...)`: we're simply passing more arguments to `handleClick`. This is not a new React concept; it's just JavaScript.
 
-For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event, call `setState()`.
+For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and call `setState()` when you receive an event.

docs/tips/17-children-undefined.md

@@ -4,6 +4,7 @@ title: this.props.children undefined
 layout: tips
 permalink: children-undefined.html
 prev: references-to-components.html
+next: use-react-with-other-libraries.html
 ---
 
 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:

docs/tips/18-use-react-with-other-libraries.md

@@ -0,0 +1,38 @@
+---
+id: use-react-with-other-libraries
+title: Use React with Other Libraries
+layout: tips
+permalink: use-react-with-other-libraries.html
+prev: children-undefined.html
+---
+
+You don't have to go full React. The component [lifecycle events](/react/docs/component-specs.html#lifecycle-methods), especially `componentDidMount` and `componentDidUpdate`, are good places to put your other libraries' logic.
+
+```js
+var App = React.createClass({
+  getInitialState: function() {
+    return {myModel: new myBackboneModel({items: [1, 2, 3]})};
+  },
+
+  componentDidMount: function() {
+    $(this.refs.placeholder.getDOMNode()).append($('<span />'));
+  },
+
+  componentWillUnmount: function() {
+    // Clean up work here.
+  },
+
+  shouldComponentUpdate: function() {
+    // Let's just never update this component again.
+    return false;
+  },
+
+  render: function() {
+    return <div ref="placeholder"/>;
+  }
+});
+
+React.render(<App />, mountNode);
+```
+
+You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.

examples/basic-commonjs/package.json

@@ -3,10 +3,10 @@
   "description": "Basic example of using React with CommonJS",
   "main": "index.js",
   "devDependencies": {
-    "envify": "~1.2.1",
-    "react": "~0.10.0",
-    "reactify": "~0.13.1",
-    "browserify": "~3.44.2"
+    "browserify": "^6.3.3",
+    "envify": "^3.2.0",
+    "react": "^0.12.0",
+    "reactify": "^0.17.1"
   },
   "scripts": {
     "build": "browserify --debug --transform reactify index.js > bundle.js"

main.js

@@ -2,6 +2,7 @@
 
 var visitors = require('./vendor/fbtransform/visitors');
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var Buffer = require('buffer').Buffer;
 
 module.exports = {
@@ -37,7 +38,11 @@ function innerTransform(input, options) {
     visitorSets.push('harmony');
   }
   if (options.stripTypes) {
-    visitorSets.push('type-annotations');
+    // Stripping types needs to happen before the other transforms
+    // unfortunately, due to bad interactions. For example,
+    // es6-rest-param-visitors conflict with stripping rest param type
+    // annotation
+    input = transform(typesSyntax.visitorList, input, options).code;
   }
 
   var visitorList = visitors.getVisitorsBySet(visitorSets);

npm-react-tools/README.md

@@ -6,6 +6,8 @@ This package compliments the usage of [React](http://facebook.github.io/react/).
 
 This package installs a `jsx` executable that can be used to transform JSX into vanilla JS. This is often used as part of a build step. This transform is also exposed as an API.
 
+By default JSX files with a `.js` extension are transformed. Use the `-x` option to transform files with a `.jsx` extension.
+
 ## Usage
 
 ### Command Line
@@ -18,7 +20,7 @@ This package installs a `jsx` executable that can be used to transform JSX into
       -V, --version                            output the version number
       -c, --config [file]                      JSON configuration file (no file or - means STDIN)
       -w, --watch                              Continually rebuild
-      -x, --extension <js | coffee | ...>      File extension to assume when resolving module identifiers
+      -x, --extension <js | coffee | ...>      File extension to assume when resolving module identifiers (default: js)
       --relativize                             Rewrite all module identifiers to be relative
       --follow-requires                        Scan modules for required dependencies
       --cache-dir <directory>                  Alternate directory to use for disk cache

npm-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react",
   "description": "React is a JavaScript library for building user interfaces.",
-  "version": "0.12.0-rc1",
+  "version": "0.12.2",
   "keywords": [
     "react"
   ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-tools",
   "description": "A set of complementary tools to React, including the JSX transformer.",
-  "version": "0.12.0-rc1",
+  "version": "0.12.2",
   "keywords": [
     "react",
     "jsx",
@@ -27,8 +27,7 @@
   },
   "dependencies": {
     "commoner": "^0.10.0",
-    "esprima-fb": "^6001.1.0-dev-harmony-fb",
-    "jstransform": "^6.3.2"
+    "jstransform": "^8.2.0"
   },
   "devDependencies": {
     "benchmark": "~1.0.0",

perf/tests/propTypes.js

@@ -18,7 +18,7 @@ exports.setup = function(){
       number: React.PropTypes.number,
       string: React.PropTypes.string.isRequired,
       func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
+      node: React.PropTypes.node.isRequired,
       instanceOf: React.PropTypes.instanceOf(Thing).isRequired
     },
     render: function() {
@@ -33,14 +33,14 @@ exports.setup = function(){
       number: React.PropTypes.number,
       string: React.PropTypes.string.isRequired,
       func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
-      renderable2: React.PropTypes.renderable.isRequired,
+      node: React.PropTypes.node.isRequired,
+      node2: React.PropTypes.node.isRequired,
       instanceOf: React.PropTypes.instanceOf(Thing).isRequired,
-      component: React.PropTypes.component.isRequired
+      element: React.PropTypes.element.isRequired
     },
     render: function(){
       return React.DOM.li(null,
-        this.props.number + this.props.string + this.props.renderable
+        this.props.number + this.props.string + this.props.node
       );
     }
   });
@@ -63,10 +63,10 @@ exports.fn = function(){
       number: Math.random(),
       string: 'banana banana banana',
       func: function() { return 'this is a function'; },
-      renderable: 'renderable string',
-      renderable2: [MyReactComponent(), 'a string'],
+      node: 'renderable string',
+      node2: [MyReactComponent(), 'a string'],
       instanceOf: new Thing,
-      component: MyReactComponent()
+      element: MyReactComponent()
     }));
   };
 

src/browser/ui/React.js

@@ -179,6 +179,6 @@ if (__DEV__) {
 
 // Version exists only in the open-source version of React, not in Facebook's
 // internal version.
-React.version = '0.12.0-rc1';
+React.version = '0.12.2';
 
 module.exports = React;

src/browser/ui/dom/CSSProperty.js

@@ -16,7 +16,6 @@
  */
 var isUnitlessNumber = {
   columnCount: true,
-  fillOpacity: true,
   flex: true,
   flexGrow: true,
   flexShrink: true,
@@ -28,7 +27,11 @@ var isUnitlessNumber = {
   orphans: true,
   widows: true,
   zIndex: true,
-  zoom: true
+  zoom: true,
+
+  // SVG-related properties
+  fillOpacity: true,
+  strokeOpacity: true
 };
 
 /**

src/browser/ui/dom/HTMLDOMPropertyConfig.js

@@ -88,7 +88,11 @@ var HTMLDOMPropertyConfig = {
     draggable: null,
     encType: null,
     form: MUST_USE_ATTRIBUTE,
+    formAction: MUST_USE_ATTRIBUTE,
+    formEncType: MUST_USE_ATTRIBUTE,
+    formMethod: MUST_USE_ATTRIBUTE,
     formNoValidate: HAS_BOOLEAN_VALUE,
+    formTarget: MUST_USE_ATTRIBUTE,
     frameBorder: MUST_USE_ATTRIBUTE,
     height: MUST_USE_ATTRIBUTE,
     hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
@@ -103,6 +107,8 @@ var HTMLDOMPropertyConfig = {
     list: MUST_USE_ATTRIBUTE,
     loop: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
     manifest: MUST_USE_ATTRIBUTE,
+    marginHeight: null,
+    marginWidth: null,
     max: null,
     maxLength: MUST_USE_ATTRIBUTE,
     media: MUST_USE_ATTRIBUTE,

src/core/ReactElement.js

@@ -174,7 +174,7 @@ ReactElement.createElement = function(type, config, children) {
   }
 
   // Resolve default props
-  if (type.defaultProps) {
+  if (type && type.defaultProps) {
     var defaultProps = type.defaultProps;
     for (propName in defaultProps) {
       if (typeof props[propName] === 'undefined') {

src/core/ReactElementValidator.js

@@ -23,6 +23,7 @@ var ReactPropTypeLocations = require('ReactPropTypeLocations');
 var ReactCurrentOwner = require('ReactCurrentOwner');
 
 var monitorCodeUse = require('monitorCodeUse');
+var warning = require('warning');
 
 /**
  * Warn if there's no key explicitly set on dynamic arrays of children or
@@ -220,6 +221,15 @@ function checkPropTypes(componentName, propTypes, props, location) {
 var ReactElementValidator = {
 
   createElement: function(type, props, children) {
+    // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+    warning(
+      type != null,
+      'React.createElement: type should not be null or undefined. It should ' +
+        'be a string (for DOM elements) or a ReactClass (for composite ' +
+        'components).'
+    );
+
     var element = ReactElement.createElement.apply(this, arguments);
 
     // The result can be nullish if a mock or a custom function is used.
@@ -232,22 +242,24 @@ var ReactElementValidator = {
       validateChildKeys(arguments[i], type);
     }
 
-    var name = type.displayName;
-    if (type.propTypes) {
-      checkPropTypes(
-        name,
-        type.propTypes,
-        element.props,
-        ReactPropTypeLocations.prop
-      );
-    }
-    if (type.contextTypes) {
-      checkPropTypes(
-        name,
-        type.contextTypes,
-        element._context,
-        ReactPropTypeLocations.context
-      );
+    if (type) {
+      var name = type.displayName;
+      if (type.propTypes) {
+        checkPropTypes(
+          name,
+          type.propTypes,
+          element.props,
+          ReactPropTypeLocations.prop
+        );
+      }
+      if (type.contextTypes) {
+        checkPropTypes(
+          name,
+          type.contextTypes,
+          element._context,
+          ReactPropTypeLocations.context
+        );
+      }
     }
     return element;
   },

src/core/ReactNativeComponent.js

@@ -63,7 +63,7 @@ function createInstanceForTag(tag, props, parentType) {
 
 var ReactNativeComponent = {
   createInstanceForTag: createInstanceForTag,
-  injection: ReactNativeComponentInjection,
+  injection: ReactNativeComponentInjection
 };
 
 module.exports = ReactNativeComponent;

src/core/__tests__/ReactCompositeComponent-test.js

@@ -1483,4 +1483,25 @@ describe('ReactCompositeComponent', function() {
     );
   });
 
+  it('gives a helpful error when passing null or undefined', function() {
+    spyOn(console, 'warn');
+    React.createElement(undefined);
+    React.createElement(null);
+    expect(console.warn.calls.length).toBe(2);
+    expect(console.warn.calls[0].args[0]).toBe(
+      'Warning: React.createElement: type should not be null or undefined. ' +
+      'It should be a string (for DOM elements) or a ReactClass (for ' +
+      'composite components).'
+    );
+    expect(console.warn.calls[1].args[0]).toBe(
+      'Warning: React.createElement: type should not be null or undefined. ' +
+      'It should be a string (for DOM elements) or a ReactClass (for ' +
+      'composite components).'
+    );
+    React.createElement('div');
+    expect(console.warn.calls.length).toBe(2);
+
+    expect(() => React.createElement(undefined)).not.toThrow()
+  });
+
 });

vendor/browser-transforms.js

@@ -13,6 +13,7 @@
 
 var buffer = require('buffer');
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var visitors = require('./fbtransform/visitors');
 
 var headEl;
@@ -42,6 +43,14 @@ function transformReact(source, options) {
     visitorList = visitors.transformVisitors.react;
   }
 
+  if (options.stripTypes) {
+    // Stripping types needs to happen before the other transforms
+    // unfortunately, due to bad interactions. For example,
+    // es6-rest-param-visitors conflict with stripping rest param type
+    // annotation
+    source = transform(typesSyntax.visitorList, source, options).code;
+  }
+
   return transform(visitorList, source, {
     sourceMap: supportsAccessors && options.sourceMap
   });
@@ -240,6 +249,9 @@ function loadScripts(scripts) {
     if (/;harmony=true(;|$)/.test(script.type)) {
       options.harmony = true
     }
+    if (/;stripTypes=true(;|$)/.test(script.type)) {
+      options.stripTypes = true;
+    }
 
     // script.async is always true for non-javascript script tags
     var async = script.hasAttribute('async');

vendor/fbtransform/syntax.js

@@ -4,6 +4,7 @@
 "use strict";
 
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var visitors = require('./visitors');
 
 /**
@@ -16,6 +17,12 @@ var visitors = require('./visitors');
 function transformAll(source, options, excludes) {
   excludes = excludes || [];
 
+  // Stripping types needs to happen before the other transforms
+  // unfortunately, due to bad interactions. For example,
+  // es6-rest-param-visitors conflict with stripping rest param type
+  // annotation
+  source = transform(typesSyntax.visitorList, source, options).code;
+
   // The typechecker transform must run in a second pass in order to operate on
   // the entire source code -- so exclude it from the first pass
   var visitorsList = visitors.getAllVisitors(excludes.concat('typechecker'));

vendor/fbtransform/transforms/__tests__/react-displayName-test.js

@@ -24,7 +24,7 @@ describe('react displayName jsx', function() {
     var code = [
       '"use strict";',
       'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
+      '  displayName: "Whateva",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -34,7 +34,7 @@ describe('react displayName jsx', function() {
     var result = [
       '"use strict";',
       'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
+      '  displayName: "Whateva",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -54,7 +54,7 @@ describe('react displayName jsx', function() {
     ].join('\n');
 
     var result = [
-      'var Component = React.createClass({displayName: \'Component\',',
+      'var Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -76,7 +76,7 @@ describe('react displayName jsx', function() {
 
     var result = [
       'var Component;',
-      'Component = React.createClass({displayName: \'Component\',',
+      'Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -96,7 +96,7 @@ describe('react displayName jsx', function() {
     ].join('\n');
 
     var result = [
-      'exports.Component = React.createClass({displayName: \'Component\',',
+      'exports.Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -119,7 +119,7 @@ describe('react displayName jsx', function() {
 
     var result = [
       'exports = {',
-      '  Component: React.createClass({displayName: \'Component\',',
+      '  Component: React.createClass({displayName: "Component",',
       '    render: function() {',
       '      return null;',
       '    }',

vendor/fbtransform/transforms/react.js

@@ -9,7 +9,7 @@
 /*global exports:true*/
 "use strict";
 
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 var FALLBACK_TAGS = require('./xjs').knownTags;

vendor/fbtransform/transforms/reactDisplayName.js

@@ -9,7 +9,7 @@
 /*global exports:true*/
 "use strict";
 
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 function addDisplayName(displayName, object, state) {
@@ -33,7 +33,7 @@ function addDisplayName(displayName, object, state) {
 
     if (safe) {
       utils.catchup(object['arguments'][0].range[0] + 1, state);
-      utils.append("displayName: '" + displayName + "',", state);
+      utils.append('displayName: "' + displayName + '",', state);
     }
   }
 }

vendor/fbtransform/transforms/xjs.js

@@ -8,7 +8,7 @@
  */
 /*global exports:true*/
 "use strict";
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 var knownTags = {
@@ -231,7 +231,7 @@ function renderXJSExpressionContainer(traverse, object, isLast, path, state) {
 function quoteAttrName(attr) {
   // Quote invalid JS identifiers.
   if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
-    return "'" + attr + "'";
+    return '"' + attr + '"';
   }
   return attr;
 }

vendor/fbtransform/visitors.js

@@ -9,7 +9,6 @@ var es6Templates = require('jstransform/visitors/es6-template-visitors');
 var es7SpreadProperty = require('jstransform/visitors/es7-spread-property-visitors');
 var react = require('./transforms/react');
 var reactDisplayName = require('./transforms/reactDisplayName');
-var typesSyntax = require('jstransform/visitors/type-syntax');
 
 /**
  * Map from transformName => orderedListOfVisitors.
@@ -23,8 +22,7 @@ var transformVisitors = {
   'es6-rest-params': es6RestParameters.visitorList,
   'es6-templates': es6Templates.visitorList,
   'es7-spread-property': es7SpreadProperty.visitorList,
-  'react': react.visitorList.concat(reactDisplayName.visitorList),
-  'types': typesSyntax.visitorList
+  'react': react.visitorList.concat(reactDisplayName.visitorList)
 };
 
 var transformSets = {
@@ -40,9 +38,6 @@ var transformSets = {
   ],
   'react': [
     'react'
-  ],
-  'type-annotations': [
-    'types'
   ]
 };
 
@@ -50,7 +45,6 @@ var transformSets = {
  * Specifies the order in which each transform should run.
  */
 var transformRunOrder = [
-  'types',
   'es6-arrow-functions',
   'es6-object-concise-method',
   'es6-object-short-notation',