0.10rc blog post

emacs compatibility

.mailmap

@@ -29,6 +29,7 @@ Pete Hunt <floydophone@gmail.com>
 Pete Hunt <floydophone@gmail.com> <pete.hunt@fb.com>
 Pete Hunt <floydophone@gmail.com> <pete@instagram.com>
 Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
+Petri Lievonen <plievone@cc.hut.fi>
 Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
 Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
 Richard Livesey <Livesey7@hotmail.co.uk>

AUTHORS

@@ -88,6 +88,7 @@ Paul Seiffert <paul.seiffert@gmail.com>
 Paul Shen <paul@mnml0.com>
 Pete Hunt <floydophone@gmail.com>
 Peter Cottle <pcottle@fb.com>
+Petri Lievonen <plievone@cc.hut.fi>
 Pieter Vanderwerff <me@pieter.io>
 Richard D. Worth <rdworth@gmail.com>
 Richard Feldman <richard.t.feldman@gmail.com>
@@ -95,6 +96,7 @@ Richard Livesey <Livesey7@hotmail.co.uk>
 Sander Spies <sandermail@gmail.com>
 Sean Kinsey <oyvind@fb.com>
 Sebastian Markbåge <sebastian@calyptus.eu>
+Shaun Trennery <shaun.trennery@gmail.com>
 Simon Højberg <r.hackr@gmail.com>
 Stoyan Stefanov <ssttoo@ymail.com>
 Sundeep Malladi <sundeep.malladi@gmail.com>
@@ -105,4 +107,3 @@ Vjeux <vjeuxx@gmail.com>
 Wincent Colaiuta <win@wincent.com>
 Zach Bruggeman <zbruggeman@me.com>
 imagentleman <imagentlemail@gmail.com>
-plievone <plievone@cc.hut.fi>

CHANGELOG.md

@@ -12,6 +12,7 @@
 - On mouse wheel events, `deltaY` is no longer negated
 - When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
 - On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
+- `this.context` on components is now reserved for internal use by React
 
 #### New Features
 

docs/_config.yml

@@ -13,7 +13,7 @@ redcarpet:
 pygments: true
 name: React
 markdown: redcarpet
-react_version: 0.9.0-rc1
+react_version: 0.9.0
 description: A JavaScript library for building user interfaces
 relative_permalinks: true
 paginate: 5

docs/_css/react.scss

@@ -749,3 +749,19 @@ p code {
 div[data-twttr-id] iframe {
   margin: 10px auto !important;
 }
+
+/* Acknowledgements */
+
+.three-column {
+  @include clearfix;
+}
+
+.three-column > ul {
+  float: left;
+  margin-left: 30px;
+  width: 190px;
+}
+
+.three-column > ul:first-child {
+  margin-left: 20px;
+}

docs/_data/nav_docs.yml

@@ -4,12 +4,16 @@
     title: Getting Started
   - id: tutorial
     title: Tutorial
+  - id: thinking-in-react
+    title: Thinking in React
+- title: Community Resources
+  items:
   - id: videos
     title: Videos
   - id: complementary-tools
     title: Complementary Tools
-  - id: example-apps
-    title: Example Apps
+  - id: examples
+    title: Examples
 - title: Guides
   items:
   - id: why-react
@@ -49,8 +53,6 @@
       title: Test Utilities
     - id: clone-with-props
       title: Cloning Components
-  - id: examples
-    title: Examples
 - title: Reference
   items:
   - id: top-level-api

docs/_layouts/default.html

@@ -74,7 +74,10 @@
     {{ content }}
 
     <footer class="wrap">
-      <div class="left">A Facebook &amp; Instagram collaboration.</div>
+      <div class="left">
+        A Facebook &amp; Instagram collaboration.<br>
+        <a href="/react/acknowledgements.html">Acknowledgements</a>
+      </div>
       <div class="right">&copy; 2014 Facebook Inc.</div>
     </footer>
   </div>

docs/_posts/2014-02-16-react-v0.9-rc1.md

@@ -68,6 +68,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
 - On mouse wheel events, `deltaY` is no longer negated
 - When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
 - On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
+- `this.context` on components is now reserved for internal use by React
 
 #### New Features
 
@@ -86,7 +87,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
 - On all events, `.currentTarget` is now properly set
 - On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
 - On clipboard events, `.clipboardData` is now polyfilled in IE
-- On drag events, `.dragTransfer` is now present
+- On drag events, `.dataTransfer` is now present
 - Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
 - Added support for `onLoad` and `onError` on `<img>` elements
 - Added support for `onReset` on `<form>` elements

docs/_posts/2014-02-20-react-v0.9.md

@@ -76,6 +76,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
 - On mouse wheel events, `deltaY` is no longer negated
 - When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
 - On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
+- `this.context` on components is now reserved for internal use by React
 
 #### New Features
 
@@ -96,7 +97,7 @@ In cases where you want to preserve the space adjacent to a newline, you can wri
 - On all events, `.currentTarget` is now properly set
 - On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
 - On clipboard events, `.clipboardData` is now polyfilled in IE
-- On drag events, `.dragTransfer` is now present
+- On drag events, `.dataTransfer` is now present
 - Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
 - Added support for `onLoad` and `onError` on `<img>` elements
 - Added support for `onReset` on `<form>` elements

docs/_posts/2014-02-24-community-roundup-17.md

@@ -0,0 +1,95 @@
+---
+title: "Community Round-up #17"
+layout: post
+author: Jonas Gebhardt
+---
+
+
+It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
+
+## React in the Real World
+
+### Facebook Lookback video editor
+Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
+
+### Russia's largest bank is now powered by React
+Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
+
+### Relato
+[Relato](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
+
+### Makona Editor
+
+ John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
+<figure>[![](/react/img/blog/makona-editor.png)](http://johnthethird.github.io/makona-editor/)</figure>
+
+### Create Chrome extensions using React
+React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
+
+
+### Twitter Streaming Client
+
+Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
+
+
+### Sproutsheet
+
+[Sproutsheet](http://sproutsheet.com/) is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.
+
+### Instant Domain Search
+[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
+
+
+### SVG-based graphical node editor
+[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](http://forresto.github.io/prototyping/react/) in React.
+ <figure>[![](/react/img/blog/react-svg-fbp.png)](http://forresto.github.io/prototyping/react/)</figure>
+
+
+### Ultimate Tic-Tac-Toe Game in React
+Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
+
+
+
+### ReactJS Gallery
+
+[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.
+
+Emanuele shared this awesome demo video with us:
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
+
+
+
+## React Components
+
+
+### Table Sorter
+[Table Sorter](http://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
+
+### Static-search
+
+Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
+
+### Lorem Ipsum component
+
+[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
+
+### Input with placeholder shim
+[react-input=placeholder](https://github.com/enigma-io/react-input-placeholder) by [enigma-io](https://github.com/enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
+
+### diContainer
+
+[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
+
+
+## React server rendering
+
+Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](http://twitter.com/hichaelmart)) walks through the necessary steps.
+
+Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
+
+
+
+## Random Tweet
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>

docs/_posts/2014-03-14-community-roundup-18.md

@@ -0,0 +1,106 @@
+---
+title: "Community Round-up #18"
+layout: post
+author: Jonas Gebhardt
+---
+
+In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
+
+## "Little framework BIG splash"
+
+Let's start with yet another refreshing introduction to React: Craig Savolainen ([@maedhr](https://twitter.com/maedhr)) walks through some first steps, demonstrating [how to build a Google Maps component](http://infinitemonkeys.influitive.com/little-framework-big-splash) using React.
+
+## Architecting your app with react
+
+Brandon Konkle ([@bkonkle](https://twitter.com/bkonkle))
+[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
+We're looking forward to part 2!
+
+> React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.
+>
+> [Read the full article...](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
+
+## React vs. async DOM manipulation
+
+Eliseu Monar ([@eliseumds](https://twitter.com/eliseumds))'s post "[ReactJS vs async concurrent rendering](http://eliseu.tk/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering)" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.
+
+
+
+## React, Scala and the Play Framework
+[Matthias Nehlsen](http://matthiasnehlsen.com/) wrote a detailed introductory piece on [React and the Play Framework](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/), including a helpful architectural diagram of a typical React app.
+
+Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.
+
+In [another article](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/), he walks us through the process of using React with scala.js to implement app-wide undo functionality.
+
+Also check out his [talk](http://m.ustream.tv/recorded/42780242) at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.
+
+## React and Backbone
+
+The folks over at [Venmo](https://venmo.com/) are using React in conjunction with Backbone.
+Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detailed piece](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) about why React and Backbone are "a fantastic pairing".
+
+## React vs. Ember
+
+Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
+
+
+## React and plain old HTML
+
+Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic](https://github.com/reactjs/react-magic), which leverages React to ajaxify plain old html pages and even [allows CSS transitions between pageloads](http://stuff.dan.cx/facebook/react-hacks/magic/red.php).
+
+> React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.
+>
+> [Check out the project on GitHub...](https://github.com/reactjs/react-magic)
+
+On a related note, [Reactize](https://turbo-react.herokuapp.com/) by Ross Allen ([@ssorallen](https://twitter.com/ssorallen)) is a similarly awesome project: A wrapper for Rails' [Turbolinks](https://github.com/rails/turbolinks/), which seems to have inspired John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) to then create [a server-rendered version using the JSX transformer in Rails middleware](http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/).
+
+## React and Object.observe
+Check out [François de Campredon](https://github.com/fdecampredon)'s implementation of [TodoMVC based on React and ES6's Object.observe](https://github.com/fdecampredon/react-observe-todomvc/).
+
+
+## React and Angular
+
+Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [explains why he "decided to go with React instead of Angular.js"](https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE).
+
+### ng-React Update
+
+[David Chang](https://github.com/davidchang) works through some performance improvements of his [ngReact](https://github.com/davidchang/ngReact) project. His post ["ng-React Update - React 0.9 and Angular Track By"](http://davidandsuzi.com/ngreact-update/) includes some helpful advice on boosting render performance for Angular components.
+
+> Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.
+>
+> That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.
+>
+>[Read the full post...](http://davidandsuzi.com/ngreact-update/)
+
+
+React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
+
+## React and Web Components
+
+Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoughts regarding [parallels between React and Web Components](http://jonykrau.se/posts/the-value-of-react), highlighting the value of React's ability to render pages on the server practically for free.
+
+## Immutable React
+
+[Peter Hausel](http://pk11.kinja.com/) shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to [mori](https://npmjs.org/package/mori)), really taking advantage of the framework's one-way reactive data binding:
+
+> Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.
+
+> [Read the full post](http://tech.kinja.com/immutable-react-1495205675)
+
+
+## D3 and React
+
+[Ben Smith](http://10consulting.com/) built some great SVG-based charting components using a little less of D3 and a little more of React: [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)
+
+## Om and React
+Josh Haberman ([@joshhaberman](https://twitter.com/JoshHaberman)) discusses performance differences between React, Om and traditional MVC frameworks in "[A closer look at OM vs React performance](http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html)".
+
+Speaking of Om: [Omchaya](https://github.com/sgrove/omchaya) by Sean Grove ([@sgrove](https://twitter.com/sgrove)) is a neat Cljs/Om example project.
+
+
+## Random Tweets
+
+<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>

docs/_posts/2014-03-19-react-v0.10-rc1.md

@@ -0,0 +1,71 @@
+---
+title: React v0.10 RC
+layout: post
+author: Paul O’Shannessy
+---
+
+[v0.9 has only been out for a month](http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
+
+The release candidate is available for download from the CDN:
+
+* **React**
+  Dev build with warnings: <http://fb.me/react-0.10.0-rc1.js>
+  Minified build for production: <http://fb.me/react-0.10.0-rc1.min.js>
+* **React with Add-Ons**
+  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0-rc1.js>
+  Minified build for production: <http://fb.me/react-with-addons-0.10.0-rc1.min.js>
+* **In-Browser JSX transformer**
+  <http://fb.me/JSXTransformer-0.10.0-rc1.js>
+
+We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Clone On Mount
+
+The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
+
+In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
+
+Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
+
+```js
+// This is a common pattern. However instance here really refers to a
+// "descriptor", not necessarily the mounted instance.
+var instance = <MyComponent/>;
+React.renderComponent(instance);
+// ...
+instance.setProps(...);
+
+// The change here is very simple. The return value of renderComponent will be
+// the mounted instance.
+var instance = React.renderComponent(<MyComponent/>)
+// ...
+instance.setProps(...);
+```
+
+These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
+
+The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
+
+## Changelog
+
+### React Core
+
+#### New Features
+* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`) - `React.renderComponentToStaticMarkup`
+* Added support for more attributes:
+  * `srcSet` for `<img>` to images at different pixel ratios
+  * `textAnchor` for SVG
+
+#### Bug Fixes
+* Ensure all void elements don’t insert a closing tag into the markup.
+* Ensure `className={false}` behaves consistently
+* Ensure `this.refs` is defined, even if no refs are specified.
+
+### Addons
+
+* `update` function to deal with immutable data.
+
+### react-tools
+* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).

docs/acknowledgements.md

@@ -0,0 +1,127 @@
+---
+id: acknowledgements
+title: Acknowledgements
+layout: single
+---
+
+We'd like to thank all of our contributors:
+
+<div class="three-column">
+  <ul>
+    <li>Alan deLevie</li>
+    <li>Alex Zelenskiy</li>
+    <li>Alexander Solovyov</li>
+    <li>Andreas Svensson</li>
+    <li>Andrew Davey</li>
+    <li>Andrew Zich</li>
+    <li>Andrey Popp</li>
+    <li>Ayman Osman</li>
+    <li>Ben Alpert</li>
+    <li>Ben Newman</li>
+    <li>Ben Ripkens</li>
+    <li>Bob Eagan</li>
+    <li>Brian Cooke</li>
+    <li>Brian Kim</li>
+    <li>Brian Rue</li>
+    <li>Cam Spiers</li>
+    <li>Cat Chen</li>
+    <li>Cheng Lou</li>
+    <li>Christian Roman</li>
+    <li>Christoph Pojer</li>
+    <li>Clay Allsopp</li>
+    <li>Connor McSheffrey</li>
+    <li>Dan Schafer</li>
+    <li>Daniel Gasienica</li>
+    <li>Daniel Lo Nigro</li>
+    <li>Daniel Miladinov</li>
+    <li>Danny Ben-David</li>
+    <li>David Hellsing</li>
+    <li>David Hu</li>
+    <li>Dustin Getz</li>
+    <li>Eric Clemmons</li>
+    <li>Eric Schoffstall</li>
+    <li>Fabio M. Costa</li>
+    <li>Felipe Oliveira Carvalho</li>
+    <li>Felix Kling</li>
+    <li>Fernando Correia</li>
+    <li>Greg Roodt</li>
+  </ul>
+  <ul>
+    <li>Guido Bouman</li>
+    <li>Harry Hull</li>
+    <li>Hugo Jobling</li>
+    <li>Ian Obermiller</li>
+    <li>Ingvar Stepanyan</li>
+    <li>Isaac Salier-Hellendag</li>
+    <li>Ivan Kozik</li>
+    <li>Jakub Malinowski</li>
+    <li>James Ide</li>
+    <li>Jamie Wong</li>
+    <li>Jamison Dance</li>
+    <li>Jan Kassens</li>
+    <li>Jared Forsyth</li>
+    <li>Jason Bonta</li>
+    <li>Jason Trill</li>
+    <li>Jean Lauliac</li>
+    <li>Jeff Morrison</li>
+    <li>Jeffrey Lin</li>
+    <li>Jignesh Kakadiya</li>
+    <li>Johannes Baiter</li>
+    <li>John Watson</li>
+    <li>Jonas Gebhardt</li>
+    <li>Jonathan Hsu</li>
+    <li>Jordan Walke</li>
+    <li>Josh Duck</li>
+    <li>Jun Wu</li>
+    <li>Keito Uchiyama</li>
+    <li>Kit Randel</li>
+    <li>Kunal Mehta</li>
+    <li>Laurence Rowe</li>
+    <li>Levi McCallum</li>
+    <li>Logan Allen</li>
+    <li>Luigy Leon</li>
+    <li>Mark Richardson</li>
+    <li>Marshall Roch</li>
+    <li>Martin Andert</li>
+    <li>Martin Konicek</li>
+  </ul>
+  <ul>
+    <li>Mathieu M-Gosselin</li>
+    <li>Matt Harrison</li>
+    <li>Matti Nelimarkka</li>
+    <li>Michal Srb</li>
+    <li>Mouad Debbar</li>
+    <li>Nadeesha Cabral</li>
+    <li>Nicholas Bergson-Shilcock</li>
+    <li>Nick Gavalas</li>
+    <li>Nick Thompson</li>
+    <li>Owen Coutts</li>
+    <li>Pascal Hartig</li>
+    <li>Paul O’Shannessy</li>
+    <li>Paul Seiffert</li>
+    <li>Paul Shen</li>
+    <li>Pete Hunt</li>
+    <li>Peter Cottle</li>
+    <li>Petri Lievonen</li>
+    <li>Pieter Vanderwerff</li>
+    <li>Richard D. Worth</li>
+    <li>Richard Feldman</li>
+    <li>Richard Livesey</li>
+    <li>Sander Spies</li>
+    <li>Sean Kinsey</li>
+    <li>Sebastian Markbåge</li>
+    <li>Shaun Trennery</li>
+    <li>Simon Højberg</li>
+    <li>Stoyan Stefanov</li>
+    <li>Sundeep Malladi</li>
+    <li>Thomas Aylott</li>
+    <li>Timothy Yung</li>
+    <li>Tom Occhino</li>
+    <li>Vjeux</li>
+    <li>Wincent Colaiuta</li>
+    <li>Zach Bruggeman</li>
+    <li>imagentleman</li>
+  </ul>
+</div>
+
+In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the `react` package name on npm.

docs/docs/05-reusable-components.md

@@ -33,6 +33,10 @@ React.createClass({
     // A React component.
     optionalComponent: React.PropTypes.component,
 
+    // You can also declare that a prop is an instance of a class. This uses
+    // JS's instanceof operator.
+    optionalMessage: React.PropTypes.instanceOf(Message),
+
     // You can ensure that your prop is limited to specific values by treating
     // it as an enum.
     optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
@@ -40,7 +44,8 @@ React.createClass({
     // An object that could be one of many types
     optionalUnion: React.PropTypes.oneOfType([
       React.PropTypes.string,
-      React.PropTypes.number
+      React.PropTypes.number,
+      React.PropTypes.instanceOf(Message)
     ]),
 
     // An array of a certain type
@@ -52,10 +57,6 @@ React.createClass({
       fontSize: React.PropTypes.number
     }),
 
-    // You can also declare that a prop is an instance of a class. This uses
-    // JS's instanceof operator.
-    someClass: React.PropTypes.instanceOf(SomeClass),
-
     // You can chain any of the above with isRequired to make sure a warning is
     // shown if the prop isn't provided.
     requiredFunc: React.PropTypes.func.isRequired,

docs/docs/07-working-with-the-browser.md

@@ -131,10 +131,12 @@ The unminified build of React needs the following from [paulmillr's console-poly
 
 * `console.*`
 
+When using HTML5 elements in IE8 including `<section>`, `<article>`, `<nav>`, `<header>`, and `<footer>`, it's also necessary to include [html5shiv](https://github.com/aFarkas/html5shiv) or a similar script.
+
 
 ### Cross-browser Issues
 
-Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround.
+Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for.
 
 
 #### onScroll event on IE8

docs/docs/08-tooling-integration.md

@@ -38,14 +38,7 @@ If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-t
 
 ### Helpful Open-Source Projects
 
-The open-source community has built tools that integrate JSX with several build systems.
-
-* [reactify](https://github.com/andreypopp/reactify) - use JSX with [browserify](http://browserify.org/)
-* [grunt-react](https://github.com/ericclemmons/grunt-react) - [grunt](http://gruntjs.com/) task for JSX
-* [gulp-react](https://github.com/sindresorhus/gulp-react) - [gulp](http://gulpjs.com/) task for JSX
-* [jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin) - use JSX with [require.js](http://requirejs.org/) and precompile JSX files with r.js
-* [pyReact](https://github.com/facebook/react-python) - use JSX with [Python](http://www.python.org/)
-* [react-rails](https://github.com/facebook/react-rails) - use JSX with [Ruby on Rails](http://rubyonrails.org/)
+The open-source community has built tools that integrate JSX with several build systems. See [JSX integrations](/react/docs/complementary-tools.html#jsx-integrations) for the full list.
 
 
 ### Syntax Highlighting & Linting
@@ -53,5 +46,6 @@ The open-source community has built tools that integrate JSX with several build
 * Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
   * [JSX syntax highlighting](https://github.com/yungsters/sublime/blob/master/tmLanguage/JavaScript%20(JSX\).tmLanguage) is available for Sublime Text and other editors
     that support `*.tmLanguage`.
+  * [web-mode.el](http://web-mode.org) is an autonomous emacs major mode that indents and highlights JSX
 * Linting provides accurate line numbers after compiling without sourcemaps.
 * Elements use standard scoping so linters can find usage of out-of-scope components.

docs/docs/09.1-animation.md

@@ -20,7 +20,7 @@ React provides a `ReactTransitionGroup` addon component as a low-level API for a
 ```javascript{22-24}
 /** @jsx React.DOM */
 
-var ReactCSSTransitionGroup = React.addons.TransitionGroup;
+var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 
 var TodoList = React.createClass({
   getInitialState: function() {

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

@@ -4,7 +4,6 @@ title: Cloning Components
 layout: docs
 permalink: clone-with-props.html
 prev: test-utils.html
-next: examples.html
 ---
 
 In rare situations a component may want to change the props of a component that it doesn't own (like changing the `className` of a component passed as `this.props.children`). Other times it may want to make multiple copies of a component passed to it. `cloneWithProps()` makes this possible.

docs/docs/10-examples.md

@@ -1,21 +0,0 @@
----
-id: examples
-title: Examples
-layout: docs
-permalink: examples.html
-prev: class-name-manipulation.html
----
-
-### Production Apps
-
-* All of [Instagram.com](http://instagram.com/) is built on React.
-* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
-* [Khan Academy](http://khanacademy.org/) is using React for most new JS development.
-
-
-### Sample Code
-
-* We've included [a step-by-step comment box tutorial](/react/docs/tutorial.html).
-* [The React starter kit](/react/downloads.html) includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/).
-* [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
-* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.

docs/docs/complementary-tools.md

@@ -4,7 +4,7 @@ title: Complementary Tools
 layout: docs
 permalink: complementary-tools.html
 prev: videos.html
-next: example-apps.html
+next: examples.html
 ---
 
 React is a small library that does one thing well. Here's a list of tools we've found that work really well with React when building applications.
@@ -13,45 +13,48 @@ If you want your project on this list, or think one of these projects should be
 
 ### JSX integrations
 
-  * **[jsxhint](https://npmjs.org/package/jsxhint)** [JSHint](http://jshint.com/) (linting) support
-  * **[reactify](https://npmjs.org/package/reactify)** [Browserify](http://browserify.org/) transform
-  * **[node-jsx](https://npmjs.org/package/node-jsx)** Native [Node](http://nodejs.org/) support
-  * **[jsx-loader](https://npmjs.org/package/jsx-loader)** Loader for [webpack](http://webpack.github.io/)
-  * **[grunt-react](https://npmjs.org/package/grunt-react)** [GruntJS](http://gruntjs.com/) task
-  * **[gulp-react](https://npmjs.org/package/gulp-react)** [GulpJS](http://gulpjs.com/) plugin
-  * **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin)** [RequireJS](http://requirejs.org/) plugin
-  * **[react-meteor](https://github.com/benjamn/react-meteor)** [Meteor](http://www.meteor.com/) plugin
+  * **[jsxhint](https://npmjs.org/package/jsxhint)** [JSHint](http://jshint.com/) (linting) support.
+  * **[reactify](https://npmjs.org/package/reactify)** [Browserify](http://browserify.org/) transform.
+  * **[node-jsx](https://npmjs.org/package/node-jsx)** Native [Node](http://nodejs.org/) support.
+  * **[jsx-loader](https://npmjs.org/package/jsx-loader)** Loader for [webpack](http://webpack.github.io/).
+  * **[grunt-react](https://npmjs.org/package/grunt-react)** [GruntJS](http://gruntjs.com/) task.
+  * **[gulp-react](https://npmjs.org/package/gulp-react)** [GulpJS](http://gulpjs.com/) plugin.
+  * **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin)** [RequireJS](http://requirejs.org/) plugin.
+  * **[react-meteor](https://github.com/benjamn/react-meteor)** [Meteor](http://www.meteor.com/) plugin.
+  * **[pyReact](https://github.com/facebook/react-python)** [Python](http://www.python.org/) bridge to JSX.
+  * **[react-rails](https://github.com/facebook/react-rails)** Ruby gem for using JSX with [Ruby on Rails](http://rubyonrails.org/).
 
 ### Full-stack starter kits
 
-  * **[react-quickstart](https://github.com/andreypopp/react-quickstart)** Quick-start template for `express`, `browserify`, `react-router-component` and `react-async` (**includes "isomorphic" server rendering**)
-  * **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack)** [Yeoman](http://yeoman.io/) generator for React and Webpack
-  * **[Genesis Skeleton](http://genesis-skeleton.com/)** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React)
-  * **[react-starter-template](https://github.com/johnthethird/react-starter-template)** Starter template with Gulp, Webpack and Bootstrap
-  * **[react-brunch](https://npmjs.org/package/react-brunch)** [Brunch](http://brunch.io/) plugin
-  * **[react-browserify-template](https://github.com/petehunt/react-browserify-template)** Quick-start with Browserify
+  * **[react-quickstart](https://github.com/andreypopp/react-quickstart)** Quick-start template for `express`, `browserify`, `react-router-component` and `react-async` (**includes "isomorphic" server rendering**).
+  * **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack)** [Yeoman](http://yeoman.io/) generator for React and Webpack.
+  * **[Genesis Skeleton](http://genesis-skeleton.com/)** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React).
+  * **[react-starter-template](https://github.com/johnthethird/react-starter-template)** Starter template with Gulp, Webpack and Bootstrap.
+  * **[react-brunch](https://npmjs.org/package/react-brunch)** [Brunch](http://brunch.io/) plugin.
+  * **[react-browserify-template](https://github.com/petehunt/react-browserify-template)** Quick-start with Browserify.
 
 ### Routing
 
-  * **[director](https://github.com/flatiron/director)** (for an example see [TodoMVC](https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/react/js/app.jsx#L29))
-  * **[Backbone](http://backbonejs.org/)** (for an example see [github-issues-viewer](https://github.com/jaredly/github-issues-viewer))
-  * **[react-router](https://github.com/jaredly/react-router)** (example coming soon)
-  * **[react-router-component](https://github.com/andreypopp/react-router-component)**
+  * **[director](https://github.com/flatiron/director)** (For an example see [TodoMVC](https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/react/js/app.jsx#L29)).
+  * **[Backbone](http://backbonejs.org/)** (For an example see [github-issues-viewer](https://github.com/jaredly/github-issues-viewer)).
+  * **[react-router](https://github.com/jaredly/react-router)** (Example coming soon).
+  * **[react-router-component](http://andreypopp.viewdocs.io/react-router-component)**
 
 ### Model management
 
-  * **[react.backbone](https://github.com/usepropeller/react.backbone)** Use [Backbone](http://backbonejs.org) models with React
-  * **[cortex](https://github.com/mquan/cortex/)** A JavaScript library for centrally managing data with React
-  * **[avers](https://github.com/wereHamster/avers)** A modern client-side model abstraction library
+  * **[react.backbone](https://github.com/usepropeller/react.backbone)** Use [Backbone](http://backbonejs.org) models with React.
+  * **[cortex](https://github.com/mquan/cortex/)** A JavaScript library for centrally managing data with React.
+  * **[avers](https://github.com/wereHamster/avers)** A modern client-side model abstraction library.
 
 ### Data fetching
 
-  * **[react-async](https://github.com/andreypopp/react-async)** Adds a `getInitialStateAsync(cb)` method suitable for data fetching on both the client and the server.
+  * **[react-async](http://andreypopp.viewdocs.io/react-async)** Adds a `getInitialStateAsync(cb)` method suitable for data fetching on both the client and the server.
   * **[superagent](http://visionmedia.github.io/superagent/)** A lightweight "isomorphic" library for AJAX requests.
 
 ### UI components
 
-  * **[react-bootstrap](https://github.com/stevoland/react-bootstrap)** Bootstrap 3 components built with React
-  * **[react-topcoat](https://github.com/plaxdan/react-topcoat)** Topcoat components built with React
-  * **[react-lorem-component](https://github.com/martinandert/react-lorem-component)** Lorem Ipsum placeholder component
-  * **[wingspan-forms](https://github.com/wingspan/wingspan-forms)** React library for dynamic forms & grids; widgets provided by KendoUI
+  * **[react-bootstrap](https://github.com/stevoland/react-bootstrap)** Bootstrap 3 components built with React.
+  * **[react-topcoat](https://github.com/plaxdan/react-topcoat)** Topcoat components built with React.
+  * **[react-lorem-component](https://github.com/martinandert/react-lorem-component)** Lorem Ipsum placeholder component.
+  * **[wingspan-forms](https://github.com/wingspan/wingspan-forms)** React library for dynamic forms & grids; widgets provided by KendoUI.
+  * **[react-translate-component](https://github.com/martinandert/react-translate-component)** React component for i18n.

docs/docs/example-apps.md

@@ -1,14 +0,0 @@
----
-id: example-apps
-title: Example apps
-layout: docs
-permalink: example-apps.html
-prev: complementary-tools.html
----
-
-Here is a selection of open-source apps built with React.
-
-  * **[TodoMVC](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react/js)**
-  * **[Khan Academy question editor](https://github.com/khan/perseus)** (browse their GitHub account for many more production apps!)
-  * **[github-issues-viewer](https://github.com/jaredly/github-issues-viewer)**
-  * **[hn-react](https://github.com/prabirshrestha/hn-react)** Dead-simple Hacker News client in React

docs/docs/examples.md

@@ -0,0 +1,29 @@
+---
+id: examples
+title: Examples
+layout: docs
+permalink: examples.html
+prev: complementary-tools.html
+---
+
+### Production Apps
+
+* **[Instagram.com](http://instagram.com/)** is 100% built on React, both public site and internal tools.
+* **[Facebook.com](http://www.facebook.com/)**'s commenting interface, business management tools, [Lookback video editor](http://facebook.com/lookback/edit), page insights, and most, if not all, new JS development.
+* **[Khan Academy](http://khanacademy.org/)** uses React for most new JS development.
+* **[Shirtstarter](https://www.shirtstarter.com/)** is 100% built on React.
+* **[Sberbank](http://sberbank.ru/moscow/ru/person/)**, Russia's number one bank, is built with React.
+* **[The New York Times's 2014 Red Carpet Project](http://www.nytimes.com/interactive/2014/02/02/fashion/red-carpet-project.html?_r=0)** is built with React.
+
+### Sample Code
+
+* **[React starter kit](/react/downloads.html)** Includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/).
+* **[React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master)** Goes step-by-step from a static HTML mock to an interactive email reader, written in just one hour!
+* **[React server rendering example](https://github.com/mhart/react-server-example)** Demonstrates how to use React's server rendering capabilities.
+
+### Open-Source Demos
+
+* **[TodoMVC](https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react/js)**
+* **[Khan Academy question editor](https://github.com/khan/perseus)** (Browse their GitHub account for many more production apps!)
+* **[github-issue-viewer](https://github.com/jaredly/github-issues-viewer)**
+* **[hn-react](https://github.com/prabirshrestha/hn-react)** Dead-simple Hacker News client.

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

@@ -127,7 +127,7 @@ If you want to integrate with other JavaScript frameworks, set timers using `set
 
 > Note:
 >
-> Prior to v0.6, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
+> Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
 
 
 ### Updating: componentWillReceiveProps
@@ -204,7 +204,7 @@ Use this as an opportunity to operate on the DOM when the component has been upd
 
 > Note:
 >
-> Prior to v0.6, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
+> Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling `this.getDOMNode()`.
 
 
 ### Unmounting: componentWillUnmount

docs/docs/thinking-in-react.md

@@ -0,0 +1,147 @@
+---
+id: thinking-in-react
+title: Thinking in React
+layout: docs
+prev: tutorial.html
+next: videos.html
+---
+
+This was originally a [blog post](/react/blog/2013/11/05/thinking-in-react.html) from the [official React blog](/react/blog).
+
+React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It's scaled very well for us at Facebook and Instagram.
+
+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.
+
+## 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:
+
+![Mockup](/react/img/blog/thinking-in-react-mock.png)
+
+Our JSON API returns some data that looks like this:
+
+```
+[
+  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
+  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
+  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
+  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
+  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
+  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
+];
+```
+
+## Step 1: break the UI into a component hierarchy
+
+The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
+
+But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
+
+Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
+
+![Component diagram](/react/img/blog/thinking-in-react-components.png)
+
+You'll see here that we have five components in our simple app. I've italicized the data each component represents.
+
+  1. **`FilterableProductTable` (orange):** contains the entirety of the example
+  2. **`SearchBar` (blue):** receives all *user input*
+  3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
+  4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
+  5. **`ProductRow` (red):** displays a row for each *product*
+
+If you look at `ProductTable` you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own `ProductTableHeader` component.
+
+Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
+
+  * `FilterableProductTable`
+    * `SearchBar`
+    * `ProductTable`
+      * `ProductCategoryRow`
+      * `ProductRow`
+
+## Step 2: Build a static version in React
+
+<iframe width="100%" height="300" src="http://jsfiddle.net/6wQMG/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.
+
+To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.
+
+You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.
+
+At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
+
+Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
+
+### A brief interlude: props vs state
+
+There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
+
+## Step 3: Identify the minimal (but complete) representation of UI state
+
+To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
+
+To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
+
+Think of all of the pieces of data in our example application. We have:
+
+  * The original list of products
+  * The search text the user has entered
+  * The value of the checkbox
+  * The filtered list of products
+
+Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
+
+  1. Is it passed in from a parent via props? If so, it probably isn't state.
+  2. Does it change over time? If not, it probably isn't state.
+  3. Can you compute it based on any other state or props in your component? If so, it's not state.
+
+The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
+
+So finally, our state is:
+
+  * The search text the user has entered
+  * The value of the checkbox
+
+## Step 4: Identify where your state should live
+
+<iframe width="100%" height="300" src="http://jsfiddle.net/QvHnx/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.
+
+Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
+
+For each piece of state in your application:
+
+  * Identify every component that renders something based on that state.
+  * Find a common owner component (a single component above all the components that need the state in the hierarchy).
+  * Either the common owner or another component higher up in the hierarchy should own the state.
+  * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
+
+Let's run through this strategy for our application:
+
+  * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
+  * The common owner component is `FilterableProductTable`.
+  * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
+
+Cool, so we've decided that our state lives in `FilterableProductTable`. First, add a `getInitialState()` method to `FilterableProductTable` that returns `{filterText: '', inStockOnly: false}` to reflect the initial state of your application. Then pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
+
+You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see the data table is updated correctly.
+
+## Step 5: Add inverse data flow
+
+<iframe width="100%" height="300" src="http://jsfiddle.net/3Vs3Q/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`.
+
+React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called `ReactLink` to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.
+
+If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
+
+Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()` and the app will be updated.
+
+Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
+
+## And that's it
+
+Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

docs/docs/tutorial.md

@@ -3,10 +3,10 @@ id: tutorial
 title: Tutorial
 layout: docs
 prev: getting-started.html
-next: videos.html
+next: thinking-in-react.html
 ---
 
-We'll be building a simple, but realistic comments box that you can drop into a blog, similar to 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:
 
@@ -409,7 +409,7 @@ var CommentBox = React.createClass({
 });
 ```
 
-Here, `componentWillMount` is a method called automatically by React before 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 trivial to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
+Here, `componentWillMount` is a method called automatically by React before 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,16-17,31}
 // tutorial14.js

docs/docs/videos.md

@@ -3,7 +3,7 @@ id: videos
 title: Videos
 layout: docs
 permalink: videos.html
-prev: tutorial.html
+prev: thinking-in-react.html
 next: complementary-tools.html
 ---
 

docs/downloads.md

@@ -57,15 +57,27 @@ The JSX transformer used to support [XML syntax](/react/docs/jsx-in-depth.html)
 
 All scripts are also available via [CDNJS](http://cdnjs.com/libraries/react/).
 
-## Bower
+## npm
 
-```sh
-$ bower install --save react
-```
-
-## NPM
+To install the JSX transformer on your computer, run:
 
 ```sh
 $ npm install -g react-tools
 ```
 
+For more info about the `jsx` binary, see the [Getting Started](/react/docs/getting-started.html#offline-transform) guide.
+
+If you're using an npm-compatible packaging system like browserify or webpack, you can use the `react` package. After installing it using `npm install react` or adding `react` to `package.json`, you can use React:
+
+```js
+var React = require('react');
+React.renderComponent(...);
+```
+
+If you'd like to use any [add-ons](/react/docs/addons.html), use `var React = require('react/addons');` instead.
+
+## Bower
+
+```sh
+$ bower install --save react
+```

npm-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react",
   "description": "React is a JavaScript library for building user interfaces.",
-  "version": "0.9.0-rc1",
+  "version": "0.9.0",
   "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.9.0-rc1",
+  "version": "0.9.0",
   "keywords": [
     "react",
     "jsx",

src/browser/React.js

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