v0.3.3

var container = ...; // some DOM node
React.renderComponent(<div />, container);
React.renderComponent(<span />, container);

This should replace the rendered <div> with a <span>, effectively
reconciling at the root level.
(cherry picked from commit 100af48f53)

.editorconfig

@@ -2,16 +2,11 @@
 root = true
 
 [*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
 indent_style = space
-max_line_length = 80
+indent_size = 2
+end_of_line = lf
+charset = utf-8
 trim_trailing_whitespace = true
 
 [*.md]
-max_line_length = 0
 trim_trailing_whitespace = false
-
-[COMMIT_EDITMSG]
-max_line_length = 0

.gitattributes

@@ -1 +0,0 @@
-* text=auto

.gitignore

@@ -5,7 +5,6 @@ node_modules
 static
 .grunt
 _SpecRunner.html
-__benchmarks__
 build/
 .module-cache
 *.gem
@@ -13,9 +12,13 @@ docs/code
 docs/_site
 docs/.sass-cache
 docs/css/react.css
-docs/js/*
+docs/js/.module-cache
+docs/js/JSXTransformer.js
+docs/js/react.min.js
+docs/js/docs.js
+docs/js/jsx-compiler.js
+docs/js/live_editor.js
+docs/js/examples
 docs/downloads
 examples/shared/*.js
-test/the-files-to-test.generated.js
-*.log*
-chrome-user-data
+

.jshintrc

@@ -13,7 +13,6 @@
   "noempty": true,
   "nonstandard": true,
   "onecase": true,
-  "sub": true,
   "regexdash": true,
   "trailing": true,
   "undef": true,

.mailmap

@@ -1,62 +0,0 @@
-Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
-Bill Fisher <fisherwebdev@gmail.com>
-Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
-Christoph Pojer <christoph.pojer@gmail.com>
-Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
-Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
-Dan Schafer <dschafer@fb.com>
-Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
-Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
-Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
-Evan Coonrod <evan@paloalto.com>
-Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
-Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
-François-Xavier Bois <fxbois@gmail.com>
-Geert Pasteels <geert.pasteels@gmail.com>
-George A Sisco III <george.sisco@gmail.com>
-Harry Hull <harry.hull1@gmail.com>
-Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
-Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
-Irae Carvalho <irae@irae.pro.br>
-Jaime Mingo <j.mingov@3boll.com>
-James Brantly <james@jbrantly.com>
-Jan Kassens <jan@kassens.net> <jkassens@fb.com>
-Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
-Jason Trill <jason@jasontrill.com>
-Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
-Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
-Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
-Jonathan Hsu <jhiswin@gmail.com>
-Jordan Walke <jordojw@gmail.com>
-Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
-Josh Duck <josh@fb.com> <github@joshduck.com>
-Jun Wu <quark@lihdd.net>
-Keito Uchiyama <projects@keito.me> <keito@fb.com>
-Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
-Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
-Martin Andert <mandert@gmail.com>
-Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
-Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
-Nick Gavalas <njg57@cornell.edu>
-Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
-Paul O’Shannessy <paul@oshannessy.com> <poshannessy@fb.com>
-Paul Shen <paul@mnml0.com> <paulshen@fb.com>
-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>
-Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
-Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
-Ray <ray@tomo.im>
-Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
-Richard Livesey <Livesey7@hotmail.co.uk>
-Sander Spies <sandermail@gmail.com>
-Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
-Stoyan Stefanov <ssttoo@ymail.com>
-Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
-Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
-Vjeux <vjeuxx@gmail.com>
-Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
-Volkan Unsal <spocksplanet@gmail.com>
-Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>

.travis.yml

@@ -1,60 +1,3 @@
----
 language: node_js
 node_js:
-- '0.10'
-cache:
-  directories:
-  - node_modules
-script:
-- |
-    grunt $TEST_TYPE
-after_script:
-- |
-    if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
-      grunt build
-      curl \
-        -F "react=@build/react.js" \
-        -F "react.min=@build/react.min.js" \
-        -F "transformer=@build/JSXTransformer.js" \
-        -F "react-with-addons=@build/react-with-addons.js" \
-        -F "react-with-addons.min=@build/react-with-addons.min.js" \
-        -F "npm-react=@build/react.tgz" \
-        -F "npm-react-tools=@build/react-tools.tgz" \
-        -F "commit=$TRAVIS_COMMIT" \
-        -F "date=`git log --format='%ct' -1`" \
-        -F "pull_request=$TRAVIS_PULL_REQUEST" \
-        -F "token=$SECRET_TOKEN" \
-        -F "branch=$TRAVIS_BRANCH" \
-        $SERVER
-    fi
-env:
-  matrix:
-  - TEST_TYPE=test
-  - TEST_TYPE=lint
-  - TEST_TYPE=test:webdriver:saucelabs:modern
-  global:
-  # SERVER
-  - secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
-  # SECRET_TOKEN
-  - secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
-matrix:
-  fast_finish: true
-  allow_failures:
-    - env: TEST_TYPE=lint
-    - env: TEST_TYPE=test:coverage
-    - env: TEST_TYPE=perf:full
-    - env: TEST_TYPE=test:webdriver:saucelabs:modern
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie11
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie10
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie9
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie8
-    - env: TEST_TYPE=test:webdriver:saucelabs:ios
-    - env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=safari
-notifications:
-  irc:
-    use_notice: true
-    skip_join: true
-    on_success: change
-    on_failure: change
-    channels:
-    - chat.freenode.net#reactjs
+  - "0.10"

AUTHORS

@@ -1,178 +0,0 @@
-Adam Krebs <amk528@cs.nyu.edu>
-Adam Solove <asolove@gmail.com>
-Alan deLevie <adelevie@gmail.com>
-Alex Zelenskiy <azelenskiy@fb.com>
-Alexander Solovyov <alexander@solovyov.net>
-Andreas Svensson <andreas@syranide.com>
-Andrew Davey <andrew@equin.co.uk>
-Andrew Zich <azich@fb.com>
-Andrey Popp <8mayday@gmail.com>
-Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
-Ayman Osman <aymano.osman@gmail.com>
-Ben Alpert <spicyjalapeno@gmail.com>
-Ben Newman <bn@cs.stanford.edu>
-Ben Ripkens <bripkens.dev@gmail.com>
-Bill Fisher <fisherwebdev@gmail.com>
-Bob Eagan <bob@synapsestudios.com>
-Bojan Mihelac <bmihelac@mihelac.org>
-Brandon Bloom <brandon@brandonbloom.name>
-Brian Cooke <bri@bricooke.com>
-Brian Kim <briankimpossible@gmail.com>
-Brian Reavis <brian@thirdroute.com>
-Brian Rue <brian@rollbar.com>
-Cam Spiers <camspiers@gmail.com>
-Cassus Adam Banko <banko.adam@gmail.com>
-Cat Chen <catchen@fb.com>
-Cheng Lou <chenglou92@gmail.com>
-Christian Roman <chroman16@gmail.com>
-Christoph Pojer <christoph.pojer@gmail.com>
-Christopher Monsanto <chris@monsan.to>
-Clay Allsopp <clay.allsopp@gmail.com>
-Connor McSheffrey <c@conr.me>
-Dan Schafer <dschafer@fb.com>
-Daniel Gasienica <daniel@gasienica.ch>
-Daniel Lo Nigro <daniel@dan.cx>
-Daniel Miladinov <dmiladinov@wingspan.com>
-Daniel Schonfeld <daniel@schonfeld.org>
-Danny Ben-David <dannybd@fb.com>
-Daryl Lau <daryl@weak.io>
-David Hellsing <david@aino.se>
-David Hu <davidhu91@gmail.com>
-Devon Blandin <dblandin@gmail.com>
-Dmitry Mazuro <dmitry.mazuro@icloud.com>
-Dustin Getz <dgetz@wingspan.com>
-Enguerran <engcolson@gmail.com>
-Eric Clemmons <eric@smarterspam.com>
-Eric Florenzano <floguy@gmail.com>
-Eric Schoffstall <contra@wearefractal.com>
-Evan Coonrod <evan@paloalto.com>
-Fabio M. Costa <fabiomcosta@gmail.com>
-Felipe Oliveira Carvalho <felipekde@gmail.com>
-Felix Kling <felix.kling@gmx.net>
-Fernando Correia <fernando@servicero.com>
-François-Xavier Bois <fxbois@gmail.com>
-Fred Zhao <fredz@fb.com>
-G Scott Olson <gscottolson@gmail.com>
-Geert Pasteels <geert.pasteels@gmail.com>
-Geert-Jan Brits <gbrits@gmail.com>
-George A Sisco III <george.sisco@gmail.com>
-Gilbert <gilbertbgarza@gmail.com>
-Greg Hurrell <glh@fb.com>
-Greg Roodt <groodt@gmail.com>
-Guangqiang Dong <gqdong@fb.com>
-Guido Bouman <m@guido.vc>
-Harry Hull <harry.hull1@gmail.com>
-Harshad Sabne <harshadsabne@users.noreply.github.com>
-Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
-Hugo Jobling <me@thisishugo.com>
-Ian Obermiller <iano@fb.com>
-Ingvar Stepanyan <me@rreverser.com>
-Irae Carvalho <irae@irae.pro.br>
-Isaac Salier-Hellendag <isaac@fb.com>
-Ivan Kozik <ivan@ludios.org>
-Jaime Mingo <j.mingov@3boll.com>
-Jakub Malinowski <jakubmal@gmail.com>
-James Brantly <james@jbrantly.com>
-James Ide <ide@fb.com>
-Jamie Wong <jamie.lf.wong@gmail.com>
-Jamison Dance <jergason@gmail.com>
-Jan Kassens <jan@kassens.net>
-Jared Forsyth <jared@jaredforsyth.com>
-Jason Bonta <jbonta@gmail.com>
-Jason Trill <jason@jasontrill.com>
-Jean Lauliac <lauliacj@gmail.com>
-Jeff Barczewski <jeff.barczewski@gmail.com>
-Jeff Carpenter <gcarpenterv@gmail.com>
-Jeff Morrison <jeff@anafx.com>
-Jeff Welch <whatthejeff@gmail.com>
-Jeffrey Lin <lin.jeffrey@gmail.com>
-Jignesh Kakadiya <jigneshhk1992@gmail.com>
-Jing Chen <jingc@fb.com>
-Johannes Baiter <johannes.baiter@gmail.com>
-John Watson <jwatson@fb.com>
-Jon Beebe <jon.beebe@daveramsey.com>
-Jonas Enlund <jonas.enlund@gmail.com>
-Jonas Gebhardt <jonas@instagram.com>
-Jonathan Hsu <jhiswin@gmail.com>
-Jordan Walke <jordojw@gmail.com>
-Josh Bassett <josh.bassett@gmail.com>
-Josh Duck <josh@fb.com>
-Josh Yudaken <yud@instagram.com>
-Joshua Ma <me@joshma.com>
-Julen Ruiz Aizpuru <julenx@gmail.com>
-Jun Wu <quark@lihdd.net>
-Juraj Dudak <jdudak@fb.com>
-Justin Jaffray <justinjaffray@khanacademy.org>
-Karl Mikkelsen <karl@kingkarl.com>
-Keito Uchiyama <projects@keito.me>
-Kit Randel <kit@nocturne.net.nz>
-Kunal Mehta <k.mehta@berkeley.edu>
-Kyle Mathews <mathews.kyle@gmail.com>
-Laurence Rowe <l@lrowe.co.uk>
-Levi McCallum <levi@levimccallum.com>
-Lily <qvang.j@gmail.com>
-Logan Allen <loganfynne@gmail.com>
-Luigy Leon <luichi.19@gmail.com>
-Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
-Marcin Szczepanski <marcins@gmail.com>
-Mariano Desanze <protronm@gmail.com>
-Mark Richardson <echo@fb.com>
-Marshall Roch <mroch@fb.com>
-Martin Andert <mandert@gmail.com>
-Martin Konicek <mkonicek@fb.com>
-Mathieu M-Gosselin <mathieumg@gmail.com>
-Matt Harrison <mt.harrison86@gmail.com>
-Matthew Dapena-Tretter <m@tthewwithanm.com>
-Matti Nelimarkka <matti.nelimarkka@hiit.fi>
-Michal Srb <xixixao@seznam.cz>
-Mouad Debbar <mdebbar@fb.com>
-Nadeesha Cabral <nadeesha.cabral@gmail.com>
-Nate Hunzaker <nate.hunzaker@gmail.com>
-Nicholas Bergson-Shilcock <me@nicholasbs.net>
-Nick Gavalas <njg57@cornell.edu>
-Nick Thompson <ncthom91@gmail.com>
-Niklas Boström <nbostrom@gmail.com>
-Owen Coutts <owenc@fb.com>
-Pascal Hartig <passy@twitter.com>
-Paul O’Shannessy <paul@oshannessy.com>
-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>
-Rajiv Tirumalareddy <rajivtreddy@gmail.com>
-Randall Randall <randall@randallsquared.com>
-Ray <ray@tomo.im>
-Richard D. Worth <rdworth@gmail.com>
-Richard Feldman <richard.t.feldman@gmail.com>
-Richard Livesey <Livesey7@hotmail.co.uk>
-Ryan Seddon <seddon.ryan@gmail.com>
-Sahat Yalkabov <sakhat@gmail.com>
-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>
-Stefan Dombrowski <sdo451@gmail.com>
-Stephen Murphy <smurphy3@apple.com>
-Stoyan Stefanov <ssttoo@ymail.com>
-Sundeep Malladi <sundeep.malladi@gmail.com>
-Sven Helmberger <fforw@gmx.de>
-Thomas Aylott <oblivious@subtlegradient.com>
-Thomas Boyt <thomas.boyt@venmo.com>
-Thomas Shaddox <thomas@heyzap.com>
-Thomas Shafer <thomasjshafer@gmail.com>
-Timothy Yung <yungsters@gmail.com>
-Tom Haggie <thaggie@gmail.com>
-Tom Occhino <tomocchino@gmail.com>
-Ville Immonen <ville.immonen@iki.fi>
-Vjeux <vjeuxx@gmail.com>
-Volkan Unsal <spocksplanet@gmail.com>
-Wayne Larsen <wayne@larsen.st>
-Wincent Colaiuta <win@wincent.com>
-Yuriy Dybskiy <yuriy@dybskiy.com>
-Yuval Dekel <thedekel@fb.com>
-Zach Bruggeman <mail@bruggie.com>
-davidxi <davidgraycn@gmail.com>
-imagentleman <imagentlemail@gmail.com>

CHANGELOG.md

@@ -1,323 +0,0 @@
-## 0.11.0 (July 17, 2014)
-
-### React Core
-
-#### Breaking Changes
-* `getDefaultProps()` is now called once per class and shared across all instances
-
-#### New Features
-* Rendering to `null`
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
-* New normalized `onBeforeInput` event
-* `React.Children.count` has been added as a helper for counting the number of children
-
-#### Bug Fixes
-
-* Re-renders are batched in more cases
-* Events: `e.view` properly normalized
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
-* Improved SVG support
-  * Changing `className` on a mounted SVG component now works correctly
-  * Added support for elements `mask` and `tspan`
-  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
-* Added explicit warning when missing polyfills
-
-### React With Addons
-* PureRenderMixin: a mixin which helps optimize "pure" components
-* Perf: a new set of tools to help with performance analysis
-* Update: New `$apply` command to transform values
-* TransitionGroup bug fixes with null elements, Android
-
-### React NPM Module
-* Now includes the pre-built packages under `dist/`.
-* `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX
-* Added support for namespaces, eg `<Components.Checkbox />`
-* JSXTransformer
-  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
-  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
-  * Fixed a bug preventing sourcemaps from working in Firefox
-
-### React Tools Module
-* Improved readme with usage and API information
-* Improved ES6 transforms available with `--harmony` option
-* Added `--source-map-inline` option to the `jsx` executable
-* New `transformWithDetails` API which gives access to the raw sourcemap data
-
-
-## 0.10.0 (March 21, 2014)
-
-### React Core
-
-#### New Features
-* Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
-* Added support for more attributes:
-  * `srcSet` for `<img>` to specify 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. [Read the docs](http://facebook.github.io/react/docs/update.html)
-
-### 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).
-
-
-## 0.9.0 (February 20, 2014)
-
-### React Core
-
-#### Breaking Changes
-
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
-- 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
-
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
-- Added support for more attributes:
-  - `crossOrigin` for CORS requests
-  - `download` and `hrefLang` for `<a>` tags
-  - `mediaGroup` and `muted` for `<audio>` and `<video>` tags
-  - `noValidate` and `formNoValidate` for forms
-  - `property` for Open Graph `<meta>` tags
-  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
-  - `scope` for screen readers
-  - `span` for `<colgroup>` tags
-- Added support for defining `propTypes` in mixins
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
-- Added support for `statics` on component spec for static component methods
-- 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
-- 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
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
-
-#### Bug Fixes
-
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
-- Fixed a case where nesting top-level components would throw an error when updating
-- Passing an invalid or misspelled propTypes type now throws an error
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
-- On composition events, `.data` is now properly normalized in IE9 and IE10
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
-- Fixed a memory leak when `renderComponentToString` would store event handlers
-- Fixed an error that could be thrown when removing form elements during a click handler
-- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`)
-- `key` values containing `.` are now supported
-- Shortened `data-reactid` values for performance
-- Components now always remount when the `key` property changes
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
-- General performance fixes, memory optimizations, improvements to warnings and error messages
-
-### React with Addons
-
-- `React.addons.TestUtils` was added to help write unit tests
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
-- Performance optimizations for CSSTransitionGroup
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
-
-### JSX Compiler and react-tools Package
-
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
-- `JSXTransformer` now uses source maps automatically in modern browsers
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
-
-## 0.8.0 (December 19, 2013)
-
-### React
-
-* Added support for more attributes:
-  * `rows` & `cols` for `<textarea>`
-  * `defer` & `async` for `<script>`
-  * `loop` for `<audio>` & `<video>`
-  * `autoCorrect` for form fields (a non-standard attribute only supported by mobile WebKit)
-* Improved error messages
-* Fixed Selection events in IE11
-* Added `onContextMenu` events
-
-### React with Addons
-
-* Fixed bugs with TransitionGroup when children were undefined
-* Added support for `onTransition`
-
-### react-tools
-
-* Upgraded `jstransform` and `esprima-fb`
-
-### JSXTransformer
-
-* Added support for use in IE8
-* Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
-
-
-## 0.5.2, 0.4.2 (December 18, 2013)
-
-### React
-
-* Fixed a potential XSS vulnerability when using user content as a `key`: [CVE-2013-7035](https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU)
-
-
-## 0.5.1 (October 29, 2013)
-
-### React
-
-* Fixed bug with `<input type="range">` and selection events.
-* Fixed bug with selection and focus.
-* Made it possible to unmount components from the document root.
-* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
-
-### React with Addons
-
-* Fixed bug with transition and animation event detection.
-
-
-## 0.5.0 (October 16, 2013)
-
-### React
-
-* Memory usage improvements - reduced allocations in core which will help with GC pauses
-* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
-* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
-* Support for Selection events.
-* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
-* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
-* Support for additional SVG properties (`rx`, `ry`).
-* Support for using `getInitialState` and `getDefaultProps` in mixins.
-* Support mounting into iframes.
-* Bug fixes for controlled form components.
-* Bug fixes for SVG element creation.
-* Added `React.version`.
-* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
-* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
-* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
-* Began laying down work for refined performance analysis.
-* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
-* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
-
-### React with Addons (New!)
-
-* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
-
-### JSX
-
-* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
-* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
-* Improved compatibility for Windows
-* Improved support for maintaining line numbers when transforming.
-
-
-## 0.4.1 (July 26, 2013)
-
-### React
-
-* `setState` callbacks are now executed in the scope of your component.
-* `click` events now work on Mobile Safari.
-* Prevent a potential error in event handling if `Object.prototype` is extended.
-* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
-* Improved support for `<iframe>` attributes.
-* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
-
-### JSXTransformer
-
-* Improved environment detection so it can be run in a non-browser environment.
-
-
-## 0.4.0 (July 17, 2013)
-
-### React
-
-* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
-* Support for more DOM elements and attributes (e.g., `<canvas>`)
-* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
-* We've implemented an improved synthetic event system that conforms to the W3C spec.
-* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
-
-### JSX
-
-* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
-* Children are now transformed directly into arguments instead of being wrapped in an array
-  E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
-  Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
-  If you were using React without JSX previously, your code should still work.
-
-### react-tools
-
-* Fixed a number of bugs when transforming directories
-* No longer re-write `require()`s to be relative unless specified
-
-
-## 0.3.3 (June 20, 2013)
-
-### React
-
-* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
-
-### JSX
-
-* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
-
-### react-tools
-
-* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
-* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
-* Freeze our esprima dependency.
-
-
-## 0.3.2 (May 31, 2013)
-
-### JSX
-
-* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
-
-### react-tools
-
-* Switch from using the browserified build to shipping individual modules. This allows react-tools to be used with [browserify](https://github.com/substack/node-browserify).
-
-
-## 0.3.1 (May 30, 2013)
-
-### react-tools
-
-* Fix bug in packaging resulting in broken module.
-
-
-## 0.3.0 (May 29, 2013)
-
-* Initial public release

CONTRIBUTING.md

@@ -27,7 +27,7 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 
 In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
 
-Complete your CLA here: <https://code.facebook.com/cla>
+Complete your CLA here: <https://developers.facebook.com/opensource/cla>
 
 ## Bugs
 
@@ -57,7 +57,6 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * `"use strict";`
 * 80 character line length
 * "Attractive"
-* Do not use the optional parameters of `setTimeout` and `setInterval`
 
 ## License
 

Gruntfile.js

@@ -3,226 +3,73 @@
 var exec = require('child_process').exec;
 var jsxTask = require('./grunt/tasks/jsx');
 var browserifyTask = require('./grunt/tasks/browserify');
-var populistTask = require('./grunt/tasks/populist');
-var webdriverPhantomJSTask = require('./grunt/tasks/webdriver-phantomjs');
-var webdriverJasmineTasks = require('./grunt/tasks/webdriver-jasmine');
-var sauceTunnelTask = require('./grunt/tasks/sauce-tunnel');
+var wrapupTask = require('./grunt/tasks/wrapup');
+var phantomTask = require('./grunt/tasks/phantom');
 var npmTask = require('./grunt/tasks/npm');
 var releaseTasks = require('./grunt/tasks/release');
-var npmReactTasks = require('./grunt/tasks/npm-react');
-var npmReactToolsTasks = require('./grunt/tasks/npm-react-tools');
-var versionCheckTask = require('./grunt/tasks/version-check');
 
 module.exports = function(grunt) {
 
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     copy: require('./grunt/config/copy'),
-    jsx: require('./grunt/config/jsx'),
+    jsx: require('./grunt/config/jsx/jsx'),
     browserify: require('./grunt/config/browserify'),
-    populist: require('./grunt/config/populist')(grunt),
-    connect: require('./grunt/config/server')(grunt),
-    "webdriver-jasmine": require('./grunt/config/webdriver-jasmine'),
-    "webdriver-perf": require('./grunt/config/webdriver-perf'),
+    wrapup: require('./grunt/config/wrapup'),
+    phantom: require('./grunt/config/phantom'),
     npm: require('./grunt/config/npm'),
-    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js', '.module-cache'],
+    clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js'],
     jshint: require('./grunt/config/jshint'),
     compare_size: require('./grunt/config/compare_size')
   });
 
   grunt.config.set('compress', require('./grunt/config/compress'));
 
-  Object.keys(grunt.file.readJSON('package.json').devDependencies)
-    .filter(function(npmTaskName) { return npmTaskName.indexOf('grunt-') === 0; })
-    .filter(function(npmTaskName) { return npmTaskName != 'grunt-cli'; })
-    .forEach(function(npmTaskName) { grunt.loadNpmTasks(npmTaskName); });
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-compare-size');
+  grunt.loadNpmTasks('grunt-contrib-compress');
 
   // Alias 'jshint' to 'lint' to better match the workflow we know
   grunt.registerTask('lint', ['jshint']);
 
-  grunt.registerTask('download-previous-version', require('./grunt/tasks/download-previous-version.js'));
-
-  grunt.registerTask('delete-build-modules', function() {
-    if (grunt.file.exists('build/modules')) {
-      grunt.file.delete('build/modules');
-    }
-  });
-
-  // Register jsx:normal and :release tasks.
+  // Register jsx:debug and :release tasks.
   grunt.registerMultiTask('jsx', jsxTask);
 
   // Our own browserify-based tasks to build a single JS file build
   grunt.registerMultiTask('browserify', browserifyTask);
 
-  grunt.registerMultiTask('populist', populistTask);
+  // Similar to Browserify, use WrapUp to generate single JS file that
+  // defines global variables instead of using require.
+  grunt.registerMultiTask('wrapup', wrapupTask);
 
-  grunt.registerTask('sauce-tunnel', sauceTunnelTask);
-
-  grunt.registerMultiTask('webdriver-jasmine', webdriverJasmineTasks);
-
-  grunt.registerMultiTask('webdriver-perf', require('./grunt/tasks/webdriver-perf'));
+  grunt.registerMultiTask('phantom', phantomTask);
 
   grunt.registerMultiTask('npm', npmTask);
 
-  grunt.registerTask('npm-react:release', npmReactTasks.buildRelease);
-  grunt.registerTask('npm-react:pack', npmReactTasks.packRelease);
-  grunt.registerTask('npm-react-tools:release', npmReactToolsTasks.buildRelease);
-  grunt.registerTask('npm-react-tools:pack', npmReactToolsTasks.packRelease);
-
-  grunt.registerTask('version-check', versionCheckTask);
-
-  grunt.registerTask('build:basic', ['jsx:normal', 'version-check', 'browserify:basic']);
-  grunt.registerTask('build:addons', ['jsx:normal', 'browserify:addons']);
-  grunt.registerTask('build:transformer', ['jsx:normal', 'browserify:transformer']);
-  grunt.registerTask('build:min', ['jsx:normal', 'version-check', 'browserify:min']);
-  grunt.registerTask('build:addons-min', ['jsx:normal', 'browserify:addonsMin']);
-  grunt.registerTask('build:withCodeCoverageLogging', [
-    'jsx:normal',
-    'version-check',
-    'browserify:withCodeCoverageLogging'
-  ]);
-  grunt.registerTask('build:perf', [
-    'jsx:normal',
-    'version-check',
-    'browserify:transformer',
-    'browserify:basic',
-    'browserify:min',
-    'download-previous-version'
-  ]);
+  grunt.registerTask('build:basic', ['jsx:debug', 'browserify:basic']);
+  grunt.registerTask('build:transformer', ['jsx:debug', 'browserify:transformer']);
+  grunt.registerTask('build:min', ['jsx:release', 'browserify:min']);
   grunt.registerTask('build:test', [
-    'delete-build-modules',
+    'jsx:debug',
+    'jsx:jasmine',
     'jsx:test',
-    'version-check',
-    'populist:test'
-  ]);
-  grunt.registerTask('build:npm-react', ['version-check', 'jsx:normal', 'npm-react:release']);
-
-  grunt.registerTask('webdriver-phantomjs', webdriverPhantomJSTask);
-
-  grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse'));
-
-  grunt.registerTask('test:webdriver:phantomjs', [
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-jasmine:local'
+    'browserify:jasmine',
+    'browserify:test'
   ]);
 
-  grunt.registerTask('perf:webdriver:phantomjs', [
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-perf:local'
-  ]);
-
-  grunt.registerTask('test:full', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-jasmine:local',
-
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_android',
-    'webdriver-jasmine:saucelabs_firefox',
-    'webdriver-jasmine:saucelabs_chrome'
-  ]);
-
-  grunt.registerTask('perf:full', [
-    'build:perf',
-
-    'connect',
-    'webdriver-phantomjs',
-    'webdriver-perf:local',
-
-    'sauce-tunnel',
-    'webdriver-perf:saucelabs_firefox',
-    'webdriver-perf:saucelabs_chrome',
-    'webdriver-perf:saucelabs_ie11',
-    'webdriver-perf:saucelabs_ie8',
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_' + (process.env.BROWSER_NAME || 'ie8')
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:modern', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_android',
-    'webdriver-jasmine:saucelabs_firefox',
-    'webdriver-jasmine:saucelabs_chrome',
-    'webdriver-jasmine:saucelabs_ie11'
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:ie', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_ie8',
-    'webdriver-jasmine:saucelabs_ie9',
-    'webdriver-jasmine:saucelabs_ie10',
-    'webdriver-jasmine:saucelabs_ie11'
-  ]);
-
-  grunt.registerTask('test:webdriver:saucelabs:ios', [
-    'build:test',
-    'build:basic',
-
-    'connect',
-    'sauce-tunnel',
-    'webdriver-jasmine:saucelabs_ios6_1',
-    'webdriver-jasmine:saucelabs_ios5_1',
-    'webdriver-jasmine:saucelabs_ios4'
-  ]);
-
-  grunt.registerTask('test:coverage', [
-    'build:test',
-    'build:withCodeCoverageLogging',
-    'test:webdriver:phantomjs',
-    'coverage:parse'
-  ]);
-  grunt.registerTask('fasttest', function() {
-    if (grunt.option('debug')) {
-      grunt.task.run('build:test', 'connect:server:keepalive');
-    } else {
-      grunt.task.run('build:test', 'test:webdriver:phantomjs');
-    }
-  });
-  grunt.registerTask('test', function() {
-    if (grunt.option('debug')) {
-      grunt.task.run('build:test', 'build:basic', 'connect:server:keepalive');
-    } else {
-      grunt.task.run('build:test', 'build:basic', 'test:webdriver:phantomjs');
-    }
-  });
-  grunt.registerTask('perf', ['build:perf', 'perf:webdriver:phantomjs']);
+  grunt.registerTask('test', ['build:test', 'phantom:run']);
   grunt.registerTask('npm:test', ['build', 'npm:pack']);
 
   // Optimized build task that does all of our builds. The subtasks will be run
-  // in order so we can take advantage of that and only run jsx:normal once.
+  // in order so we can take advantage of that and only run jsx:debug once.
   grunt.registerTask('build', [
-    'delete-build-modules',
-    'jsx:normal',
-    'version-check',
+    'jsx:debug',
     'browserify:basic',
     'browserify:transformer',
-    'browserify:addons',
+    'jsx:release',
     'browserify:min',
-    'browserify:addonsMin',
-    'npm-react:release',
-    'npm-react:pack',
-    'npm-react-tools:release',
-    'npm-react-tools:pack',
     'copy:react_docs',
     'compare_size'
   ]);

README.md

@@ -1,22 +1,22 @@
-# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react)
+# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.png?branch=master)](https://travis-ci.org/facebook/react)
 
 React is a JavaScript library for building user interfaces.
 
-* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
-* **Virtual DOM:** React uses a *virtual DOM* diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
-* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
+* **Declarative:** React uses a declarative paradigm that makes it easier to reason about your application.
+* **Efficient:** React computes the minimal set of changes necessary to keep your DOM up-to-date.
+* **Flexible:** React works with the libraries and frameworks that you already know.
 
 [Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
 
 ## Examples
 
-We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
+We have several examples [on the website](http://facebook.github.io/react). Here is the first one to get you started:
 
 ```js
 /** @jsx React.DOM */
 var HelloMessage = React.createClass({
   render: function() {
-    return <div>Hello {this.props.name}</div>;
+    return <div>{'Hello ' + this.props.name}</div>;
   }
 });
 
@@ -28,20 +28,20 @@ React.renderComponent(
 
 This example will render "Hello John" into a container on the page.
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
+You'll notice that we used an XML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/syntax.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
 
 ## Installation
 
-The fastest way to get started is to serve JavaScript from the CDN (also available on [CDNJS](http://cdnjs.com/#react)):
+The fastest way to get started is to serve JavaScript from the CDN:
 
 ```html
 <!-- The core React library -->
-<script src="http://fb.me/react-0.11.0.js"></script>
+<script src="http://fb.me/react-0.3.2.min.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
+<script src="http://fb.me/JSXTransformer-0.3.2.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.11.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.3.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:
 
@@ -51,7 +51,7 @@ bower install --save react
 
 ## Contribute
 
-The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
+The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too :) Any feedback you have about using React would be greatly appreciated.
 
 ### Building Your Copy of React
 
@@ -81,14 +81,12 @@ At this point, you should now have a `build/` directory populated with everythin
 We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
 
 ```sh
-# Build and run tests with PhantomJS
+# Create test build & run tests with PhantomJS
 grunt test
-# Build and run tests in your browser
-grunt test --debug
-# For speed, you can use fasttest and add --filter to only run one test
-grunt fasttest --filter=ReactIdentity
-# Lint the code with JSHint
+# Lint the core library code with JSHint
 grunt lint
+# Lint package code
+grunt lint:package
 # Wipe out build directory
 grunt clean
 ```

bin/jsx

@@ -1,24 +1,42 @@
 #!/usr/bin/env node
-// -*- mode: js -*-
 "use strict";
 
-var transform = require('../main').transform;
+var visitors = require('../vendor/fbtransform/visitors').transformVisitors;
+var transform = require('../vendor/fbtransform/lib/transform').transform;
+var debranch = require("../vendor/woodchipper").debranch;
+
+require("commoner").resolve(function(id) {
+  var context = this;
+
+  // Note that the result of context.getProvidedP() is cached for the
+  // duration of the build, so it is both consistent and cheap to
+  // evaluate multiple times.
+  return context.getProvidedP().then(function(idToPath) {
+    // If a module declares its own identifier using @providesModule
+    // then that identifier will be a key in the idToPath object.
+    if (idToPath.hasOwnProperty(id)) {
+      return context.readFileP(idToPath[id]);
+    }
+
+    // Otherwise assume the identifier maps directly to a path in the
+    // filesystem.
+    return context.readModuleP(id);
+  });
+
+}).process(function(id, source) {
+  var context = this;
 
-require('commoner').version(
-  require('../package.json').version
-).resolve(function(id) {
-  return this.readModuleP(id);
-}).option(
-  '--harmony',
-  'Turns on JS transformations such as ES6 Classes etc.'
-).option(
-  '--source-map-inline',
-  'Embed inline sourcemap in transformed source'
-).process(function(id, source) {
   // This is where JSX, ES6, etc. desugaring happens.
-  var options = {
-    harmony: this.options.harmony,
-    sourceMap: this.options.sourceMapInline
-  };
-  return transform(source, options);
+  source = transform(visitors.react, source).code;
+
+  return context.makePromise(function(callback) {
+    var constants = context.config.constants || {};
+
+    // Debranching means removing any obviously dead code after
+    // replacing constant conditional expressions with literal
+    // (boolean) values.
+    debranch(constants, source, function(source) {
+      callback(null, source);
+    });
+  });
 });

bin/jsx-internal

@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-// -*- mode: js -*-
-"use strict";
-
-var getAllVisitors = require('../vendor/fbtransform/visitors').getAllVisitors;
-var transform = require('jstransform').transform;
-var propagate = require("../vendor/constants").propagate;
-
-require("commoner").version(
-  require("../package.json").version
-).resolve(function(id) {
-  var context = this;
-
-  // Note that the result of context.getProvidedP() is cached for the
-  // duration of the build, so it is both consistent and cheap to
-  // evaluate multiple times.
-  return context.getProvidedP().then(function(idToPath) {
-    // If a module declares its own identifier using @providesModule
-    // then that identifier will be a key in the idToPath object.
-    if (idToPath.hasOwnProperty(id)) {
-      return context.readFileP(idToPath[id]);
-    }
-
-    // Otherwise assume the identifier maps directly to a path in the
-    // filesystem.
-    return context.readModuleP(id);
-  });
-
-}).process(function(id, source) {
-  var context = this;
-  var constants = context.config.constants || {};
-
-  // This is where JSX, ES6, etc. desugaring happens.
-  source = transform(getAllVisitors(), source).code;
-
-  // Constant propagation means removing any obviously dead code after
-  // replacing constant expressions with literal (boolean) values.
-  source = propagate(constants, source);
-
-  if (context.config.mocking) {
-    // Make sure there is exactly one newline at the end of the module.
-    source = source.replace(/\s+$/m, "\n");
-
-    return context.getProvidedP().then(function(idToPath) {
-      if (id !== "mock-modules" &&
-          id !== "mocks" &&
-          id !== "test/all" &&
-          idToPath.hasOwnProperty("mock-modules")) {
-        return source + '\nrequire("mock-modules").register(' +
-          JSON.stringify(id) + ', module);\n';
-      }
-
-      return source;
-    });
-  }
-
-  return source;
-});

docs/404.md

@@ -1,8 +0,0 @@
----
-layout: single
-title: Page Not Found
----
-
-We couldn't find what you were looking for.
-
-Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

docs/Gemfile

@@ -1,9 +1,7 @@
 source 'https://rubygems.org'
 
-gem 'rake'
-
 # jekyll, which builds it all
-gem 'jekyll', '~>1.3.0'
+gem 'jekyll', '~>1.0'
 
 # JSON
 gem 'json'
@@ -16,6 +14,3 @@ gem 'rb-fsevent'
 
 # Redcarpet for Markdown
 gem 'redcarpet'
-
-# For markdown header cleanup
-gem 'sanitize'

docs/Gemfile.lock

@@ -4,47 +4,34 @@ GEM
     classifier (1.3.3)
       fast-stemmer (>= 1.0.0)
     colorator (0.1)
-    commander (4.1.5)
+    commander (4.1.3)
       highline (~> 1.6.11)
+    directory_watcher (1.4.1)
     fast-stemmer (1.0.2)
-    ffi (1.9.3)
-    highline (1.6.20)
-    jekyll (1.3.0)
+    highline (1.6.19)
+    jekyll (1.0.2)
       classifier (~> 1.3)
       colorator (~> 0.1)
       commander (~> 4.1.3)
-      liquid (~> 2.5.2)
-      listen (~> 1.3)
-      maruku (~> 0.6.0)
+      directory_watcher (~> 1.4.1)
+      kramdown (~> 1.0.2)
+      liquid (~> 2.3)
+      maruku (~> 0.5)
       pygments.rb (~> 0.5.0)
-      redcarpet (~> 2.3.0)
-      safe_yaml (~> 0.9.7)
-    json (1.8.1)
-    liquid (2.5.4)
-    listen (1.3.1)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      rb-kqueue (>= 0.2)
+      safe_yaml (~> 0.7.0)
+    json (1.8.0)
+    kramdown (1.0.2)
+    liquid (2.5.0)
     maruku (0.6.1)
       syntax (>= 1.0.0)
-    mini_portile (0.5.2)
-    nokogiri (1.6.0)
-      mini_portile (~> 0.5.0)
     posix-spawn (0.3.6)
-    pygments.rb (0.5.4)
+    pygments.rb (0.5.0)
       posix-spawn (~> 0.3.6)
       yajl-ruby (~> 1.1.0)
-    rake (10.1.0)
     rb-fsevent (0.9.3)
-    rb-inotify (0.9.2)
-      ffi (>= 0.5.0)
-    rb-kqueue (0.2.0)
-      ffi (>= 0.5.0)
-    redcarpet (2.3.0)
-    safe_yaml (0.9.7)
-    sanitize (2.0.6)
-      nokogiri (>= 1.4.4)
-    sass (3.2.12)
+    redcarpet (2.2.2)
+    safe_yaml (0.7.1)
+    sass (3.2.9)
     syntax (1.0.0)
     yajl-ruby (1.1.0)
 
@@ -52,10 +39,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (~> 1.3.0)
+  jekyll (~> 1.0)
   json
-  rake
   rb-fsevent
   redcarpet
-  sanitize
   sass

docs/README.md

@@ -21,7 +21,6 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it
 ```sh
 $ cd react/docs
 $ bundle install # Might need sudo.
-$ npm install # Might need sudo.
 ```
 
 ### Instructions
@@ -55,7 +54,7 @@ $ rake watch # Automatically compiles as needed.
 
 The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there you can check it in.
 
-**Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.
+**Note:** This should only be done for new releases. You should create a tag corresponding to the relase tag in the main repository.
 
 ### Removing the Jekyll / Ruby Dependency
 

docs/Rakefile

@@ -13,7 +13,7 @@ task :js do
 end
 
 desc "watch css & js"
-task :watch do
+task :watch => [:update_version] do
   Process.spawn "sass --style=compressed --watch _css/react.scss:css/react.css"
   Process.spawn "../bin/jsx --watch _js js"
   Process.waitall
@@ -30,8 +30,8 @@ task :update_version do
 end
 
 desc "build into ../../react-gh-pages"
-task :release => [:update_version, :default] do
+task :release => [:default] do
   system "jekyll build -d ../../react-gh-pages"
 end
 
-task :default => [:css, :js]
+task :default => [:update_version, :css, :js]

docs/_config.yml

@@ -1,21 +1,17 @@
 ---
-baseurl: /react
-url: http://facebook.github.io
-permalink: /blog/:year/:month/:day/:title.html
+markdown: redcarpet
+name: React
+description: A JavaScript library for building user interfaces
+redcarpet:
+  extensions:
+  - fenced_code_blocks
+react_version: 0.3.3
+pygments: true
 exclude:
 - Gemfile
 - Gemfile.lock
 - README.md
 - Rakefile
-redcarpet:
-  extensions:
-  - fenced_code_blocks
-pygments: true
-name: React
-markdown: redcarpet
-react_version: 0.11.0
-description: A JavaScript library for building user interfaces
-relative_permalinks: true
-paginate: 5
-paginate_path: /blog/page:num/
-timezone: America/Los_Angeles
+url: http://facebook.github.io
+baseurl: /react
+permalink: /blog/:year/:month/:day/:title.html

docs/_css/_typography.scss

@@ -6,6 +6,7 @@ $textColorLight: lighten($textColor, 20%);
 html {
   font-family: $helvetica;
   font-family: proxima-nova, $helvetica;
+  font-weight: 300;
   color: $textColor;
   line-height: 1.28;
 }
@@ -131,3 +132,5 @@ a {
 .center {
   text-align: center;
 }
+
+

docs/_css/react.scss

@@ -4,9 +4,9 @@
 @import '_solarized';
 
 @mixin code-typography {
-  font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
-  font-size: 0.8em;
-  line-height: 1.5;
+  font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+  font-size: 13px;
+  line-height: 20px;
 }
 
 $skinnyContentWidth: 650px;
@@ -15,7 +15,6 @@ $contentPadding: 20px;
 $columnWidth: 280px;
 $columnGutter: 40px;
 $twoColumnWidth: 2 * $columnWidth + $columnGutter;
-$navHeight: 50px;
 
 
 
@@ -43,7 +42,7 @@ html {
 
 
 .container {
-  padding-top: $navHeight;
+  padding-top: 50px;
   min-width: $contentWidth + (2 * $contentPadding);
 }
 
@@ -74,23 +73,6 @@ li {
   margin-left: 20px;
 }
 
-// Make header navigation linkable and on the screen. Used in documentation and
-// blog posts.
-h1, h2, h3, h4, h5, h6 {
-  .anchor {
-    margin-top: -$navHeight;
-    position: absolute;
-  }
-
-  &:hover .hash-link {
-    display: inline;
-  }
-}
-.hash-link {
-  color: $mediumTextColor;
-  display: none;
-}
-
 // Main Nav
 
 .nav-main {
@@ -99,7 +81,7 @@ h1, h2, h3, h4, h5, h6 {
   color: $lightTextColor;
   position: fixed;
   top: 0;
-  height: $navHeight;
+  height: 50px;
   box-shadow: 0 0 5px rgba(0, 0, 0, .5);
   width: 100%;
   z-index: 100;
@@ -121,9 +103,9 @@ h1, h2, h3, h4, h5, h6 {
       padding: 0 8px;
       text-transform: uppercase;
       letter-spacing: 1px;
-      line-height: $navHeight;
+      line-height: 50px;
       display: inline-block;
-      height: $navHeight;
+      height: 50px;
       color: $mediumTextColor;
 
       &:hover {
@@ -141,7 +123,7 @@ h1, h2, h3, h4, h5, h6 {
   .nav-home {
     color: #00d8ff;
     font-size: 24px;
-    line-height: $navHeight;
+    line-height: 50px;
   }
 
   .nav-logo {
@@ -217,18 +199,15 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 14px;
   // position: fixed;
   float: left;
-  width: 210px;
+  top: 100px;
+  width: 180px;
 
   ul {
     list-style: none;
     margin: 0;
   }
-  ul ul {
-    margin: 6px 0 0 20px;
-  }
   li {
-    line-height: 16px;
-    margin: 0 0 6px;
+    margin: 0;
   }
   h3 {
     text-transform: uppercase;
@@ -266,12 +245,6 @@ h1, h2, h3, h4, h5, h6 {
 
 }
 
-.nav-blog {
-  li {
-    margin-bottom: 5px;
-  }
-}
-
 // Home Page specifics
 
 .home-section {
@@ -291,7 +264,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .marketing-col {
   float: left;
-  margin-left: 40px;
+  margin-right: 40px;
   width: $columnWidth;
 
   h3 {
@@ -305,18 +278,18 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.marketing-col:first-child {
-  margin-left: 0;
-}
-
-#examples h3, .home-presentation h3 {
-  color: $darkColor;
-  font-size: 24px;
-  font-weight: normal;
-  margin-bottom: 5px;
+.marketing-col:last-child {
+  margin-right: 0;
 }
 
 #examples {
+  h3 {
+    color: $darkColor;
+    font-size: 24px;
+    font-weight: normal;
+    margin-bottom: 5px;
+  }
+
   p {
     margin: 0 0 25px 0;
     max-width: $twoColumnWidth;
@@ -388,8 +361,6 @@ section.black content {
  */
 
 .blogContent {
-  @include clearfix;
-
   padding-top: 20px;
 
   blockquote {
@@ -412,7 +383,6 @@ section.black content {
     font-size: 24px;
   }
 
-
   // H2s form documentation topic dividers. Extra space helps.
   h2 {
     margin-top: 30px;
@@ -420,7 +390,7 @@ section.black content {
 
   padding-top: 20px;
 
-  // Make a notice box out of blockquotes in the documentation:
+  // Make a notice box out of blockquotes in the documetation:
   blockquote {
       padding: 15px 30px 15px 15px;
       margin: 20px 0;
@@ -429,7 +399,7 @@ section.black content {
     h4 {
       margin-top: 0;
     }
-    p {
+    p:last-child {
       margin-bottom: 0;
     }
     // Treat first child as the title - promote to H4.
@@ -455,29 +425,18 @@ section.black content {
   padding-top: 20px;
   width: 1220px;
 
-  label.compiler-option {
-    display: block;
-    margin-top: 5px;
-  }
-
   #jsxCompiler {
     margin-top: 20px;
   }
 
   .playgroundPreview {
-    padding: 0;
+    padding: 14px;
     width: 600px;
 
     pre {
       @include code-typography;
     }
   }
-
-  .playgroundError {
-    // The compiler view kills padding in order to render the CodeMirror code
-    // more nicely. For the error view, put a padding back
-    padding: 15px 20px;
-  }
 }
 
 /* Button */
@@ -566,26 +525,13 @@ figure {
   margin: 0 auto;
 }
 
-h1 {
-  // Contains .edit-page-link
-  @include clearfix;
-}
-
-.edit-page-link {
-  float: right;
-  font-size: 16px;
-  font-weight: normal;
-  line-height: 20px;
-  margin-top: 17px;
-}
-
 /* Blog */
 
 .post-list-item + .post-list-item {
   margin-top: 60px;
 }
 
-/* CodeMirror */
+/* Code Mirror */
 
 div.CodeMirror pre, div.CodeMirror-linenumber, code {
   @include code-typography;
@@ -599,11 +545,6 @@ div.CodeMirror-linenumber:after {
   border: none;
 }
 
-/* hide the cursor. Mostly used when code's in plain JS */
-.CodeMirror-readonly div.CodeMirror-cursor {
-  visibility: hidden;
-}
-
 small code,
 li code,
 p code {
@@ -620,28 +561,23 @@ p code {
   @include clearfix;
 }
 
-.playground-tab {
+.playground::before {
   border-bottom: none !important;
   border-radius: 3px 3px 0 0;
-  padding: 6px 8px;
+  padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
   color: #c2c0bc;
   background-color: #f1ede4;
-  display: inline-block;
-  cursor: pointer;
+  content: 'Live editor';
 }
 
+.playground::before,
 .playgroundCode,
-.playground-tab,
 .playgroundPreview {
   border: 1px solid rgba(16,16,16,0.1);
 }
 
-.playground-tab-active {
-  color: $darkestColor;
-}
-
 .playgroundCode {
   border-radius: 0 3px 3px 3px;
   float: left;
@@ -657,11 +593,6 @@ p code {
   width: $columnWidth;
 }
 
-.playgroundError {
-  color: darken($primary, 5%);
-  font-size: 15px;
-}
-
 .MarkdownEditor textarea {
   width: 100%;
   height: 100px
@@ -676,7 +607,7 @@ p code {
   padding-left: 9px;
 }
 
-/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
+/* Codemirror doesn't support <jsx> syntax. Instead of highlighting it
    as error, just ignore it */
 .highlight .javascript .err {
   background-color: transparent;
@@ -702,12 +633,7 @@ p code {
 }
 
 .highlight pre code {
-  /* Respect line-height defined in <code> styles above */
-  display: block;
-
-  /* Cancel out styles for `li code` in case we have a <pre> within an <li>. */
-  background: none;
-  padding: 0;
+  font-size: inherit;
 }
 
 .highlight pre .lineno {
@@ -756,36 +682,3 @@ p code {
 .post {
   margin-bottom: 30px;
 }
-
-.pagination {
-  margin-bottom: 30px;
-
-  /* Trick to get the wrapper to expand to fit floating elements */
-  width: 100%;
-  overflow: hidden;
-
-  .next {
-    float: right;
-  }
-}
-
-// Twitter embeds. Need to !important because they inline margin on the iframe.
-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

@@ -1,85 +0,0 @@
-- title: Quick Start
-  items:
-  - id: getting-started
-    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: examples
-    title: Examples
-- title: Guides
-  items:
-  - id: why-react
-    title: Why React?
-  - id: displaying-data
-    title: Displaying Data
-    subitems:
-    - id: jsx-in-depth
-      title: JSX in Depth
-    - id: jsx-gotchas
-      title: JSX Gotchas
-  - id: interactivity-and-dynamic-uis
-    title: Interactivity and Dynamic UIs
-  - id: multiple-components
-    title: Multiple Components
-  - id: reusable-components
-    title: Reusable Components
-  - id: forms
-    title: Forms
-  - id: working-with-the-browser
-    title: Working With the Browser
-    subitems:
-    - id: more-about-refs
-      title: More About Refs
-  - id: tooling-integration
-    title: Tooling Integration
-  - id: addons
-    title: Add-Ons
-    subitems:
-    - id: animation
-      title: Animation
-    - id: two-way-binding-helpers
-      title: Two-Way Binding Helpers
-    - id: class-name-manipulation
-      title: Class Name Manipulation
-    - id: test-utils
-      title: Test Utilities
-    - id: clone-with-props
-      title: Cloning Components
-    - id: update
-      title: Immutability Helpers
-    - id: pure-render-mixin
-      title: PureRenderMixin
-    - id: perf
-      title: Performance Tools
-- title: Reference
-  items:
-  - id: top-level-api
-    title: Top-Level API
-  - id: component-api
-    title: Component API
-  - id: component-specs
-    title: Component Specs and Lifecycle
-  - id: tags-and-attributes
-    title: Supported Tags and Attributes
-  - id: events
-    title: Event System
-  - id: dom-differences
-    title: DOM Differences
-  - id: special-non-dom-attributes
-    title: Special Non-DOM Attributes
-  - id: reconciliation
-    title: Reconciliation
-- title: Flux
-  items:
-  - id: flux-overview
-    title: Flux Overview
-  - id: flux-todo-list
-    title: Flux Todo List

docs/_data/nav_tips.yml

@@ -1,36 +0,0 @@
-- title: Tips
-  items:
-  - id: introduction
-    title: Introduction
-  - id: inline-styles
-    title: Inline Styles
-  - id: if-else-in-JSX
-    title: If-Else in JSX
-  - id: self-closing-tag
-    title: Self-Closing Tag
-  - id: maximum-number-of-jsx-root-nodes
-    title: Maximum Number of JSX Root Nodes
-  - id: style-props-value-px
-    title: Shorthand for Specifying Pixel Values in style props
-  - id: children-props-type
-    title: Type of the Children props
-  - id: controlled-input-null-value
-    title: Value of null for Controlled Input
-  - id: componentWillReceiveProps-not-triggered-after-mounting
-    title: componentWillReceiveProps Not Triggered After Mounting
-  - id: props-in-getInitialState-as-anti-pattern
-    title: Props in getInitialState Is an Anti-Pattern
-  - id: dom-event-listeners
-    title: DOM Event Listeners in a Component
-  - id: initial-ajax
-    title: Load Initial Data via AJAX
-  - id: false-in-jsx
-    title: False in JSX
-  - id: communicate-between-components
-    title: Communicate Between Components
-  - id: expose-component-functions
-    title: Expose Component Functions
-  - id: references-to-components
-    title: References to Components
-  - id: children-undefined
-    title: this.props.children undefined

docs/_includes/nav_blog.html

@@ -1,11 +1,10 @@
-<div class="nav-docs nav-blog">
+<div class="nav-docs">
   <div class="nav-docs-section">
     <h3>Recent posts</h3>
     <ul>
-      {% for post in site.posts limit:10 %}
-        <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
-      {% endfor %}
-      <li><a href="/react/blog/all.html">All posts ...</a></li>
+    {% for post in site.posts %}
+      <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
+    {% endfor %}
     </ul>
   </div>
 </div>

docs/_includes/nav_docs.html

@@ -1,42 +1,31 @@
 <div class="nav-docs">
-  <!-- Docs Nav -->
-  {% for section in site.data.nav_docs %}
-    <div class="nav-docs-section">
-      <h3>{{ section.title }}</h3>
-      <ul>
-        {% for item in section.items %}
-          <li>
-            <a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
-              {{ item.title }}
-            </a>
-            {% if item.subitems %}
-              <ul>
-                {% for subitem in item.subitems %}
-                  <li>
-                    <a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
-                      {{ subitem.title }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endfor %}
+  <div class="nav-docs-section">
+    <h3>Getting started</h3>
+    <ul>
+      <li><a href="/react/docs/getting-started.html"{% if page.id == 'docs-getting-started' %} class="active"{% endif %}>Getting Started</a></li>
+      <li><a href="/react/docs/tutorial.html"{% if page.id == 'docs-tutorial' %} class="active"{% endif %}>Tutorial</a></li>
+      <li><a href="/react/docs/common-questions.html"{% if page.id == 'docs-common-questions' %} class="active"{% endif %}>Common Questions</a></li>
+    </ul>
+  </div>
 
-  <!-- Tips Nav -->
-  {% for section in site.data.nav_tips %}
-    <div class="nav-docs-section">
-      <h3>{{ section.title }}</h3>
-      <ul>
-        {% for item in section.items %}
-          <li>
-            <a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  {% endfor %}
+  <div class="nav-docs-section">
+    <h3>Reference</h3>
+    <ul>
+      <li><a href="/react/docs/syntax.html"{% if page.id == 'docs-syntax' %} class="active"{% endif %}>JSX Syntax</a></li>
+      <li><a href="/react/docs/component-basics.html"{% if page.id == 'docs-component-basics' %} class="active"{% endif %}>Component Basics</a></li>
+      <li><a href="/react/docs/component-data.html"{% if page.id == 'docs-component-data' %} class="active"{% endif %}>Component Data</a></li>
+      <li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li>
+      <li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li>
+      <li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li>
+      <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li>
+      <li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li>
+    </ul>
+  </div>
+
+  <div class="nav-docs-section">
+    <h3>Appendix</h3>
+    <ul>
+      <li><a href="/react/docs/jsx-is-not-html.html"{% if page.id == 'docs-jsx-is-not-html' %} class="active"{% endif %}>JSX is not HTML</a></li>
+    </ul>
+  </div>
 </div>

docs/_js/examples/hello.js

@@ -6,7 +6,7 @@ var HELLO_COMPONENT = "\
 /** @jsx React.DOM */\n\
 var HelloMessage = React.createClass({\n\
   render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
   }\n\
 });\n\
 \n\

docs/_js/examples/markdown.js

@@ -11,17 +11,16 @@ var MarkdownEditor = React.createClass({\n\
   getInitialState: function() {\n\
     return {value: 'Type some *markdown* here!'};\n\
   },\n\
-  handleChange: function() {\n\
+  handleKeyUp: React.autoBind(function() {\n\
     this.setState({value: this.refs.textarea.getDOMNode().value});\n\
-  },\n\
+  }),\n\
   render: function() {\n\
     return (\n\
       <div className=\"MarkdownEditor\">\n\
         <h3>Input</h3>\n\
-        <textarea\n\
-          onChange={this.handleChange}\n\
-          ref=\"textarea\"\n\
-          defaultValue={this.state.value} />\n\
+        <textarea onKeyUp={this.handleKeyUp} ref=\"textarea\">\n\
+          {this.state.value}\n\
+        </textarea>\n\
         <h3>Output</h3>\n\
         <div\n\
           className=\"content\"\n\

docs/_js/examples/timer.js

@@ -3,28 +3,24 @@
  */
 
 var TIMER_COMPONENT = "\
-/** @jsx React.DOM */\n\
 var Timer = React.createClass({\n\
   getInitialState: function() {\n\
     return {secondsElapsed: 0};\n\
   },\n\
-  tick: function() {\n\
+  tick: React.autoBind(function() {\n\
     this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
-  },\n\
+  }),\n\
   componentDidMount: function() {\n\
-    this.interval = setInterval(this.tick, 1000);\n\
-  },\n\
-  componentWillUnmount: function() {\n\
-    clearInterval(this.interval);\n\
+    setInterval(this.tick, 1000);\n\
   },\n\
   render: function() {\n\
-    return (\n\
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
+    return React.DOM.div({},\n\
+      'Seconds Elapsed: ' + this.state.secondsElapsed\n\
     );\n\
   }\n\
 });\n\
 \n\
-React.renderComponent(<Timer />, mountNode);\
+React.renderComponent(Timer({}), mountNode);\
 ";
 
 React.renderComponent(

docs/_js/examples/todo.js

@@ -16,7 +16,7 @@ var TodoApp = React.createClass({\n\
   getInitialState: function() {\n\
     return {items: [], text: ''};\n\
   },\n\
-  onChange: function(e) {\n\
+  onKey: function(e) {\n\
     this.setState({text: e.target.value});\n\
   },\n\
   handleSubmit: function(e) {\n\
@@ -30,8 +30,8 @@ var TodoApp = React.createClass({\n\
       <div>\n\
         <h3>TODO</h3>\n\
         <TodoList items={this.state.items} />\n\
-        <form onSubmit={this.handleSubmit}>\n\
-          <input onChange={this.onChange} value={this.state.text} />\n\
+        <form onSubmit={this.handleSubmit.bind(this)}>\n\
+          <input onKeyUp={this.onKey.bind(this)} value={this.state.text} />\n\
           <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
         </form>\n\
       </div>\n\

docs/_js/html-jsx-lib.js

@@ -1,482 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * This is a very simple HTML to JSX converter. It turns out that browsers 
- * have good HTML parsers (who would have thought?) so we utilise this by 
- * inserting the HTML into a temporary DOM node, and then do a breadth-first
- * traversal of the resulting DOM tree.
- */
-;(function(global) {
-  'use strict';
-  
-  // https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType
-  var NODE_TYPE = {
-    ELEMENT: 1,
-    TEXT: 3,
-    COMMENT: 8
-  };
-  var ATTRIBUTE_MAPPING = {
-    'for': 'htmlFor',
-    'class': 'className'
-  };
-
-  /**
-   * Repeats a string a certain number of times.
-   * Also: the future is bright and consists of native string repetition:
-   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat
-   *
-   * @param {string} string  String to repeat
-   * @param {number} times   Number of times to repeat string. Integer.
-   * @see http://jsperf.com/string-repeater/2 
-   */
-  function repeatString(string, times) {
-    if (times === 1) {
-      return string;
-    }
-    if (times < 0) { throw new Error(); }
-    var repeated = '';
-    while (times) {
-      if (times & 1) {
-        repeated += string;
-      }
-      if (times >>= 1) {
-        string += string;
-      }
-    }
-    return repeated;
-  }
-
-  /**
-   * Determine if the string ends with the specified substring.
-   *
-   * @param {string} haystack String to search in
-   * @param {string} needle   String to search for
-   * @return {boolean}
-   */
-  function endsWith(haystack, needle) {
-    return haystack.slice(-needle.length) === needle;
-  }
-
-  /**
-   * Trim the specified substring off the string. If the string does not end 
-   * with the specified substring, this is a no-op.
-   *
-   * @param {string} haystack String to search in
-   * @param {string} needle   String to search for
-   * @return {string}
-   */
-  function trimEnd(haystack, needle) {
-    return endsWith(haystack, needle)
-      ? haystack.slice(0, -needle.length)
-      : haystack;
-  }
-
-  /**
-   * Convert a hyphenated string to camelCase.
-   */
-  function hyphenToCamelCase(string) {
-    return string.replace(/-(.)/g, function(match, chr) {
-      return chr.toUpperCase();
-    });
-  }
-
-  /**
-   * Determines if the specified string consists entirely of whitespace.
-   */
-  function isEmpty(string) {
-     return !/[^\s]/.test(string);
-  }
-
-  /**
-   * Determines if the specified string consists entirely of numeric characters.
-   */
-  function isNumeric(input) {
-    return input !== undefined 
-      && input !== null 
-      && (typeof input === 'number' || parseInt(input, 10) == input);
-  }
-
-  var HTMLtoJSX = function(config) {
-    this.config = config || {};
-
-    if (this.config.createClass === undefined) {
-      this.config.createClass = true;
-    }
-    if (!this.config.indent) {
-      this.config.indent = '  ';  
-    }
-    if (!this.config.outputClassName) {
-      this.config.outputClassName = 'NewComponent';
-    }
-  };
-  HTMLtoJSX.prototype = {
-    /**
-     * Reset the internal state of the converter
-     */
-    reset: function() {
-      this.output = '';
-      this.level = 0;
-    },
-    /**
-     * Main entry point to the converter. Given the specified HTML, returns a
-     * JSX object representing it.
-     * @param {string} html HTML to convert
-     * @return {string} JSX
-     */
-    convert: function(html) {
-      this.reset();
-
-      // It turns out browsers have good HTML parsers (imagine that). 
-      // Let's take advantage of it.
-      var containerEl = document.createElement('div');
-      containerEl.innerHTML = '\n' + this._cleanInput(html) + '\n';
-
-      if (this.config.createClass) {
-        if (this.config.outputClassName) {
-          this.output = 'var ' + this.config.outputClassName + ' = React.createClass({\n';
-        } else {
-          this.output = 'React.createClass({\n';
-        }
-        this.output += this.config.indent + 'render: function() {' + "\n";
-        this.output += this.config.indent + this.config.indent + 'return (\n';
-      }
-
-      if (this._onlyOneTopLevel(containerEl)) {
-        // Only one top-level element, the component can return it directly
-        // No need to actually visit the container element
-        this._traverse(containerEl);
-      } else {
-        // More than one top-level element, need to wrap the whole thing in a 
-        // container.
-        this.output += this.config.indent + this.config.indent + this.config.indent;
-        this.level++;
-        this._visit(containerEl);
-      }
-      this.output = this.output.trim() + '\n';
-      if (this.config.createClass) {
-        this.output += this.config.indent + this.config.indent + ');\n';
-        this.output += this.config.indent + '}\n';
-        this.output += '});';
-      }
-      return this.output;
-    },
-
-    /**
-     * Cleans up the specified HTML so it's in a format acceptable for 
-     * converting.
-     *
-     * @param {string} html HTML to clean
-     * @return {string} Cleaned HTML
-     */
-    _cleanInput: function(html) {
-      // Remove unnecessary whitespace
-      html = html.trim();
-      // Ugly method to strip script tags. They can wreak havoc on the DOM nodes
-      // so let's not even put them in the DOM.
-      html = html.replace(/<script(.*?)<\/script>/g, '');
-      return html;
-    },
-
-    /**
-     * Determines if there's only one top-level node in the DOM tree. That is,
-     * all the HTML is wrapped by a single HTML tag.
-     *
-     * @param {DOMElement} containerEl Container element
-     * @return {boolean}
-     */
-    _onlyOneTopLevel: function(containerEl) {
-      // Only a single child element
-      if (
-        containerEl.childNodes.length === 1 
-        && containerEl.childNodes[0].nodeType === NODE_TYPE.ELEMENT
-      ) {
-        return true;
-      }
-      // Only one element, and all other children are whitespace
-      var foundElement = false;
-      for (var i = 0, count = containerEl.childNodes.length; i < count; i++) {
-        var child = containerEl.childNodes[i];
-        if (child.nodeType === NODE_TYPE.ELEMENT) {
-          if (foundElement) {
-            // Encountered an element after already encountering another one
-            // Therefore, more than one element at root level
-            return false;
-          } else {
-            foundElement = true;
-          }
-        } else if (child.nodeType === NODE_TYPE.TEXT && !isEmpty(child.textContent)) {
-          // Contains text content
-          return false;
-        }
-      }
-      return true;
-    },
-
-    /**
-     * Gets a newline followed by the correct indentation for the current
-     * nesting level
-     *
-     * @return {string}
-     */
-    _getIndentedNewline: function() {
-      return '\n' + repeatString(this.config.indent, this.level + 2);
-    },
-
-    /**
-     * Handles processing the specified node
-     * 
-     * @param {Node} node
-     */
-    _visit: function(node) {
-      this._beginVisit(node);
-      this._traverse(node);
-      this._endVisit(node);
-    },
-
-    /**
-     * Traverses all the children of the specified node
-     *
-     * @param {Node} node
-     */
-    _traverse: function(node) {
-      this.level++;
-      for (var i = 0, count = node.childNodes.length; i < count; i++) {
-        this._visit(node.childNodes[i]);
-      }
-      this.level--;
-    },
-
-    /**
-     * Handle pre-visit behaviour for the specified node.
-     *
-     * @param {Node} node
-     */
-    _beginVisit: function(node) {
-      switch (node.nodeType) {
-        case NODE_TYPE.ELEMENT:
-          this._beginVisitElement(node);
-          break;
-
-        case NODE_TYPE.TEXT:
-          this._visitText(node);
-          break;
-
-        case NODE_TYPE.COMMENT:
-          this._visitComment(node);
-          break;
-
-        default:
-          console.warn('Unrecognised node type: ' + node.nodeType);
-      }
-    },
-
-    /**
-     * Handles post-visit behaviour for the specified node.
-     *
-     * @param {Node} node
-     */
-    _endVisit: function(node) {
-      switch (node.nodeType) {
-        case NODE_TYPE.ELEMENT:
-          this._endVisitElement(node);
-          break;
-        // No ending tags required for these types
-        case NODE_TYPE.TEXT:
-        case NODE_TYPE.COMMENT:
-          break;
-      }
-    },
-
-    /**
-     * Handles pre-visit behaviour for the specified element node
-     *
-     * @param {DOMElement} node
-     */
-    _beginVisitElement: function(node) {
-      var tagName = node.tagName.toLowerCase();
-      var attributes = [];
-      for (var i = 0, count = node.attributes.length; i < count; i++) {
-        attributes.push(this._getElementAttribute(node, node.attributes[i]));
-      }
-
-      this.output += '<' + tagName;
-      if (attributes.length > 0) {
-        this.output += ' ' + attributes.join(' ');
-      }
-      if (node.firstChild) {
-        this.output += '>';
-      }
-    },
-
-    /**
-     * Handles post-visit behaviour for the specified element node
-     *
-     * @param {Node} node
-     */
-    _endVisitElement: function(node) {
-      // De-indent a bit
-      // TODO: It's inefficient to do it this way :/
-      this.output = trimEnd(this.output, this.config.indent);
-      if (node.firstChild) {
-        this.output += '</' + node.tagName.toLowerCase() + '>';
-      } else {
-        this.output += ' />';
-      }
-    },
-
-    /**
-     * Handles processing of the specified text node
-     *
-     * @param {TextNode} node
-     */
-    _visitText: function(node) {
-      var text = node.textContent;
-      // If there's a newline in the text, adjust the indent level
-      if (text.indexOf('\n') > -1) {
-        text = node.textContent.replace(/\n\s*/g, this._getIndentedNewline());
-      }
-      this.output += text;
-    },
-
-    /**
-     * Handles processing of the specified text node
-     *
-     * @param {Text} node
-     */
-    _visitComment: function(node) {
-      // Do not render the comment
-      // Since we remove comments, we also need to remove the next line break so we
-      // don't end up with extra whitespace after every comment
-      //if (node.nextSibling && node.nextSibling.nodeType === NODE_TYPE.TEXT) {
-      //  node.nextSibling.textContent = node.nextSibling.textContent.replace(/\n\s*/, '');
-      //}
-      this.output += '{/*' + node.textContent.replace('*/', '* /') + '*/}';
-    },
-
-    /**
-     * Gets a JSX formatted version of the specified attribute from the node
-     *
-     * @param {DOMElement} node
-     * @param {object}     attribute
-     * @return {string}
-     */
-    _getElementAttribute: function(node, attribute) {
-      switch (attribute.name) {
-        case 'style':
-          return this._getStyleAttribute(attribute.value);
-        default:
-          var name = ATTRIBUTE_MAPPING[attribute.name] || attribute.name;
-          var result = name + '=';
-          // Numeric values should be output as {123} not "123"
-          if (isNumeric(attribute.value)) {
-            result += '{' + attribute.value + '}';
-          } else {
-            result += '"' + attribute.value.replace('"', '&quot;') + '"';
-          }
-          return result;
-      }
-    },
-
-    /**
-     * Gets a JSX formatted version of the specified element styles
-     *
-     * @param {string} styles
-     * @return {string}
-     */
-    _getStyleAttribute: function(styles) {
-      var jsxStyles = new StyleParser(styles).toJSXString();
-      return 'style={{' + jsxStyles + '}}';
-    }
-  };
-
-  /**
-   * Handles parsing of inline styles
-   * 
-   * @param {string} rawStyle Raw style attribute
-   * @constructor
-   */
-  var StyleParser = function(rawStyle) {
-    this.parse(rawStyle);
-  };
-  StyleParser.prototype = {
-    /**
-     * Parse the specified inline style attribute value
-     * @param {string} rawStyle Raw style attribute
-     */
-    parse: function(rawStyle) {
-      this.styles = {};
-      rawStyle.split(';').forEach(function(style) {
-        style = style.trim();
-        var firstColon = style.indexOf(':');
-        var key = style.substr(0, firstColon);
-        var value = style.substr(firstColon + 1).trim();
-        if (key !== '') {
-          this.styles[key] = value;  
-        }
-      }, this);
-    },
-
-    /**
-     * Convert the style information represented by this parser into a JSX
-     * string
-     *
-     * @return {string}
-     */
-    toJSXString: function() {
-      var output = [];
-      for (var key in this.styles) {
-        if (!this.styles.hasOwnProperty(key)) {
-          continue;
-        }
-        output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(this.styles[key]));
-      }
-      return output.join(', ');
-    },
-
-    /**
-     * Convert the CSS style key to a JSX style key
-     *
-     * @param {string} key CSS style key
-     * @return {string} JSX style key
-     */
-    toJSXKey: function(key) {
-      return hyphenToCamelCase(key);
-    },
-
-    /**
-     * Convert the CSS style value to a JSX style value
-     *
-     * @param {string} value CSS style value
-     * @return {string} JSX style value
-     */
-    toJSXValue: function(value) {
-      if (isNumeric(value)) {
-        // If numeric, no quotes
-        return value;
-      } else if (endsWith(value, 'px')) {
-        // "500px" -> 500
-        return trimEnd(value, 'px');
-      } else {
-        // Proably a string, wrap it in quotes
-        return '\'' + value.replace(/'/g, '"') + '\'';
-      }
-    }
-  };
-
-  // Expose public API
-  global.HTMLtoJSX = HTMLtoJSX;
-}(window));

docs/_js/html-jsx.js

@@ -1,89 +0,0 @@
-/**
- * Copyright 2013-2014 Facebook, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * @jsx React.DOM
- */
-
-/**
- * This is a web interface for the HTML to JSX converter contained in 
- * `html-jsx-lib.js`.
- */
-;(function() {
-
-var HELLO_COMPONENT = "\
-<!-- Hello world -->\n\
-<div class=\"awesome\" style=\"border: 1px solid red\">\n\
-  <label for=\"name\">Enter your name: </label>\n\
-  <input type=\"text\" id=\"name\" />\n\
-</div>\n\
-<p>Enter your HTML here</p>\
-";
-
-  var HTMLtoJSXComponent = React.createClass({
-    getInitialState: function() {
-      return {
-        outputClassName: 'NewComponent',
-        createClass: true
-      };
-    },
-    onReactClassNameChange: function(evt) {
-      this.setState({ outputClassName: evt.target.value });
-    },
-    onCreateClassChange: function(evt) {
-      this.setState({ createClass: evt.target.checked });
-    },
-    setInput: function(input) {
-      this.setState({ input: input });
-      this.convertToJsx();
-    },
-    convertToJSX: function(input) {
-      var converter = new HTMLtoJSX({
-        outputClassName: this.state.outputClassName,
-        createClass: this.state.createClass
-      });
-      return converter.convert(input);
-    },
-  	render: function() {
-      return (
-        <div>
-          <div id="options">
-            <label>
-              <input
-                type="checkbox"
-                checked={this.state.createClass}
-                onChange={this.onCreateClassChange} />
-                Create class
-            </label>
-            <label style={{display: this.state.createClass ? '' : 'none'}}>
-              ·
-              Class name:
-              <input
-                type="text"
-                value={this.state.outputClassName}
-                onChange={this.onReactClassNameChange} />
-            </label>
-          </div>
-          <ReactPlayground
-            codeText={HELLO_COMPONENT}
-            renderCode={true}
-            transformer={this.convertToJSX}
-            />
-        </div>
-      );
-    }
-  });
-
-  React.renderComponent(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
-}());

docs/_js/html5shiv.min.js

@@ -1,8 +0,0 @@
-/*
- HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
-*/
-(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
-a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
-c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
-"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
-for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

docs/_js/jsx-compiler.js

@@ -6,45 +6,14 @@ var HELLO_COMPONENT = "\
 /** @jsx React.DOM */\n\
 var HelloMessage = React.createClass({\n\
   render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
+    return <div>{'Hello ' + this.props.name}</div>;\n\
   }\n\
 });\n\
 \n\
 React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
 ";
 
-function transformer(harmony, code) {
-  return JSXTransformer.transform(code, {harmony: harmony}).code;
-}
-
-var CompilerPlayground = React.createClass({
-  getInitialState: function() {
-    return {harmony: false};
-  },
-  handleHarmonyChange: function(e) {
-    this.setState({harmony: e.target.checked});
-  },
-  render: function() {
-    return (
-      <div>
-        <ReactPlayground
-          codeText={HELLO_COMPONENT}
-          renderCode={true}
-          transformer={transformer.bind(null, this.state.harmony)}
-          showCompiledJSTab={false}
-        />
-        <label className="compiler-option">
-          <input
-            type="checkbox"
-            onChange={this.handleHarmonyChange}
-            checked={this.state.harmony} />{' '}
-          Enable ES6 transforms (<code>--harmony</code>)
-        </label>
-      </div>
-    );
-  },
-});
 React.renderComponent(
-  <CompilerPlayground />,
+  <ReactPlayground codeText={HELLO_COMPONENT} renderCode={true} />,
   document.getElementById('jsxCompiler')
 );

docs/_js/live_editor.js

@@ -14,33 +14,25 @@ var IS_MOBILE = (
 );
 
 var CodeMirrorEditor = React.createClass({
-  componentDidMount: function() {
-    if (IS_MOBILE) return;
-
+  componentDidMount: function(root) {
+    if (IS_MOBILE) {
+      return;
+    }
     this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
       mode: 'javascript',
       lineNumbers: false,
-      lineWrapping: true,
-      smartIndent: false,  // javascript mode does bad things with jsx indents
       matchBrackets: true,
-      theme: 'solarized-light',
-      readOnly: this.props.readOnly
+      theme: 'solarized-light'
     });
-    this.editor.on('change', this.handleChange);
+    this.editor.on('change', this.onChange.bind(this));
+    this.onChange();
   },
-
-  componentDidUpdate: function() {
-    if (this.props.readOnly) {
-      this.editor.setValue(this.props.codeText);
+  onChange: function() {
+    if (this.props.onChange) {
+      var content = this.editor.getValue();
+      this.props.onChange(content);
     }
   },
-
-  handleChange: function() {
-    if (!this.props.readOnly) {
-      this.props.onChange && this.props.onChange(this.editor.getValue());
-    }
-  },
-
   render: function() {
     // wrap in a div to fully contain CodeMirror
     var editor;
@@ -48,164 +40,91 @@ var CodeMirrorEditor = React.createClass({
     if (IS_MOBILE) {
       editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
     } else {
-      editor = <textarea ref="editor" defaultValue={this.props.codeText} />;
+      editor = <textarea ref="editor">{this.props.codeText}</textarea>;
     }
 
     return (
-      <div style={this.props.style} className={this.props.className}>
+      <div class={this.props.className}>
         {editor}
       </div>
     );
   }
 });
 
-var selfCleaningTimeout = {
-  componentDidUpdate: function() {
-    clearTimeout(this.timeoutID);
-  },
-
-  setTimeout: function() {
-    clearTimeout(this.timeoutID);
-    this.timeoutID = setTimeout.apply(null, arguments);
-  }
-};
-
 var ReactPlayground = React.createClass({
-  mixins: [selfCleaningTimeout],
-
-  MODES: {JSX: 'JSX', JS: 'JS'}, //keyMirror({JSX: true, JS: true}),
-
-  propTypes: {
-    codeText: React.PropTypes.string.isRequired,
-    transformer: React.PropTypes.func,
-    renderCode: React.PropTypes.bool,
-  },
-
-  getDefaultProps: function() {
-    return {
-      transformer: function(code) {
-        return JSXTransformer.transform(code).code;
-      },
-      showCompiledJSTab: true
-    };
-  },
+  MODES: {XJS: 'XJS', JS: 'JS'}, //keyMirror({XJS: true, JS: true}),
 
   getInitialState: function() {
-    return {
-      mode: this.MODES.JSX,
-      code: this.props.codeText,
-    };
+    return {mode: this.MODES.XJS, code: this.props.codeText};
   },
 
-  handleCodeChange: function(value) {
-    this.setState({code: value});
-    this.executeCode();
+  bindState: function(name) {
+    return function(value) {
+      var newState = {};
+      newState[name] = value;
+      this.setState(newState);
+    }.bind(this);
   },
 
-  handleCodeModeSwitch: function(mode) {
-    this.setState({mode: mode});
-  },
-
-  compileCode: function() {
-    return this.props.transformer(this.state.code);
+  getDesugaredCode: function() {
+    return JSXTransformer.transform(this.state.code).code;
   },
 
   render: function() {
-    var isJS = this.state.mode === this.MODES.JS;
-    var compiledCode = '';
-    try {
-      compiledCode = this.compileCode();
-    } catch (err) {}
-
-    var JSContent =
-      <CodeMirrorEditor
-        key="js"
-        className="playgroundStage CodeMirror-readonly"
-        onChange={this.handleCodeChange}
-        codeText={compiledCode}
-        readOnly={true}
-      />;
-
-    var JSXContent =
-      <CodeMirrorEditor
-        key="jsx"
-        onChange={this.handleCodeChange}
-        className="playgroundStage"
-        codeText={this.state.code}
-      />;
-
-    var JSXTabClassName =
-      'playground-tab' + (isJS ? '' : ' playground-tab-active');
-    var JSTabClassName =
-      'playground-tab' + (isJS ? ' playground-tab-active' : '');
-
-    var JSTab =
-      <div
-        className={JSTabClassName}
-        onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JS)}>
-          Compiled JS
-      </div>;
-
-    var JSXTab =
-      <div
-        className={JSXTabClassName}
-        onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
-          Live JSX Editor
-      </div>
+    var content;
+    if (this.state.mode === this.MODES.XJS) {
+      content =
+        <CodeMirrorEditor
+          onChange={this.bindState('code')}
+          class="playgroundStage"
+          codeText={this.state.code}
+        />;
+    } else if (this.state.mode === this.MODES.JS) {
+      content =
+        <div class="playgroundJS playgroundStage">
+            {this.getDesugaredCode()}
+        </div>;
+    }
 
     return (
-      <div className="playground">
-        <div>
-          {JSXTab}
-          {this.props.showCompiledJSTab && JSTab}
+      <div class="playground">
+        <div class="playgroundCode">
+          {content}
         </div>
-        <div className="playgroundCode">
-          {isJS ? JSContent : JSXContent}
-        </div>
-        <div className="playgroundPreview">
+        <div class="playgroundPreview">
           <div ref="mount" />
         </div>
       </div>
     );
   },
-
   componentDidMount: function() {
     this.executeCode();
   },
-
-  componentDidUpdate: function(prevProps, prevState) {
-    // execute code only when the state's not being updated by switching tab
-    // this avoids re-displaying the error, which comes after a certain delay
-    if (this.props.transformer !== prevProps.transformer ||
-        this.state.code !== prevState.code) {
-      this.executeCode();
-    }
+  componentDidUpdate: function() {
+    this.executeCode();
   },
-
   executeCode: function() {
     var mountNode = this.refs.mount.getDOMNode();
 
     try {
-      React.unmountComponentAtNode(mountNode);
+      React.unmountAndReleaseReactRootNode(mountNode);
     } catch (e) { }
 
     try {
-      var compiledCode = this.compileCode();
       if (this.props.renderCode) {
         React.renderComponent(
-          <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
+          <pre>{this.getDesugaredCode()}</pre>,
           mountNode
         );
       } else {
-        eval(compiledCode);
+        eval(this.getDesugaredCode());
       }
-    } catch (err) {
-      this.setTimeout(function() {
-        React.renderComponent(
-          <div className="playgroundError">{err.toString()}</div>,
-          mountNode
-        );
-      }, 500);
+    } catch (e) {
+      React.renderComponent(
+        <div content={e.toString()} class="playgroundError" />,
+        mountNode
+      );
     }
   }
 });
+

docs/_layouts/default.html

@@ -1,36 +1,29 @@
 <!DOCTYPE html>
-<!--[if IE]><![endif]-->
 <html>
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>React | {{ page.title }}</title>
   <meta name="viewport" content="width=device-width">
-  <meta property="og:title" content="React | {{ page.title }}">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
-  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
-  <meta property="og:description" content="A JavaScript library for building user interfaces">
-  <meta property="fb:app_id" content="623268441017527">
+  <meta property="og:title" content="React | {{ page.title }}" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="http://facebook.github.io/react{{ page.url }}" />
+  <meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
+  <meta property="og:description" content="A JavaScript library for building user interfaces" />
 
   <link rel="shortcut icon" href="/react/favicon.ico">
   <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
 
+  <link rel="stylesheet" href="/react/css/react.css">
   <link rel="stylesheet" href="/react/css/syntax.css">
   <link rel="stylesheet" href="/react/css/codemirror.css">
-  <link rel="stylesheet" href="/react/css/react.css">
 
   <script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
 
-  <!--[if lte IE 8]>
-  <script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
-  <script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
-  <script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
-  <![endif]-->
   <script type="text/javascript" src="/react/js/codemirror.js"></script>
   <script type="text/javascript" src="/react/js/javascript.js"></script>
-  <script type="text/javascript" src="/react/js/react.js"></script>
+  <script type="text/javascript" src="/react/js/react.min.js"></script>
   <script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
   <script type="text/javascript" src="/react/js/live_editor.js"></script>
   <script type="text/javascript" src="/react/js/showdown.js"></script>
@@ -46,12 +39,13 @@
           React
         </a>
         <ul class="nav-site">
-          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
+          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' %} class="active"{% endif %}>docs</a></li>
           <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
           <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
           <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
           <li><a href="http://github.com/facebook/react">github</a>
         </ul>
+        <!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
       </div>
     </div>
 
@@ -74,15 +68,11 @@
     {{ content }}
 
     <footer class="wrap">
-      <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>
+      <div class="left">A Facebook &amp; Instagram collaboration.</div>
+      <div class="right">&copy; 2013 Facebook Inc.</div>
     </footer>
   </div>
   <div id="fb-root"></div>
-
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/_layouts/docs.html

@@ -7,12 +7,8 @@ sectionid: docs
   {% include nav_docs.html %}
 
   <div class="inner-content">
-    <h1>
-      {{ page.title }}
-      <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
-    </h1>
+    <h1>{{ page.title }}</h1>
     <div class="subHeader">{{ page.description }}</div>
-
     {{ content }}
 
     <div class="docs-prevnext">
@@ -23,5 +19,7 @@ sectionid: docs
         <a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
       {% endif %}
     </div>
+
+    <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>
   </div>
 </section>

docs/_layouts/post.html

@@ -16,5 +16,6 @@ sectionid: blog
     </div>
 
     <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
+    <div class="fb-comments" data-width="650" data-num-posts="10" data-href="{{ site.url }}{{ site.baseurl }}{{ page.url }}"></div>
   </div>
 </section>

docs/_layouts/redirect.html

@@ -1,6 +0,0 @@
-<html>
-<head>
-  <meta http-equiv="refresh" content="0; {{ page.destination }}">
-</head>
-<body></body>
-</html>

docs/_layouts/tips.html

@@ -1,23 +0,0 @@
----
-layout: default
-sectionid: tips
----
-
-<section class="content wrap documentationContent">
-  {% include nav_docs.html %}
-
-  <div class="inner-content">
-    <h1>{{ page.title }}</h1>
-    <div class="subHeader">{{ page.description }}</div>
-    {{ content }}
-
-    <div class="docs-prevnext">
-      {% if page.prev %}
-        <a class="docs-prev" href="/react/tips/{{ page.prev }}">&larr; Prev</a>
-      {% endif %}
-      {% if page.next %}
-        <a class="docs-next" href="/react/tips/{{ page.next }}">Next &rarr;</a>
-      {% endif %}
-    </div>
-  </div>
-</section>

docs/_plugins/header_links.rb

@@ -1,17 +0,0 @@
-require 'redcarpet'
-require 'sanitize'
-
-# Simple converter that is probably better than RedCarpet's built in TOC id
-# generator (which ends up with things lik id="toc_1"... terrible).
-
-class Redcarpet::Render::HTML
-  def header(title, level)
-    clean_title = Sanitize.clean(title)
-      .downcase
-      .gsub(/\s+/, "-")
-      .gsub(/[^A-Za-z0-9\-_.]/, "")
-
-    return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
-  end
-end
-

docs/_posts/2013-06-05-why-react.md

@@ -20,8 +20,8 @@ These templates dictate the full set of abstractions that you are allowed to use
 to build your UI.
 
 React approaches building user interfaces differently by breaking them into
-**components**. This means React uses a real, full featured programming language
-to render views, which we see as an advantage over templates for a few reasons:
+**components**. This means React uses JavaScript to generate markup, which we
+see as an advantage over templates for a few reasons:
 
 - **JavaScript is a flexible, powerful programming language** with the ability
   to build abstractions. This is incredibly important in large applications.
@@ -31,8 +31,8 @@ to render views, which we see as an advantage over templates for a few reasons:
   **no manual string concatenation** and therefore less surface area for XSS
   vulnerabilities.
 
-We've also created [JSX](/react/docs/jsx-in-depth.html), an optional syntax
-extension, in case you prefer the readability of HTML to raw JavaScript.
+We've also created [JSX](http://facebook.github.io/react/docs/syntax.html), an optional
+syntax extension, in case you prefer the readability of HTML to raw JavaScript.
 
 ## Reactive updates are dead simple.
 
@@ -41,7 +41,7 @@ React really shines when your data changes over time.
 In a traditional JavaScript application, you need to look at what data changed
 and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
 which provides a declarative interface via directives and data binding [requires
-a linking function to manually update DOM nodes](http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
+a linking function to manually update DOM nodes](http://docs.angularjs.org/guide/directive#reasonsbehindthecompilelinkseparation).
 
 React takes a different approach.
 
@@ -75,15 +75,17 @@ some pretty cool things with it:
 - We've built internal prototypes that run React apps in a web worker and use
   React to drive **native iOS views** via an Objective-C bridge.
 - You can run React
-  [on the server](http://github.com/petehunt/react-server-rendering-example)
+  [on the server](http://github.com/petehunt/react-server-rendering)
   for SEO, performance, code sharing and overall flexibility.
 - Events behave in a consistent, standards-compliant way in all browsers
   (including IE8) and automatically use
   [event delegation](http://davidwalsh.name/event-delegate).
 
-Head on over to [facebook.github.io/react](/react) to check out what we have
-built. Our documentation is geared towards building apps with the framework,
-but if you are interested in the nuts and bolts
-[get in touch](/react/support.html) with us!
+Head on over to
+[facebook.github.io/react](http://facebook.github.io/react) to check
+out what we have built. Our documentation is geared towards building
+apps with the framework, but if you are interested in the
+nuts and bolts
+[get in touch](http://facebook.github.io/react/support.html) with us!
 
 Thanks for reading!

docs/_posts/2013-06-21-react-v0-3-3.md

@@ -1,24 +0,0 @@
----
-title: "React v0.3.3"
-layout: post
-author: Paul O'Shannessy
----
-
-We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
-
-
-## react-tools
-
-* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
-* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
-* Freeze our esprima dependency.
-
-
-## React
-
-* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
-
-
-## JSXTransformer
-
-* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.

docs/_posts/2013-06-27-community-roundup-3.md

@@ -1,91 +0,0 @@
----
-title: "Community Round-up #3"
-layout: post
-author: Vjeux
----
-
-The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
-
-## Moving From Backbone To React
-
-[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
-
-> [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
->
-> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
->
-> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
->
-> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
-
-## Grunt Task for JSX
-
-[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
-
-> Grunt task for compiling Facebook React's .jsx templates into .js
->
-> ```javascript
-grunt.initConfig({
-  react: {
-    app: {
-      options: { extension: 'js' },
-      files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
-```
->
-> It also works great with `grunt-browserify`!
->
-> ```javascript
-browserify: {
-  options: {
-    transform: [ require('grunt-react').browserify ]
-  },
-  app: {
-    src: 'path/to/source/main.js',
-    dest: 'path/to/target/output.js'
-```
->
-> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
-
-## Backbone/Handlebars Nested Views
-
-[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
-
-> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
->
-> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
->
-> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
->
-> [Read the full post...](http://joelburget.com/react/)
-
-## JSRomandie Meetup
-
-[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
-
-<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
-
-## CoffeeScript integration
-
-[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
-
-> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
->
-> ```javascript
-{div, h3, textarea} = React.DOM
-(div {className: 'MarkdownEditor'}, [
-  (h3 {}, 'Input'),
-  (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
-    @state.value
-  )
-])
-```
->
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
-
-## Tutorial in Plain Javascript
-
-We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain Javascript.
-
-> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
->
-> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)

docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md

@@ -1,52 +0,0 @@
----
-title: "New in React v0.4: Autobind by Default"
-layout: post
-author: Paul O'Shannessy
----
-
-React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
-
-
-## What is React.autoBind?
-
-If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
-
-Before we launched React, we would write this:
-
-```js{4}
-React.createClass({
-  onClick: function(event) {/* do something with this */},
-  render: function() {
-    return <button onClick={this.onClick.bind(this)} />;
-  }
-});
-```
-
-We wrote `React.autoBind` as a way to cache the function creation and save on memory usage. Since `render` can get called multiple times, if you used `this.onClick.bind(this)` you would actually create a new function on each pass. With React v0.3 you were able to write this instead:
-
-```js{2,4}
-React.createClass({
-  onClick: React.autoBind(function(event) {/* do something with this */}),
-  render: function() {
-    return <button onClick={this.onClick} />;
-  }
-});
-```
-
-
-## What's Changing in v0.4?
-
-After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
-
-Starting with v0.4 you can just write this:
-
-```js{2,4}
-React.createClass({
-  onClick: function(event) {/* do something with this */},
-  render: function() {
-    return <button onClick={this.onClick} />;
-  }
-});
-```
-
-For v0.4 we will simply be making `React.autoBind` a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.

docs/_posts/2013-07-03-community-roundup-4.md

@@ -1,58 +0,0 @@
----
-title: "Community Round-up #4"
-layout: post
-author: Vjeux
----
-
-React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
-
-## Khan Academy
-
-[Ben Kamens](http://bjk5.com/) explains how [Ben Alpert](http://benalpert.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
-
-> Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.
->
-> "The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"
->
-> [Read the full post...](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
-
-The best part is the demo of how React reconciliation process makes live editing more user-friendly.
-
-> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
-> <figure>[<img src="/react/img/blog/monkeys.gif" width="70%" />](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)</figure>
-
-## React Snippets
-
-Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/react/docs/reusable-components.html) and [Lifecycle Methods](/react/docs/working-with-the-browser.html).
-
-> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
->
->  * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
->
-> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
->
->  * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
->  * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
->
-> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
->
-> * [Gist](https://gist.github.com/zpao/5686416): The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
-> * [Gist](https://gist.github.com/petehunt/5687230): This example is doing everything -- including the IO -- inside of a single React component.
-> * [Gist](https://gist.github.com/petehunt/5687276): One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
->
-> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
->
-> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
-
-## Introduction to React Screencast
-
-[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
-
-<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
-
-## Snake in React
-
-[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
-
-> [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
-> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>

docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md

@@ -1,63 +0,0 @@
----
-title: "New in React v0.4: Prop Validation and Default Values"
-layout: post
-author: Paul O'Shannessy
----
-
-Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
-
-
-## Validation
-
-Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
-
-React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
-
-```js
-React.createClass({
-  propTypes: {
-    // An optional string prop named "description".
-    description: React.PropTypes.string,
-
-    // A required enum prop named "category".
-    category: React.PropTypes.oneOf(['News','Photos']).isRequired,
-
-    // A prop named "dialog" that requires an instance of Dialog.
-    dialog: React.PropTypes.instanceOf(Dialog).isRequired
-  },
-  ...
-});
-```
-
-
-## Default Values
-
-One common pattern we've seen with our React code is to do something like this:
-
-```js
-React.createClass({
-  render: function() {
-    var value = this.props.value || 'default value';
-    return <div>{value}</div>;
-  }
-});
-```
-
-Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
-
-```js
-React.createClass({
-  getDefaultProps: function() {
-    return {
-      value: 'default value'
-    };
-  }
-  ...
-});
-```
-
-We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it.
-
-- - -
-
-Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.

docs/_posts/2013-07-17-react-v0-4-0.md

@@ -1,40 +0,0 @@
----
-title: "React v0.4.0"
-layout: post
-author: Paul O'Shannessy
----
-
-Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
-
-
-This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](http://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
-
-React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
-
-When you're ready, [go download it](/react/downloads.html)!
-
-
-### React
-
-* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
-* Support for more DOM elements and attributes (e.g., `<canvas>`)
-* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
-* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
-* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
-* We've implemented an improved synthetic event system that conforms to the W3C spec.
-* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
-
-### JSX
-
-* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
-* Children are now transformed directly into arguments instead of being wrapped in an array
-  E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
-  Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
-  If you were using React without JSX previously, your code should still work.
-
-### react-tools
-
-* Fixed a number of bugs when transforming directories
-* No longer re-write `require()`s to be relative unless specified

docs/_posts/2013-07-23-community-roundup-5.md

@@ -1,99 +0,0 @@
----
-title: "Community Round-up #5"
-layout: post
-author: Vjeux
----
-
-We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
-
-## Cross-browser onChange
-
-[Ben Alpert](http://benalpert.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.
-
-> First off, what is the input event? If you have an `<input>` element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.
->
-> Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using `setTimeout(fn, 0)` or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).
->
-> [Read the full post...](http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
-
-
-## React Samples
-
-Learning a new library is always easier when you have working examples you can play with. [jwh](https://github.com/jhw) put many of them on his [react-samples Github repo](https://github.com/jhw/react-samples).
-
-> Some simple examples with Facebook's React framework
->
-> * Bootstrap action bar, modal and table [#1](https://rawgithub.com/jhw/react-samples/master/html/actionbar.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html)
-> * Comments [#1](https://rawgithub.com/jhw/react-samples/master/html/comments1.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/comments2.html)
-> * Data Table [#1](https://rawgithub.com/jhw/react-samples/master/html/datatable.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/datatable2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/datatable3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/datatable4.html),
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/datatable5.html)
-> * Filter Bar [#1](https://rawgithub.com/jhw/react-samples/master/html/filterbar.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html),
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html)
-> * Fundoo Rating [#1](https://rawgithub.com/jhw/react-samples/master/html/fundoo.html)
-> * Line Char: [#1](https://rawgithub.com/jhw/react-samples/master/html/linechart.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/linechart2.html)
-> * Multi tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/multitabs.html)
-> * Select [#1](https://rawgithub.com/jhw/react-samples/master/html/select.html)
-> * Simple Tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html),
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html),
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html),
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html)
-> * Toggle [#1](https://rawgithub.com/jhw/react-samples/master/html/toggle.html)
-
-
-## React Chosen Wrapper
-
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](http://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
-
-```javascript
-React.renderComponent(
-  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
-    <option value="Facebook">Facebook</option>
-    <option value="Harvest">Harvest</option>
-  </Chosen>
-, document.body);
-```
-
-
-## JSX and ES6 Template Strings
-
-[Domenic Denicola](http://domenicdenicola.com/) wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.
-
-<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
-
-
-## React Presentation
-
-[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
-
-<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## Docs
-
-[Pete Hunt](http://www.petehunt.net/) rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.
-
-> Guides
->
-> * [Why React?](/react/docs/why-react.html)
-> * [Displaying Data](/react/docs/displaying-data.html)
->   * [JSX in Depth](/react/docs/jsx-in-depth.html)
->   * [JSX Gotchas](/react/docs/jsx-gotchas.html)
-> * [Interactivity and Dynamic UIs](/react/docs/interactivity-and-dynamic-uis.html)
-> * [Multiple Components](/react/docs/multiple-components.html)
-> * [Reusable Components](/react/docs/reusable-components.html)
-> * [Forms](/react/docs/forms.html)
-> * [Working With the Browser](/react/docs/working-with-the-browser.html)
->   * [More About Refs](/react/docs/more-about-refs.html)
-> * [Tooling integration](/react/docs/tooling-integration.html)
-> * [Reference](/react/docs/top-level-api.html)

docs/_posts/2013-07-26-react-v0-4-1.md

@@ -1,25 +0,0 @@
----
-title: "React v0.4.1"
-layout: post
-author: Paul O'Shannessy
----
-
-React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
-
-
-## React
-
-* `setState` callbacks are now executed in the scope of your component.
-* `click` events now work on Mobile Safari.
-* Prevent a potential error in event handling if `Object.prototype` is extended.
-* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
-* Improved support for `<iframe>` attributes.
-* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
-
-
-## JSXTransformer
-
-* Improved environment detection so it can be run in a non-browser environment.
-
-
-[Download it now!](/react/downloads.html)

docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md

@@ -1,54 +0,0 @@
----
-title: "Use React and JSX in Ruby on Rails"
-layout: post
-author: Paul O'Shannessy
----
-
-Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
-
-
-This gem has 2 primary purposes:
-
-1. To package `react.js` in a way that's easy to use and easy to update.
-2. To allow you to write JSX without an external build step to transform that into JS.
-
-
-## Packaging react.js
-
-To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
-
-```ruby
-# config/environments/development.rb
-
-MyApp::Application.configure do
-  config.react.variant = :development
-  # use :production in production.rb
-end
-```
-
-```js
-// app/assets/javascript/application.js
-
-//= require react
-```
-
-
-## Writing JSX
-
-When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
-
-```js
-/** @jsx React.DOM */
-React.renderComponent(<MyComponent/>, document.body)
-```
-
-
-## Asset Pipeline
-
-`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
-
-
-## Installation
-
-Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
-

docs/_posts/2013-08-05-community-roundup-6.md

@@ -1,80 +0,0 @@
----
-title: "Community Round-up #6"
-layout: post
-author: Vjeux
----
-
-This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
-
-## React Game Tutorial
-
-[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
-<figure>[![](/react/img/blog/dog-tutorial.png)](https://rawgithub.com/calebcassel/react-demo/master/part1.html)</figure>
-
-
-## Reactify
-
-[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
-
-> Browserify v2 transform for `text/jsx`. Basic usage is:
->
-> ```
-% browserify -t reactify main.jsx
-```
->
-> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file.
->
-> [Check it out on Github...](https://github.com/andreypopp/reactify)
-
-
-
-## React Integration with Este
-
-[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
-
-```coffeescript
-este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
-  render: ->
-    @div [
-      este.demos.react.todoList 'items': @state['items']
-      if @state['items'].length
-        @p "#{@state['items'].length} items."
-      @form 'onSubmit': @onFormSubmit, [
-        @input
-          'onChange': @onChange
-          'value': @state['text']
-          'autoFocus': true
-          'ref': 'textInput'
-        @button "Add ##{@state['items'].length + 1}"
-      ]
-    ]
-```
-
-[Check it out on Github...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
-
-
-## React Stylus Boilerplate
-
-[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
-
-> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
-> 
-> - Very minimal HTML boilerplate
-> - Uses Stylus, with nib included
-> - Uses two build targets:
->   - `grunt build` to compile JSX and Stylus into a development build
->   - `grunt dist` to minify and optimize the development build for production
->
-> [Check it out on Github...](https://github.com/zaim/react-stylus-boilerplate)
-
-
-## WebFUI
-
-[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui).
-
-> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
->
-> Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
-<figure>[![](/react/img/blog/landoflisp.png)](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)</figure>
->
-> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)

docs/_posts/2013-08-19-use-react-and-jsx-in-python-applications.md

@@ -1,56 +0,0 @@
----
-title: "Use React and JSX in Python Applications"
-layout: post
-author: Kunal Mehta
----
-
-Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
-
-## Usage
-
-Transform your JSX files via the provided `jsx` module:
-
-```python
-from react import jsx
-
-# For multiple paths, use the JSXTransformer class.
-transformer = jsx.JSXTransformer()
-for jsx_path, js_path in my_paths:
-    transformer.transform(jsx_path, js_path)
-
-# For a single file, you can use a shortcut method.
-jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
-```
-
-For full paths to React files, use the `source` module:
-
-```python
-from react import source
-
-# path_for raises IOError if the file doesn't exist.
-react_js = source.path_for('react.min.js')
-```
-
-## Django
-
-PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this:
-
-```python
-PIPELINE_COMPILERS = (
-  'react.utils.pipeline.JSXCompiler',
-)
-```
-
-## Installation
-
-PyReact is hosted on PyPI, and can be installed with `pip`:
-
-    $ pip install PyReact
-
-Alternatively, add it into your `requirements` file:
-
-    PyReact==0.1.1
-
-**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).
-
-For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!

docs/_posts/2013-08-26-community-roundup-7.md

@@ -1,74 +0,0 @@
----
-title: "Community Round-up #7"
-layout: post
-author: Vjeux
----
-
-It's been three months since we open sourced React and it is going well. Some stats so far:
-
-* 114 285 unique visitors on this website
-* [1933 stars](https://github.com/facebook/react/stargazers) and [210 forks](https://github.com/facebook/react/network/members)
-* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
-* [76 Github projects using React](https://gist.github.com/vjeux/6335762)
-* [30 contributors](https://github.com/facebook/react/graphs/contributors)
-* [15 blog posts](http://facebook.github.io/react/blog/)
-* 2 early adopters: [Khan Academy](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
-
-
-## Wolfenstein Rendering Engine Ported to React
-
-[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
-<figure>[![](/react/img/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)</figure>
-
-
-## React & Meteor
-
-[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
-
-> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
->
-> The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.
->
->```javascript
->var MyComponent = React.createClass({
->  mixins: [MeteorMixin],
->
->  getMeteorState: function() {
->    return { foo: Session.get('foo') };
->  },
->
->  render: function() {
->    return <div>{this.state.foo}</div>;
->  }
->});
->```
->
-> Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.
->
-> [Read more ...](https://github.com/benjamn/meteor-react)
-
-## React Page
-
-[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
-
-> Easy Application Development with React JavaScript
-> <figure>[![](/react/img/blog/react-page.png)](https://github.com/facebook/react-page/)</figure>
->
-> **Why Server Rendering?**
->
-> * Faster initial page speed:
->   * Markup displayed before downloading large JavaScript.
->   * Markup can be generated more quickly on a fast server than low power client devices.
-> * Faster Development and Prototyping:
->   * Instantly refresh your app without waiting for any watch scripts or bundlers.
-> * Easy deployment of static content pages/blogs: just archive using recursive wget.
-> * SEO benefits of indexability and perf.
->
-> **How Does Server Rendering Work?**
->
-> * `react-page` computes page markup on the server, sends it to the client so the user can see it quickly.
-> * The corresponding JavaScript is then packaged and sent.
-> * The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
-> * From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
->
-> [Try it out ...](https://github.com/facebook/react-page/)

docs/_posts/2013-09-24-community-roundup-8.md

@@ -1,70 +0,0 @@
----
-title: "Community Round-up #8"
-layout: post
-author: Vjeux
----
-
-A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
-
-First, we are organizing a [React Hackathon](http://reactjshack-a-thon.splashthat.com/) in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!
-
-We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) using the tag [[reactjs]](http://stackoverflow.com/questions/tagged/reactjs). Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.
-
-## Javascript Jabber
-
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) were interviewed on [Javascript Jabber](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) for an hour.  They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.
-
-> **PETE:**  So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.
->
-> **MERRICK:**  That's true. You don't get into these odd states.
->
-> **PETE:**  Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.
->
-> Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.
->
-> [Read the full conversation ...](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
-
-
-## JSXTransformer Trick
-
-While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.
-
-<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform(&quot;/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */&quot; + element.innerHTML).code</p>&mdash; Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
-<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
-
-
-## Remarkable React
-
-[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writting _active apps_ using the DOM API and shows how React handles it.
-
-> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
->
-> You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)
->
-> Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the `requestAnimationFrame()`.
->
-> What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.
->
-> The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example `e.target` works, no need to look for the event object or checking whether it's `e.target` or `e.srcElement` (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event `<input onChange>` fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.
->
-> The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.
->
-> [Read More ...](http://www.phpied.com/remarkable-react/)
-
-
-## Markdown in React
-
-[Ben Alpert](http://benalpert.com/) converted [marked](https://github.com/chjj/marked), a Markdown Javascript implementation, in React: [marked-react](https://github.com/spicyj/marked-react). Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to `escape` will not introduce an XSS vulnerability.
-<figure>[![](/react/img/blog/markdown_refactor.png)](https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457)</figure>
-
-
-## Unite from BugBusters
-
-[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
-<figure>[![](/react/img/blog/unite.png)](https://unite.bugbuster.com/)</figure>
-
-## #reactjs IRC Logs
-
-[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

docs/_posts/2013-10-16-react-v0.5.0.md

@@ -1,52 +0,0 @@
----
-title: "React v0.5"
-layout: post
-author: Paul O'Shannessy
----
-
-This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
-
-The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
-
-The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/react/docs/addons.html).
-
-## Thanks to Our Community
-
-We added *22 new people* to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
-
-It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
-
-
-## Changelog
-
-### React
-
-* Memory usage improvements - reduced allocations in core which will help with GC pauses
-* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
-* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
-* Support for Selection events.
-* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
-* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
-* Support for additional SVG properties (`rx`, `ry`).
-* Support for using `getInitialState` and `getDefaultProps` in mixins.
-* Support mounting into iframes.
-* Bug fixes for controlled form components.
-* Bug fixes for SVG element creation.
-* Added `React.version`.
-* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
-* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
-* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
-* Began laying down work for refined performance analysis.
-* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
-* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
-
-### React with Addons (New!)
-
-* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/react/docs/addons.html).
-
-### JSX
-
-* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
-* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
-* Improved compatibility for Windows
-* Improved support for maintaining line numbers when transforming.

docs/_posts/2013-10-29-react-v0-5-1.md

@@ -1,25 +0,0 @@
----
-title: "React v0.5.1"
-layout: post
-author: Paul O'Shannessy
----
-
-This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Ben Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
-
-## Changelog
-
-### React
-
-* Fixed bug with `<input type="range">` and selection events.
-* Fixed bug with selection and focus.
-* Made it possible to unmount components from the document root.
-* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
-
-### React with Addons
-
-* Fixed bug with transition and animation event detection.
-
-[1]: https://github.com/spicyj
-[2]: https://github.com/andreypopp
-[3]: https://github.com/lrowe
-

docs/_posts/2013-10-3-community-roundup-9.md

@@ -1,100 +0,0 @@
----
-title: "Community Round-up #9"
-layout: post
-author: Vjeux
----
-
-We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
-
-![](/react/img/blog/react-hackathon.jpg)
-
-
-## React Hackathon Winner
-
-[Alex Swan](http://bold-it.com/) implemented [Qu.izti.me](http://qu.izti.me/), a multi-player quiz game. It is real-time via Web Socket and mobile friendly.
-
-> The game itself is pretty simple. People join the "room" by going to [http://qu.izti.me](http://qu.izti.me/) on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.
->
-> In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
-><figure>[![](/react/img/blog/quiztime.png)](http://bold-it.com/javascript/facebook-react-example/)</figure>
->
-> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
-
-## JSConf EU Talk: Rethinking Best Practices
-
-[Pete Hunt](http://www.petehunt.net/) presented React at JSConf EU. He covers three controversial design decisions of React:
-
-1. Build **components**, not templates
-2. Re-render the whole app on every update
-3. Virtual DOM
-
-The video will be available soon on the [JSConf EU website](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html), but in the meantime, here are Pete's slides:
-
-<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
-
-
-## Pump - Clojure bindings for React
-
-[Alexander Solovyov](http://solovyov.net/) has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
-
-```ruby
-(ns your.app
-  (:require-macros [pump.def-macros :refer [defr]])
-  (:require [pump.core]))
-
-(defr Component
-  :get-initial-state #(identity {:some-value ""})
-
-  [component props state]
-
-  [:div {:class-name "test"} "hello"])
-```
-
-[Check it out on GitHub...](https://github.com/piranha/pump)
-
-
-## JSXHint
-
-[Todd Kennedy](http://blog.selfassembled.org/) working at [Cond&eacute; Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
-
-> A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
->
-> ```
-npm install -g jsxhint
-```
->
-> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
-
-
-## Turbo React
-
-[Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
-
-> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
->
-> The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
->
-> With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
-><figure>[![](/react/img/blog/turboreact.png)](https://turbo-react.herokuapp.com/)</figure>
->
-> [Check out the demo...](https://turbo-react.herokuapp.com/)
-
-
-## Reactive Table
-
-[Stoyan Stefanov](http://www.phpied.com/) continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.
-
-> React is all about components. So let's build one.
->
-> Let's call it Table (to avoid any confusion what the component is about).
->
-> ```javascript
-var Table = React.createClass({
-  /*stuff goeth here*/
-});
-```
->
-> You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.
->
-> [Read the full article...](http://www.phpied.com/reactive-table/)
-

docs/_posts/2013-11-05-thinking-in-react.md

@@ -1,143 +0,0 @@
----
-title: "Thinking in React"
-layout: post
-author: Pete Hunt
----
-
-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/_posts/2013-11-06-community-roundup-10.md

@@ -1,125 +0,0 @@
----
-title: "Community Round-up #10"
-layout: post
-author: Vjeux
----
-
-This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
-
-The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.
-
-## Khan Academy - Officially moving to React
-
-[Joel Burget](http://joelburget.com/) announced at Hack Reactor that new front-end code at Khan Academy should be written in React!
-
-> How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.
->
-> Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.
->
-> We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.
->
-> I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.
->
-> [Read the full article](http://joelburget.com/backbone-to-react/)
-
-
-## React: Rethinking best practices
-
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
-
-<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## Server-side React with PHP
-
-[Stoyan Stefanov](http://www.phpied.com/)'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.
-
-> This post is an initial hack to have React components render server-side in PHP.
->
-> - Problem: Build web UIs
-> - Solution: React
-> - Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)
-> - Solution: [React page](https://github.com/facebook/react-page) to render the first view
-> - Problem: Can't host node.js apps / I have tons of PHP code
-> - Solution: Use PHP then!
->
-> [**Read part 1 ...**](http://www.phpied.com/server-side-react-with-php/)
->
-> [**Read part 2 ...**](http://www.phpied.com/server-side-react-with-php-part-2/)
->
-> Rendered markup on the server:
-> <figure>[![](/react/img/blog/react-php.png)](http://www.phpied.com/server-side-react-with-php-part-2/)</figure>
-
-
-## TodoMVC Benchmarks
-
-Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
-
-- **AngularJS:** 4043ms
-- **AngularJSPerf:** 3227ms
-- **BackboneJS:** 1874ms
-- **EmberJS:** 6822ms
-- **jQuery:** 14628ms
-- **React:** 2864ms
-- **VanillaJS:** 5567ms
-
-[Try it yourself!](http://www.petehunt.net/react/tastejs/benchmark.html)
-
-Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.
-
-Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:
-
-```javascript
-/**
- * This is a completely optional performance enhancement that you can implement
- * on any React component. If you were to delete this method the app would still
- * work correctly (and still be very performant!), we just use it as an example
- * of how little code it takes to get an order of magnitude performance improvement.
- */
-shouldComponentUpdate: function (nextProps, nextState) {
-  return (
-    nextProps.todo.id !== this.props.todo.id ||
-    nextProps.todo !== this.props.todo ||
-    nextProps.editing !== this.props.editing ||
-    nextState.editText !== this.state.editText
-  );
-},
-```
-
-By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.
-
-The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.
-
-## Guess the filter
-
-[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
-<figure>[![](/react/img/blog/guess_filter.jpg)](http://guessthefilter.com/)</figure>
-
-
-## React vs FruitMachine
-
-[Andrew Betts](http://trib.tv/), director of the [Financial Times Labs](http://labs.ft.com/), posted an article comparing [FruitMachine](https://github.com/ftlabs/fruitmachine) and React.
-
-> Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.
->
-> [Read the full article...](http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/)
-
-Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.
-
-## React Brunch
-
-[Matthew McCray](http://elucidata.net/) implemented [react-brunch](https://npmjs.org/package/react-brunch), a JSX compilation step for [Brunch](http://brunch.io/).
-
-> Adds React support to brunch by automatically compiling `*.jsx` files.
->
-> You can configure react-brunch to automatically insert a react header (`/** @jsx React.DOM */`) into all `*.jsx` files. Disabled by default.
->
-> Install the plugin via npm with `npm install --save react-brunch`.
->
-> [Read more...](https://npmjs.org/package/react-brunch)
-
-## Random Tweet
-
-I'm going to start adding a tweet at the end of each round-up. We'll start with this one:
-
-<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>

docs/_posts/2013-11-18-community-roundup-11.md

@@ -1,92 +0,0 @@
----
-title: "Community Round-up #11"
-layout: post
-author: Vjeux
----
-
-This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
-
-## Super VanJS 2013 Talk
-
-[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
-
-<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## React Tips
-
-[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](http://facebook.github.io/react/tips/introduction.html)!
-
-- [Inline Styles](http://facebook.github.io/react/tips/inline-styles.html)
-- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
-- [Self-Closing Tag](http://facebook.github.io/react/tips/self-closing-tag.html)
-- [Maximum Number of JSX Root Nodes](http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html)
-- [Shorthand for Specifying Pixel Values in style props](http://facebook.github.io/react/tips/style-props-value-px.html)
-- [Type of the Children props](http://facebook.github.io/react/tips/children-props-type.html)
-- [Value of null for Controlled Input](http://facebook.github.io/react/tips/controlled-input-null-value.html)
-- [`componentWillReceiveProps` Not Triggered After Mounting](http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
-- [Props in getInitialState Is an Anti-Pattern](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
-- [DOM Event Listeners in a Component](http://facebook.github.io/react/tips/dom-event-listeners.html)
-- [Load Initial Data via AJAX](http://facebook.github.io/react/tips/initial-ajax.html)
-- [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html)
-
-
-## Intro to the React Framework
-
-[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
-
-> Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
-<figure>[![](/react/img/blog/tutsplus.png)](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)</figure>
->
-> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
-
-
-## 140-characters textarea
-
-[Brian Kim](https://github.com/brainkim) wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.
-
-<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
-<script async src="//codepen.io/assets/embed/ei.js"></script>
-
-
-## Genesis Skeleton
-
-[Eric Clemmons](http://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
-<figure>[![](/react/img/blog/genesis_skeleton.png)](http://genesis-skeleton.com/)</figure>
-
-
-## AgFlow Talk
-
-[Robert Zaremba](http://rz.scale-it.pl/) working on [AgFlow](http://www.agflow.com/) recently talked in Poland about React.
-
-> In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.
->
-> During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!
->
-> [Read the full article...](http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html)
-
-<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
-
-
-## JSX
-
-[Todd Kennedy](http://tck.io/) working at Cond&eacute; Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
-
-> Lets start with the elephant in the room: JSX?
-> Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.
->
-> Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.
->
-> [Read the full article...](http://tck.io/posts/jsxhint_and_react.html)
-
-
-## Photo Gallery
-
-[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
-<figure>[![](/react/img/blog/xoxo2013.png)](http://photos.miekd.com/xoxo2013/)</figure>
-
-
-## Random Tweet
-
-<img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
-<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>&mdash; Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div>

docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md

@@ -1,23 +0,0 @@
----
-title: "React v0.5.2, v0.4.2"
-layout: post
-author: Paul O'Shannessy
----
-
-Today we're releasing an update to address a potential XSS vulnerability that can	 arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
-
-This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
-
-Updated versions are available for immediate download via npm, bower, and on our [download page][download].
-
-We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
-
-While we've encouraged responsible disclosure as part of [Facebook's whitehat bounty program][bounty] since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has [an excellent policy][ember] which we may use as our model.
-
-You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
-
-[download]: http://facebook.github.io/react/downloads.html
-[bounty]: https://www.facebook.com/whitehat/
-[ember]: http://emberjs.com/security/
-[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU
-

docs/_posts/2013-12-19-react-v0.8.0.md

@@ -1,48 +0,0 @@
----
-title: "React v0.8"
-layout: post
-author: Paul O'Shannessy
----
-
-I'll start by answering the obvious question:
-
-> What happened to 0.6 and 0.7?
-
-It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our `react-tools` module which includes React, but when browserifying that ends up packaging all of `esprima` and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.
-
-We talked with [Jeff Barczewski][jeff] who was the owner of the `react` module on npm. He was kind enough to transition ownership to us and release his package under a different name: `autoflow`. I encourage you to [check it out][autoflow] if you're writing a lot of asynchronous code. In order to not break all of `react`'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our `react` module like you would use the previous package.
-
-In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.
-
-We hope that by releasing `react` on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!
-
-
-## Changelog
-
-### React
-
-* Added support for more attributes:
-  * `rows` & `cols` for `<textarea>`
-  * `defer` & `async` for `<script>`
-  * `loop` for `<audio>` & `<video>`
-  * `autoCorrect` for form fields (a non-standard attribute only supported by mobile WebKit)
-* Improved error messages
-* Fixed Selection events in IE11
-* Added `onContextMenu` events
-
-### React with Addons
-
-* Fixed bugs with TransitionGroup when children were undefined
-* Added support for `onTransition`
-
-### react-tools
-
-* Upgraded `jstransform` and `esprima-fb`
-
-### JSXTransformer
-
-* Added support for use in IE8
-* Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
-
-[jeff]: https://github.com/jeffbski
-[autoflow]: https://github.com/jeffbski/autoflow

docs/_posts/2013-12-23-community-roundup-12.md

@@ -1,105 +0,0 @@
----
-title: "Community Round-up #12"
-layout: post
-author: Vjeux
----
-
-React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](http://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
-
-## The Future of Javascript MVC
-
-[David Nolen](http://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
-
-> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
->
-> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
->
-> A whole lot.
-> <figure>[![](/react/img/blog/om-backbone.png)](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
->
-> [Read the full article...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
-
-
-
-## Scroll Position with React
-
-Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
-
-> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
->
-> ```
-componentWillUpdate: function() {
-  var node = this.getDOMNode();
-  this.shouldScrollBottom =
-    (node.scrollTop + node.offsetHeight) === node.scrollHeight;
-},
-componentDidUpdate: function() {
-  if (this.shouldScrollBottom) {
-    var node = this.getDOMNode();
-    node.scrollTop = node.scrollHeight
-  }
-},
-```
->
-> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
-
-
-## Lights Out
-
-React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](http://facebook.github.io/react/docs/animation.html) to implement animations.
-<figure>[![](/react/img/blog/lights-out.png)](http://chenglou.github.io/react-lights-out/)</figure>
-
-[Try it out!](http://chenglou.github.io/react-lights-out/)
-
-
-## Reactive Table Bookmarklet
-
-[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
-<figure>[![](/react/img/blog/reactive-bookmarklet.png)](http://www.phpied.com/reactivetable-bookmarklet/)</figure>
-
-[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
-
-
-## MontageJS Tutorial in React
-
-[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
-
-## Writing Good React Components
-
-[William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
-
-> The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
->
-> The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
->
-> You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.
->
-> [Read the full article ...](http://blog.whn.se/post/69621609605/writing-good-react-components)
-
-
-## Hoodie React TodoMVC
-
-[Sven Lito](http://svenlito.com/) integrated the React TodoMVC example within an [Hoodie](http://hood.ie/) web app environment. This should let you get started using Hoodie and React.
-
-```
-hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
-```
-
-[Check out on GitHub...](https://github.com/hoodiehq/hoodie-react-todomvc)
-
-## JSX Compiler
-
-Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
-<figure>[![](/react/img/blog/jsx-compiler.png)](http://facebook.github.io/react/jsx-compiler.html)</figure>
-
-[Try it out!](http://facebook.github.io/react/jsx-compiler.html)
-
-
-
-## Random Tweet
-
-<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>

docs/_posts/2013-12-30-community-roundup-13.md

@@ -1,119 +0,0 @@
----
-title: "Community Round-up #13"
-layout: post
-author: Vjeux
----
-
-Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
-
-
-## React Touch
-
-[Pete Hunt](http://www.petehunt.net/) wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.
-
-<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
-
-[Try out the demos!](http://petehunt.github.io/react-touch/)
-
-
-## Introduction to React
-
-[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
-
-
-## JSX: E4X The Good Parts
-
-JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.
-
-> E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.
->
-> **Historical Context**
->
-> E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.
->
-> [Continue reading ...](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html)
-
-
-## React + Socket.io
-
-[Geert Pasteels](http://enome.be/nl) made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
-
-```javascript
-changeHandler: function (data) {
-  if (!_.isEqual(data.state, this.state) && this.path === data.path) {
-    this.setState(data.state);
-  }
-},
-componentDidMount: function (root) {
-  this.path = utils.nodePath(root);
-  socket.on('component-change', this.changeHandler);
-},
-componentWillUpdate: function (props, state) {
-  socket.emit('component-change', { path: this.path, state: state });
-},
-componentWillUnmount: function () {
-  socket.removeListener('component-change', this.change);
-}
-```
-
-[Check it out on GitHub...](https://github.com/Enome/react.io)
-
-
-## cssobjectify
-
-[Andrey Popp](http://andreypopp.com/) implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
-
-```javascript
-/* style.css */
-MyComponent {
-  font-size: 12px;
-  background-color: red;
-}
-
-/* myapp.js */
-var React = require('react-tools/build/modules/React');
-var Styles = require('./styles.css');
-
-var MyComponent = React.createClass({
-  render: function() {
-    return (
-      <div style={Styles.MyComponent}>
-        Hello, world!
-      </div>
-    )
-  }
-});
-```
-
-[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
-
-
-## ngReact
-
-[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
-
-> Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
-> <figure>[![](/react/img/blog/ngreact.png)](http://davidandsuzi.com/ngreact-react-components-in-angular/)</figure>
->
-> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
-
-
-## vim-jsx
-
-[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
-
-> Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.
->
-> This bundle requires pangloss's [vim-javascript](https://github.com/pangloss/vim-javascript) syntax highlighting.
->
-> Vim support for inline XML in JS is remarkably similar to the same for PHP.
->
-> [View on GitHub...](https://github.com/mxw/vim-jsx)
-
-
-## Random Tweet
-
-<center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>
-

docs/_posts/2014-01-02-react-chrome-developer-tools.md

@@ -1,19 +0,0 @@
----
-title: "React Chrome Developer Tools"
-layout: post
-author: Sebastian Markbåge
----
-
-With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
-
-You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
-
-Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.
-
-When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
-<figure>[![](/react/img/blog/react-dev-tools.jpg)](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)</figure>
-
-We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept [pull requests on GitHub](https://github.com/facebook/react-devtools).
-

docs/_posts/2014-01-06-community-roundup-14.md

@@ -1,92 +0,0 @@
----
-title: "Community Round-up #14"
-layout: post
-author: Vjeux
----
-
-The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
-
-## React Baseline
-
-React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
-
-> As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
->
-> I encourage you to fork, and make it right and submit a pull request!
->
-> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
->
-> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
-
-
-## Animal Sounds
-
-[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
-<figure>[![](/react/img/blog/animal-sounds.jpg)](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)</figure>
-
-[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
-
-
-## React Rails Tutorial
-
-[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
-
-> ```
-git clone https://github.com/necrodome/react-rails-tutorial
-cd react-rails-tutorial
-bundle install
-rake db:migrate
-rails s
-```
-> Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!
->
-> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
-
-## Mixing with Backbone
-
-[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
-
-
-## React Infinite Scroll
-
-[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
-
-```javascript
-<InfiniteScroll
-  pageStart={0}
-  loadMore={loadFunc}
-  hasMore={true || false}
-  loader={<div className="loader">Loading ...</div>}>
-  {items} // <-- This is the "stuff" you want to load
-</InfiniteScroll>
-```
-
-[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
-
-
-## Web Components Style
-
-[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
-
-<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-
-## React vs Angular
-
-React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
-
-> First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.
->
-> I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.
->
-> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
-
-
-
-## Random Tweet
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I&#39;ve looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>&mdash; Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>

docs/_posts/2014-02-05-community-roundup-15.md

@@ -1,126 +0,0 @@
----
-title: "Community Round-up #15"
-layout: post
-author: Jonas Gebhardt
----
-
-Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
-
-In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
-
-## "React: Another Level of Indirection"
-To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".
-
-> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.
->
-> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
-
-## Reagent: Minimalistic React for ClojureScript
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
-
-> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
->
-> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
->
-> [Check it out on Github...](http://holmsand.github.io/reagent/)
-
-
-## Functional DOM programming
-
-React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert:
-
-> This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.
->
-> [Read the full post...](https://medium.com/p/67d81637d43)
-
-Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
-
-
-
-## Kioo: Separating markup and logic
-[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
-
-A basic example from github:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <body>
-    <header>
-      <h1>Header placeholder</h1>
-      <ul id="navigation">
-        <li class="nav-item"><a href="#">Placeholder</a></li>
-      </ul>
-    </header>
-    <div class="content">place holder</div>
-  </body>
-</html>
-```
-
-```clojure
-...
-
-(defn my-nav-item [[caption func]]
-  (kioo/component "main.html" [:.nav-item]
-    {[:a] (do-> (content caption)
-                (set-attr :onClick func))}))
-
-(defn my-header [heading nav-elms]
-  (kioo/component "main.html" [:header]
-    {[:h1] (content heading)
-     [:ul] (content (map my-nav-item nav-elms))}))
-
-(defn my-page [data]
-  (kioo/component "main.html"
-    {[:header] (substitute (my-header (:heading data)
-                                      (:navigation data)))
-     [:.content] (content (:content data))}))
-
-(def app-state (atom {:heading    "main"
-                      :content    "Hello World"
-                      :navigation [["home" #(js/alert %)]
-                                   ["next" #(js/alert %)]]}))
-
-(om/root app-state my-page (.-body js/document))
-```
-
-## Om
-
-In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)").
-
-> David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.
->
-> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)
-
-### A slice of React, ClojureScript and Om
-
-Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations.
-
-> React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.
->
-> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)
-
-In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.
-
-[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
-
-### Time Travel: Implementing undo in Om
-David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
-
-### A Step-by-Step Om Walkthrough
-
-[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter).
-
-### Omkara
-
-[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.
-
-### Om Experience Report
-Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype.
-
-## Not-so-random Tweet
-
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>

docs/_posts/2014-02-15-community-roundup-16.md

@@ -1,86 +0,0 @@
----
-title: "Community Round-up #16"
-layout: post
-author: Jonas Gebhardt
----
-
-There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
-
-
-## React in a nutshell
-Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) put together [this excellent and refreshing slideshow](http://slid.es/johnlynch/reactjs):
-
-<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
-
-
-## React's diff algorithm
-
-React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[![](/react/img/blog/react-diff-tree.png)](http://calendar.perfplanet.com/2013/diff/)</figure>
-
-While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
-
-
-
-
-## Many, many new introductions to React!
-
-
-
-James Padosley wrote a short post on the basics (and merits) of React: [What is React?](http://james.padolsey.com/javascript/what-is-react/)
-> What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.
-
-> [Read the full post...](http://james.padolsey.com/javascript/what-is-react/)
-
-Taylor Lapeyre ([@taylorlapeyre](https://twitter.com/taylorlapeyre)) wrote another nice [introduction to React](http://words.taylorlapeyre.me/an-introduction-to-react).
-
-> React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.
-
-> [Read the full post...](http://words.taylorlapeyre.me/an-introduction-to-react)
-
-
-[This "Deep explanation for newbies"](http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs) by [@ProJavaScript](https://twitter.com/ProJavaScript) explains how to get started building a React game without using the optional JSX syntax.
-
-### React around the world
-
-It's great to see the React community expand internationally. [This site](http://habrahabr.ru/post/189230/) features a React introduction in Russian.
-
-### React tutorial series
-
-[Christopher Pitt](https://medium.com/@followchrisp) explains [React Components](https://medium.com/react-tutorials/828c397e3dc8) and [React Properties](https://medium.com/react-tutorials/ef11cd55caa0). The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the [other posts in his React Tutorial series](https://medium.com/react-tutorials), e.g. on using [React + Backbone Model](https://medium.com/react-tutorials/8aaec65a546c) and [React + Backbone Router](https://medium.com/react-tutorials/c00be0cf1592).
-
-### Beginner tutorial: Implementing the board game Go
-
-[Chris LaRose](http://cjlarose.com/) walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his [tutorial](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) or go straight to the [code](https://github.com/cjlarose/react-go).
-
-### Egghead.io video tutorials
-
-Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube.com/watch?v=5yvFLrt7N8M)]
-
-### "React: Finally, a great server/client web stack"
-
-Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
-
-> [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]
-
-> What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.
-
-> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
-
-## Building a complex React component
-[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[![](/react/img/blog/resistance-calculator.png)](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
-
-
-
-## Random Tweets
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>&mdash; Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>&mdash; Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>&mdash; andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>&mdash; julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
-
-<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
-</p>&mdash; Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>

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

@@ -1,133 +0,0 @@
----
-title: React v0.9 RC
-layout: post
-author: Ben Alpert
----
-
-We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
-
-The release candidate is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.9.0-rc1.min.js>
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0-rc1.min.js>
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.9.0-rc1.js>
-
-We've also published version `0.9.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.
-
-## Upgrade Notes
-
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
-
-```html
-<div>
-  Monkeys:
-  {listOfMonkeys} {submitButton}
-</div>
-```
-
-In v0.8 and below, it was transformed to the following:
-
-```javascript
-React.DOM.div(null,
-  " Monkeys: ",
-  listOfMonkeys, submitButton
-)
-```
-
-In v0.9, it will be transformed to this JS instead:
-
-```javascript{2,3}
-React.DOM.div(null,
-  "Monkeys:",
-  listOfMonkeys, " ", submitButton
-)
-```
-
-We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
-
-In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
-- 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
-
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
-- Added a new tool for profiling React components and identifying places where defining `shouldComponentUpdate` can give performance improvements
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
-- Added support for more attributes:
-  - `noValidate` and `formNoValidate` for forms
-  - `property` for Open Graph `<meta>` tags
-  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
-  - `scope` for screen readers
-  - `span` for `<colgroup>` tags
-- Added support for defining `propTypes` in mixins
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
-- Added support for `statics` on component spec for static component methods
-- 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, `.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
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
-
-#### Bug Fixes
-
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
-- Fixed a case where nesting top-level components would throw an error when updating
-- Passing an invalid or misspelled propTypes type now throws an error
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
-- On composition events, `.data` is now properly normalized in IE9 and IE10
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
-- Fixed a memory leak when `renderComponentToString` would store event handlers
-- Fixed an error that could be thrown when removing form elements during a click handler
-- `key` values containing `.` are now supported
-- Shortened `data-reactid` values for performance
-- Components now always remount when the `key` property changes
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
-- General performance fixes, memory optimizations, improvements to warnings and error messages
-
-### React with Addons
-
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
-- Performance optimizations for CSSTransitionGroup
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
-
-### JSX Compiler and react-tools Package
-
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
-- `JSXTransformer` now uses source maps automatically in modern browsers
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse

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

@@ -1,145 +0,0 @@
----
-title: React v0.9
-layout: post
-author: Ben Alpert
----
-
-I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
-
-Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.
-
-As always, the release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-0.9.0.min.js>
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js>
-* **In-Browser JSX Transformer**  
-  <http://fb.me/JSXTransformer-0.9.0.js>
-
-We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-## What’s New?
-
-This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
-
-We've also added to the add-ons build [React.addons.TestUtils](/react/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
-
-We've also made several other improvements and a few breaking changes; the full changelog is provided below.
-
-## JSX Whitespace
-
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
-
-```html
-<div>
-  Monkeys:
-  {listOfMonkeys} {submitButton}
-</div>
-```
-
-In v0.8 and below, it was transformed to the following:
-
-```javascript
-React.DOM.div(null,
-  " Monkeys: ",
-  listOfMonkeys, submitButton
-)
-```
-
-In v0.9, it will be transformed to this JS instead:
-
-```javascript{2,3}
-React.DOM.div(null,
-  "Monkeys:",
-  listOfMonkeys, " ", submitButton
-)
-```
-
-We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
-
-In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
-- 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
-
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
-- Added support for more attributes:
-  - `crossOrigin` for CORS requests
-  - `download` and `hrefLang` for `<a>` tags
-  - `mediaGroup` and `muted` for `<audio>` and `<video>` tags
-  - `noValidate` and `formNoValidate` for forms
-  - `property` for Open Graph `<meta>` tags
-  - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
-  - `scope` for screen readers
-  - `span` for `<colgroup>` tags
-- Added support for defining `propTypes` in mixins
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
-- Added support for `statics` on component spec for static component methods
-- 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, `.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
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
-
-#### Bug Fixes
-
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
-- Fixed a case where nesting top-level components would throw an error when updating
-- Passing an invalid or misspelled propTypes type now throws an error
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
-- On composition events, `.data` is now properly normalized in IE9 and IE10
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
-- Fixed a memory leak when `renderComponentToString` would store event handlers
-- Fixed an error that could be thrown when removing form elements during a click handler
-- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`)
-- `key` values containing `.` are now supported
-- Shortened `data-reactid` values for performance
-- Components now always remount when the `key` property changes
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
-- General performance fixes, memory optimizations, improvements to warnings and error messages
-
-### React with Addons
-
-- `React.addons.TestUtils` was added to help write unit tests
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
-- Performance optimizations for CSSTransitionGroup
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
-
-### JSX Compiler and react-tools Package
-
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
-- `JSXTransformer` now uses source maps automatically in modern browsers
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse

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

@@ -1,95 +0,0 @@
----
-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

@@ -1,106 +0,0 @@
----
-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://eliseumds.tumblr.com/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

@@ -1,72 +0,0 @@
----
-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
-* Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
-* Added support for more attributes:
-  * `srcSet` for `<img>` to specify 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. [Read the docs](/react/docs/update.html)
-
-### 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/_posts/2014-03-21-react-v0.10.md

@@ -1,73 +0,0 @@
----
-title: React v0.10
-layout: post
-author: Paul O’Shannessy
----
-
-Hot on the heels of the [release candidate earlier this week](/react/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
-
-The release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-0.10.0.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.10.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.10.0.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.10.0.js>
-
-We've also published version `0.10.0` 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
-* Added warnings to help migrate towards descriptors
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
-* Added support for more attributes:
-  * `srcSet` for `<img>` to specify 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. [Read the docs](/react/docs/update.html)
-
-### 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/_posts/2014-03-28-the-road-to-1.0.md

@@ -1,57 +0,0 @@
----
-title: The Road to 1.0
-layout: post
-author: Paul O'Shannessy
----
-
-When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
-
-Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.
-
-## Descriptors
-
-The first part of this is what we're calling "descriptors". I talked about this briefly in our [v0.10 announcements][v0.10]. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. `React.DOM.div()`, `MyComponent()`) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.
-
-We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.
-
-## API Cleanup
-
-This is really connected to everything. We want to keep the API as simple as possible and help developers [fall into the pit of success][pitofsuccess]. Enabling bad patterns with bad APIs is not success.
-
-## ES6
-
-Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling `React.createClass(...)` isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
-
-```js
-class MyComponent extends React.Component {
-  render() {
-    ...
-  }
-}
-```
-
-There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The `jsx` executable we ship with `react-tools` already supports transforming many parts of ES6 into code that will run on older browsers.
-
-## Context
-
-While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
-
-## Addons
-
-As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".
-
-## Browser Support
-
-As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.
-
-## Animations
-
-Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.
-
-## Miscellaneous
-
-There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
-
-[v0.10]: http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html
-[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
-[projects]: https://github.com/facebook/react/wiki/Projects

docs/_posts/2014-04-04-reactnet.md

@@ -1,38 +0,0 @@
----
-title: "Use React and JSX in ASP.NET MVC"
-layout: post
-author: Daniel Lo Nigro
----
-
-Today we're happy to announce the initial release of
-[ReactJS.NET](http://reactjs.net/), which makes it easier to use React and JSX
-in .NET applications, focusing specifically on ASP.NET MVC web applications.
-It has several purposes:
-
- - On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
-   will be compiled and cached server-side.
-
-   ```html
-   <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
-   ```
- - JSX to JavaScript compilation via popular minification/combination libraries
-   (Cassette and ASP.NET Bundling and Minification). This is suggested for
-   production websites.
- - Server-side component rendering to make your initial render super fast.
-
-Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
-Web Forms applications as well as non-web applications (for example, in build
-scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
-on support for Linux and Mac OS X via Mono as well.
-
-Installation
-------------
-ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
-package manager console or search NuGet for "React" to install it.
-[See the documentation](http://reactjs.net/docs) for more information. The
-GitHub project contains
-[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
-demonstrating all of the features.
-
-Let us know what you think, and feel free to send through any feedback and
-report bugs [on GitHub](https://github.com/reactjs/React.NET).

docs/_posts/2014-05-06-flux.md

@@ -1,17 +0,0 @@
----
-title: "Flux: An Application Architecture for React"
-layout: post
-author: Bill Fisher and Jing Chen
----
-
-We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React.  Check out the video here:
-
-<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
-
-To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
-
-In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.
-
-When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
-
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/react/tree/master/examples/todomvc-flux) is available, along with more [detailed documentation](http://facebook.github.io/react/docs/flux-overview.html) and a [tutorial](http://facebook.github.io/react/docs/flux-todo-list.html). Look for more examples to come in the future.

docs/_posts/2014-05-29-one-year-of-open-source-react.md

@@ -1,15 +0,0 @@
----
-title: "One Year of Open-Source React"
-layout: post
-author: Cheng Lou
----
-
-Today marks the one-year open-source anniversary of React.
-
-It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
-
-Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
-
-Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
-
-Here’s to another year!

docs/_posts/2014-06-27-community-roundup-19.md

@@ -1,55 +0,0 @@
----
-title: "Community Round-up #19"
-layout: post
-author: Cheng Lou
----
-
-## React Meetups!
-Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in [San Francisco](http://www.meetup.com/ReactJS-San-Francisco/) (courtesy of [Telmate](http://www.telmate.com)), and one in [London](http://www.meetup.com/London-React-User-Group/) (courtesy of [Stuart Harris](http://www.meetup.com/London-React-User-Group/members/105837542/), [Cain Ullah](http://www.meetup.com/London-React-User-Group/members/15509971/) and [Zoe Merchant](http://www.meetup.com/London-React-User-Group/members/137058242/)). These two events have been big successes; a second one in London is [already planned](http://www.meetup.com/London-React-User-Group/events/191406572/).
-
-If you don't live near San Francisco or London, why not start one in your community?
-
-## Complementary Tools
-In case you haven't seen it, we've consolidated the tooling solution around React on [this wiki page](https://github.com/facebook/react/wiki/Complementary-Tools). Some of the notable recent entries include:
-
-- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
-
-- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](http://react-bootstrap.github.io/components.html) features live-editable demos.
-
-- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
-
-These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!
-
-## React in Interesting Places
-
-The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
-
-<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
-
-And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
-
-[![](/react/img/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
-
-Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
-
-## Even More People Using React
-
-### Prismatic
-[Prismatic](http://getprismatic.com/home) recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, [Om](https://github.com/swannodette/om). They detailed their very positive experience [here](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/).
-
-> Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.
-
-### Adobe Brackets
-[Kevin Dangoor](http://www.kevindangoor.com) works on [Brackets](http://brackets.io/?lang=en), the open-source code editor. After writing [his first impression on React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/), he followed up with another insightful [article](http://www.kevindangoor.com/2014/05/react-in-brackets/) on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.
-
-> We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.
-
-### Storehouse
-[Storehouse](https://www.storehouse.co) (Apple Design Award 2014)'s web presence is build with React. Here's [an example story](https://www.storehouse.co/stories/y2ad-mexico-city-clouds). Congratulations on the award!
-
-### Vim Awesome
-[Vim Awesome](http://vimawesome.com), an open-source Vim plugins directory built on React, was just launched. Be sure to [check out the source code](https://github.com/divad12/vim-awesome) if you're curious to see an example of how to build a small single-page React app.
-
-## Random Tweets
-
-<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we&#39;ve been doing JS frameworks wrong until now. React makes me happy.</p>&mdash; Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>

docs/_posts/2014-07-13-react-v0.11-rc1.md

@@ -1,145 +0,0 @@
----
-title: React v0.11 RC
-layout: post
-author: Paul O’Shannessy
----
-
-It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
-
-The release candidate is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-0.11.0-rc1.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0-rc1.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0-rc1.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0-rc1.js>
-
-We've also published version `0.11.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.
-
-
-## `getDefaultProps`
-
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
-
-
-## Rendering to `null`
-
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
-
-```js
-// Before
-render: function() {
-  if (!this.state.visible) {
-    return <span/>;
-  }
-  // ...
-}
-
-// After
-render: function() {
-  if (!this.state.visible) {
-    return null;
-  }
-  // ...
-}
-```
-
-
-## JSX Namespacing
-
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
-
-```js
-// Before
-var UI = require('UI');
-var UILayout = UI.Layout;
-var UIButton = UI.Button;
-var UILabel = UI.Label;
-
-render: function() {
-  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
-}
-
-// After
-var UI = require('UI');
-
-render: function() {
-  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
-}
-```
-
-
-## Improved keyboard event normalization
-
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
-
-```js
-handleKeyDown: function(e) {
-  if (e.key === 'Enter') {
-    // Handle enter key
-  } else if (e.key === ' ') {
-    // Handle spacebar
-  } else if (e.key === 'ArrowLeft') {
-    // Handle left arrow
-  }
-},
-```
-
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-* `getDefaultProps()` is now called once per class and shared across all instances
-
-#### New Features
-* Rendering to `null`
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
-* New normalized `onBeforeInput` event
-* `React.Children.count` has been added as a helper for counting the number of children
-
-#### Bug Fixes
-
-* Re-renders are batched in more cases
-* Events: `e.view` properly normalized
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
-* Improved SVG support
-  * Changing `className` on a mounted SVG component now works correctly
-  * Added support for elements `mask` and `tspan`
-  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
-* Added explicit warning when missing polyfills
-
-### React With Addons
-* PureRenderMixin
-* Perf: a new set of tools to help with performance analysis
-* Update: New `$apply` command to transform values
-* TransitionGroup bug fixes with null elements, Android
-
-### React NPM Module
-* Now includes the pre-built packages under `dist/`.
-* `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX
-* Added support for namespaces, eg `<Components.Checkbox />`
-* JSXTransformer
-  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
-  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
-  * Fixed a bug preventing sourcemaps from working in Firefox
-
-### React Tools Module
-* Improved readme with usage and API information
-* Improved ES6 transforms available with `--harmony` option
-* Added `--source-map-inline` option to the `jsx` executable
-* New `transformWithDetails` API which gives access to the raw sourcemap data
-
-

docs/_posts/2014-07-17-react-v0.11.md

@@ -1,149 +0,0 @@
----
-title: React v0.11
-layout: post
-author: Paul O’Shannessy
----
-
-We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using `jsx --harmony`, fixed a small regression with `statics`, and made sure we actually exposed the new API we said we were shipping: `React.Children.count`.
-
-
-This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
-
-The release is available for download from the CDN:
-
-* **React**  
-  Dev build with warnings: <http://fb.me/react-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-0.11.0.min.js>  
-* **React with Add-Ons**  
-  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>  
-  Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>  
-* **In-Browser JSX transformer**  
-  <http://fb.me/JSXTransformer-0.11.0.js>
-
-We've also published version `0.11.0` 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.
-
-
-## `getDefaultProps`
-
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
-
-
-## Rendering to `null`
-
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
-
-```js
-// Before
-render: function() {
-  if (!this.state.visible) {
-    return <span/>;
-  }
-  // ...
-}
-
-// After
-render: function() {
-  if (!this.state.visible) {
-    return null;
-  }
-  // ...
-}
-```
-
-
-## JSX Namespacing
-
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
-
-```js
-// Before
-var UI = require('UI');
-var UILayout = UI.Layout;
-var UIButton = UI.Button;
-var UILabel = UI.Label;
-
-render: function() {
-  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
-}
-
-// After
-var UI = require('UI');
-
-render: function() {
-  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
-}
-```
-
-
-## Improved keyboard event normalization
-
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
-
-```js
-handleKeyDown: function(e) {
-  if (e.key === 'Enter') {
-    // Handle enter key
-  } else if (e.key === ' ') {
-    // Handle spacebar
-  } else if (e.key === 'ArrowLeft') {
-    // Handle left arrow
-  }
-},
-```
-
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
-
-## Changelog
-
-### React Core
-
-#### Breaking Changes
-* `getDefaultProps()` is now called once per class and shared across all instances
-
-#### New Features
-* Rendering to `null`
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
-* New normalized `onBeforeInput` event
-* `React.Children.count` has been added as a helper for counting the number of children
-
-#### Bug Fixes
-
-* Re-renders are batched in more cases
-* Events: `e.view` properly normalized
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
-* Improved SVG support
-  * Changing `className` on a mounted SVG component now works correctly
-  * Added support for elements `mask` and `tspan`
-  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
-* Added explicit warning when missing polyfills
-
-### React With Addons
-* PureRenderMixin: a mixin which helps optimize "pure" components
-* Perf: a new set of tools to help with performance analysis
-* Update: New `$apply` command to transform values
-* TransitionGroup bug fixes with null elements, Android
-
-### React NPM Module
-* Now includes the pre-built packages under `dist/`.
-* `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX
-* Added support for namespaces, eg `<Components.Checkbox />`
-* JSXTransformer
-  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
-  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
-  * Fixed a bug preventing sourcemaps from working in Firefox
-
-### React Tools Module
-* Improved readme with usage and API information
-* Improved ES6 transforms available with `--harmony` option
-* Added `--source-map-inline` option to the `jsx` executable
-* New `transformWithDetails` API which gives access to the raw sourcemap data
-
-
-

docs/acknowledgements.md

@@ -1,196 +0,0 @@
----
-id: acknowledgements
-title: Acknowledgements
-layout: single
----
-
-We'd like to thank all of our contributors:
-
-<div class="three-column">
-  <ul>
-    <li>Adam Krebs</li>
-    <li>Adam Solove</li>
-    <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>Anthony van der Hoorn</li>
-    <li>Ayman Osman</li>
-    <li>Ben Alpert</li>
-    <li>Ben Newman</li>
-    <li>Ben Ripkens</li>
-    <li>Bill Fisher</li>
-    <li>Bob Eagan</li>
-    <li>Bojan Mihelac</li>
-    <li>Brandon Bloom</li>
-    <li>Brian Cooke</li>
-    <li>Brian Kim</li>
-    <li>Brian Reavis</li>
-    <li>Brian Rue</li>
-    <li>Cam Spiers</li>
-    <li>Cassus Adam Banko</li>
-    <li>Cat Chen</li>
-    <li>Cheng Lou</li>
-    <li>Christian Roman</li>
-    <li>Christoph Pojer</li>
-    <li>Christopher Monsanto</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>Daniel Schonfeld</li>
-    <li>Danny Ben-David</li>
-    <li>Daryl Lau</li>
-    <li>David Hellsing</li>
-    <li>David Hu</li>
-    <li>Devon Blandin</li>
-    <li>Dmitry Mazuro</li>
-    <li>Dustin Getz</li>
-    <li>Enguerran</li>
-    <li>Eric Clemmons</li>
-    <li>Eric Florenzano</li>
-    <li>Eric Schoffstall</li>
-    <li>Evan Coonrod</li>
-    <li>Fabio M. Costa</li>
-    <li>Felipe Oliveira Carvalho</li>
-    <li>Felix Kling</li>
-    <li>Fernando Correia</li>
-    <li>François-Xavier Bois</li>
-    <li>Fred Zhao</li>
-    <li>G Scott Olson</li>
-    <li>Geert Pasteels</li>
-    <li>Geert-Jan Brits</li>
-    <li>George A Sisco III</li>
-    <li>Gilbert</li>
-    <li>Greg Hurrell</li>
-  </ul>
-  <ul>
-    <li>Greg Roodt</li>
-    <li>Guangqiang Dong</li>
-    <li>Guido Bouman</li>
-    <li>Harry Hull</li>
-    <li>Harshad Sabne</li>
-    <li>Hendrik Swanepoel</li>
-    <li>Hugo Jobling</li>
-    <li>Ian Obermiller</li>
-    <li>Ingvar Stepanyan</li>
-    <li>Irae Carvalho</li>
-    <li>Isaac Salier-Hellendag</li>
-    <li>Ivan Kozik</li>
-    <li>Jaime Mingo</li>
-    <li>Jakub Malinowski</li>
-    <li>James Brantly</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 Barczewski</li>
-    <li>Jeff Carpenter</li>
-    <li>Jeff Morrison</li>
-    <li>Jeff Welch</li>
-    <li>Jeffrey Lin</li>
-    <li>Jignesh Kakadiya</li>
-    <li>Jing Chen</li>
-    <li>Johannes Baiter</li>
-    <li>John Watson</li>
-    <li>Jon Beebe</li>
-    <li>Jonas Enlund</li>
-    <li>Jonas Gebhardt</li>
-    <li>Jonathan Hsu</li>
-    <li>Jordan Walke</li>
-    <li>Josh Bassett</li>
-    <li>Josh Duck</li>
-    <li>Josh Yudaken</li>
-    <li>Joshua Ma</li>
-    <li>Julen Ruiz Aizpuru</li>
-    <li>Jun Wu</li>
-    <li>Juraj Dudak</li>
-    <li>Justin Jaffray</li>
-    <li>Karl Mikkelsen</li>
-    <li>Keito Uchiyama</li>
-    <li>Kit Randel</li>
-    <li>Kunal Mehta</li>
-    <li>Kyle Mathews</li>
-    <li>Laurence Rowe</li>
-    <li>Levi McCallum</li>
-    <li>Lily</li>
-    <li>Logan Allen</li>
-    <li>Luigy Leon</li>
-    <li>Marcin Kwiatkowski</li>
-    <li>Marcin Szczepanski</li>
-    <li>Mariano Desanze</li>
-    <li>Mark Richardson</li>
-  </ul>
-  <ul>
-    <li>Marshall Roch</li>
-    <li>Martin Andert</li>
-    <li>Martin Konicek</li>
-    <li>Mathieu M-Gosselin</li>
-    <li>Matt Harrison</li>
-    <li>Matthew Dapena-Tretter</li>
-    <li>Matti Nelimarkka</li>
-    <li>Michal Srb</li>
-    <li>Mouad Debbar</li>
-    <li>Nadeesha Cabral</li>
-    <li>Nate Hunzaker</li>
-    <li>Nicholas Bergson-Shilcock</li>
-    <li>Nick Gavalas</li>
-    <li>Nick Thompson</li>
-    <li>Niklas Boström</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>Rajiv Tirumalareddy</li>
-    <li>Randall Randall</li>
-    <li>Ray</li>
-    <li>Richard D. Worth</li>
-    <li>Richard Feldman</li>
-    <li>Richard Livesey</li>
-    <li>Ryan Seddon</li>
-    <li>Sahat Yalkabov</li>
-    <li>Sander Spies</li>
-    <li>Sean Kinsey</li>
-    <li>Sebastian Markbåge</li>
-    <li>Shaun Trennery</li>
-    <li>Simon Højberg</li>
-    <li>Stefan Dombrowski</li>
-    <li>Stephen Murphy</li>
-    <li>Stoyan Stefanov</li>
-    <li>Sundeep Malladi</li>
-    <li>Sven Helmberger</li>
-    <li>Thomas Aylott</li>
-    <li>Thomas Boyt</li>
-    <li>Thomas Shaddox</li>
-    <li>Thomas Shafer</li>
-    <li>Timothy Yung</li>
-    <li>Tom Haggie</li>
-    <li>Tom Occhino</li>
-    <li>Ville Immonen</li>
-    <li>Vjeux</li>
-    <li>Volkan Unsal</li>
-    <li>Wayne Larsen</li>
-    <li>Wincent Colaiuta</li>
-    <li>Yuriy Dybskiy</li>
-    <li>Yuval Dekel</li>
-    <li>Zach Bruggeman</li>
-    <li>davidxi</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](https://www.npmjs.org/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.

docs/blog/all.html

@@ -1,15 +0,0 @@
----
-title: Blog
-layout: default
-sectionid: blog
-id: all-posts
----
-
-<section class="content wrap documentationContent nosidebar">
-  <div class="inner-content">
-    <h1>All Posts</h1>
-    {% for page in site.posts %}
-      <p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-    {% endfor %}
-  </div>
-</section>

docs/blog/index.html

@@ -7,28 +7,22 @@ sectionid: blog
 <section class="content wrap blogContent">
   {% include nav_blog.html %}
   <div class="inner-content">
-    {% for page in paginator.posts %}
+    {% for page in site.posts %}
       <div class="post-list-item">
         <h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
         <p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-        <hr />
+
+        <hr>
+
         <div class="post">
-         {{ page.content }}
+         {{ page.excerpt }}
+         {% if page.excerpt != page.content %}
+           <p>
+             <a href="/react{{ page.url }}">Continue Reading &rarr;</a>
+          </p>
+         {% endif %}
         </div>
       </div>
     {% endfor %}
-
-    <div class="pagination">
-      {% if paginator.previous_page %}
-        <a href="/react{{ paginator.previous_page_path }}" class="previous">
-          &laquo; Previous Page
-        </a>
-      {% endif %}
-      {% if paginator.next_page %}
-        <a href="/react{{ paginator.next_page_path }}" class="next">
-          Next Page &raquo;
-        </a>
-      {% endif %}
-    </div>
   </div>
 </section>

docs/docs/01-why-react.md

@@ -1,30 +0,0 @@
----
-id: why-react
-title: Why React?
-layout: docs
-permalink: why-react.html
-next: displaying-data.html
----
-React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
-
-We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas.
-
-### Simple
-
-Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
-
-### Declarative
-
-When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
-
-## Build Composable Components
-
-React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
-
-## Give It Five Minutes
-
-React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
-
-## Learn More
-
-You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).

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

@@ -1,33 +0,0 @@
----
-id: why-react-zh-CN
-title: 为什么使用 React?
-layout: docs
-permalink: why-react-zh-CN.html
-next: displaying-data.html
----
-
-React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**（视图）。
-
-我们创造 React 是为了解决一个问题：**构建随着时间数据不断变化的大规模应用程序**。为了达到这个目标，React 采用下面两个主要的思想。
-
-### 简单
-
-仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
-
-### 表达能力 (Declarative)
-
-当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。
-
-## 构建可组合的组件
-
-React 都是关于构建可复用的组件。事实上，通过 React 你*唯一*要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。
-
-## 给它5分钟的时间
-
-React挑战了很多传统的知识，第一眼看上去可能很多想法有点疯狂。当你阅读这篇指南，请[给它5分钟的时间](http://37signals.com/svn/posts/3124-give-it-five-minutes)；那些疯狂的想法已经帮助 Facebook 和 Instagram 从里到外创建了上千的组件了。
-
-## 了解更多
-
-你可以从这篇[博客](http://facebook.github.io/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
-
-

docs/docs/02-displaying-data.md

@@ -1,91 +0,0 @@
----
-id: displaying-data
-title: Displaying Data
-layout: docs
-permalink: displaying-data.html
-prev: why-react.html
-next: jsx-in-depth.html
----
-
-The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
-
-
-## Getting Started
-
-Let's look at a really simple example. Create a `hello-react.html` file with the following code:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hello React</title>
-    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
-    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script type="text/jsx">
-
-      // ** Your code goes here! **
-
-    </script>
-  </body>
-</html>
-```
-
-For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
-
-```javascript
-/** @jsx React.DOM */
-
-var HelloWorld = React.createClass({
-  render: function() {
-    return (
-      <p>
-        Hello, <input type="text" placeholder="Your name here" />!
-        It is {this.props.date.toTimeString()}
-      </p>
-    );
-  }
-});
-
-setInterval(function() {
-  React.renderComponent(
-    <HelloWorld date={new Date()} />,
-    document.getElementById('example')
-  );
-}, 500);
-```
-
-
-## Reactive Updates
-
-Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
-
-The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. **It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.**
-
-The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
-
-
-## 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.
-
-> Note:
->
-> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
-
-
-## JSX Syntax
-
-We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
-
-We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX.
-
-**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
-
-JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](/react/docs/jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
-
-JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
-
-The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.

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

@@ -1,89 +0,0 @@
----
-id: interactivity-and-dynamic-uis
-title: Interactivity and Dynamic UIs
-layout: docs
-permalink: interactivity-and-dynamic-uis.html
-prev: jsx-gotchas.html
-next: multiple-components.html
----
-
-You've already [learned how to display data](/react/docs/displaying-data.html) with React. Now let's look at how to make our UIs interactive.
-
-
-## A Simple Example
-
-```javascript
-/** @jsx React.DOM */
-
-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' : 'unlike';
-    return (
-      <p onClick={this.handleClick}>
-        You {text} this. Click to toggle.
-      </p>
-    );
-  }
-});
-
-React.renderComponent(
-  <LikeButton />,
-  document.getElementById('example')
-);
-```
-
-
-## Event Handling and Synthetic Events
-
-With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
-
-If you'd like to use React on a touch device such as a phone or tablet, simply call `React.initializeTouchEvents(true);` to enable touch event handling.
-
-
-## Under the Hood: Autobinding and Event Delegation
-
-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!
-
-**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).
-
-
-## Components are Just State Machines
-
-React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
-
-In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
-
-
-## How State Works
-
-A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
-
-
-## What Components Should Have State?
-
-Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
-
-**Try to keep as many of your components as possible stateless.** By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
-
-A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
-
-
-## What *Should* Go in State?
-
-**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
-
-## What *Shouldn’t* Go in State?
-
-`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
-
-* **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.

docs/docs/04-multiple-components.md

@@ -1,171 +0,0 @@
----
-id: multiple-components
-title: Multiple Components
-layout: docs
-permalink: multiple-components.html
-prev: interactivity-and-dynamic-uis.html
-next: reusable-components.html
----
-
-So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
-
-
-## Motivation: Separation of Concerns
-
-By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
-
-
-## Composition Example
-
-Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
-
-```javascript
-/** @jsx React.DOM */
-
-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.renderComponent(
-  <Avatar username="pwh" />,
-  document.getElementById('example')
-);
-```
-
-
-## Ownership
-
-In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.
-
-It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
-
-
-## Children
-
-When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
-
-```javascript
-<Parent><Child /></Parent>
-```
-
-`Parent` can read its children by accessing the special `this.props.children` prop. **`this.props.children` is an opaque data structure:** use the [React.Children utilities](/react/docs/top-level-api.html#react.children) to manipulate them.
-
-
-### Child Reconciliation
-
-**Reconciliation is the process by which React updates the DOM with each new render pass.** In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
-
-```html
-// Render Pass 1
-<Card>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-// Render Pass 2
-<Card>
-  <p>Paragraph 2</p>
-</Card>
-```
-
-Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
-
-
-### Stateful Children
-
-For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
-
-In most cases, this can be sidestepped by hiding elements instead of destroying them:
-
-```html
-// Render Pass 1
-<Card>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-// Render Pass 2
-<Card>
-  <p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</Card>
-```
-
-
-### Dynamic Children
-
-The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
-
-```javascript
-  render: function() {
-    var results = this.props.results;
-    return (
-      <ol>
-        {results.map(function(result) {
-          return <li key={result.id}>{result.text}</li>;
-        })}
-      </ol>
-    );
-  }
-```
-
-When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
-
-You can also key children by passing an object. The object keys will be used as `key` for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order **except** for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:
-
-```javascript
-  render: function() {
-    var items = {};
-    
-    this.props.results.forEach(function(result) {
-      // If result.id can look like a number (consider short hashes), then
-      // object iteration order is not guaranteed. In this case, we add a prefix
-      // to ensure the keys are strings.
-      items['result-' + result.id] = <li>{result.text}</li>;
-    });
-    
-    return (
-      <ol>
-        {items}
-      </ol>
-    );
-  }
-```
-
-## Data Flow
-
-In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
-
-
-## A Note on Performance
-
-You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.
-
-However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](/react/docs/component-specs.html) for more information.
-
-> Note:
->
-> If `shouldComponentUpdate()` returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.

docs/docs/05-reusable-components.md

@@ -1,194 +0,0 @@
----
-id: reusable-components
-title: Reusable Components
-layout: docs
-permalink: reusable-components.html
-prev: multiple-components.html
-next: forms.html
----
-
-When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
-
-
-## Prop Validation
-
-As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify `propTypes`. `React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons `propTypes` is only checked in development mode. Here is an example documenting the different validators provided:
-
-```javascript
-React.createClass({
-  propTypes: {
-    // You can declare that a prop is a specific JS primitive. By default, these
-    // are all optional.
-    optionalArray: React.PropTypes.array,
-    optionalBool: React.PropTypes.bool,
-    optionalFunc: React.PropTypes.func,
-    optionalNumber: React.PropTypes.number,
-    optionalObject: React.PropTypes.object,
-    optionalString: React.PropTypes.string,
-
-    // Anything that can be rendered: numbers, strings, components or an array
-    // containing these types.
-    optionalRenderable: React.PropTypes.renderable,
-
-    // 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']),
-
-    // An object that could be one of many types
-    optionalUnion: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.instanceOf(Message)
-    ]),
-
-    // An array of a certain type
-    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
-
-    // An object with property values of a certain type
-    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
-
-    // An object taking on a particular shape
-    optionalObjectWithShape: React.PropTypes.shape({
-      color: React.PropTypes.string,
-      fontSize: React.PropTypes.number
-    }),
-
-    // 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,
-
-    // A value of any data type
-    requiredAny: React.PropTypes.any.isRequired,
-
-    // You can also specify a custom validator. It should return an Error
-    // object if the validation fails. Don't `console.warn` or throw, as this
-    // won't work inside `oneOfType`.
-    customProp: function(props, propName, componentName) {
-      if (!/matchme/.test(props[propName])) {
-        return new Error('Validation failed!');
-      }
-    }
-  },
-  /* ... */
-});
-```
-
-
-## Default Prop Values
-
-React lets you define default values for your `props` in a very declarative way:
-
-```javascript
-var ComponentWithDefaultProps = React.createClass({
-  getDefaultProps: function() {
-    return {
-      value: 'default value'
-    };
-  }
-  /* ... */
-});
-```
-
-The result of `getDefaultProps()` will be cached and used to ensure that `this.props.value` will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
-
-
-## Transferring Props: A Shortcut
-
-A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
-
-```javascript
-/** @jsx React.DOM */
-
-var CheckLink = React.createClass({
-  render: function() {
-    // transferPropsTo() will take any props passed to CheckLink
-    // and copy them to <a>
-    return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
-  }
-});
-
-React.renderComponent(
-  <CheckLink href="javascript:alert('Hello, world!');">
-    Click here!
-  </CheckLink>,
-  document.getElementById('example')
-);
-```
-
-## Single Child
-
-With `React.PropTypes.component` 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
-  },
-
-  render: function() {
-    return
-      <div>
-        {this.props.children} // This must be exactly one element or it will throw.
-      </div>;
-  }
-
-});
-```
-
-## Mixins
-
-Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
-
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/react/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
-
-```javascript
-/** @jsx React.DOM */
-
-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], // Use the mixin
-  getInitialState: function() {
-    return {seconds: 0};
-  },
-  componentDidMount: function() {
-    this.setInterval(this.tick, 1000); // Call a method on the 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.renderComponent(
-  <TickTock />,
-  document.getElementById('example')
-);
-```
-
-A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
-

docs/docs/06-forms.md

@@ -1,148 +0,0 @@
----
-id: forms
-title: Forms
-layout: docs
-permalink: forms.html
-prev: reusable-components.html
-next: working-with-the-browser.html
----
-
-Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.
-
-For information on events on `<form>` see [Form Events](/react/docs/events.html#form-events).
-
-## Interactive Props
-
-Form components support a few props that are affected via user interactions:
-
-* `value`, supported by `<input>` and `<textarea>` components.
-* `checked`, supported by `<input>` components of type `checkbox` or `radio`.
-* `selected`, supported by `<option>` components.
-
-In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
-
-Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
-
-* The `value` of `<input>` or `<textarea>` changes.
-* The `checked` state of `<input>` changes.
-* The `selected` state of `<option>` changes.
-
-Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
-
-
-## Controlled Components
-
-An `<input>` with `value` set is a *controlled* component. In a controlled `<input>`, the value of the rendered element will always reflect the `value` prop. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" value="Hello!" />;
-  }
-```
-
-This will render an input that always has a value of `Hello!`. Any user input will have no effect on the rendered element because React has declared the value to be `Hello!`. If you wanted to update the value in response to user input, you could use the `onChange` event:
-
-```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} />;
-  }
-```
-
-In this example, we are simply accepting the newest value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
-
-```javascript
-  handleChange: function(event) {
-    this.setState({value: event.target.value.substr(0, 140)});
-  }
-```
-
-This would accept user input but truncate the value to the first 140 characters.
-
-
-## Uncontrolled Components
-
-An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled `<input>`, the value of the rendered element will reflect the user's input. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" />;
-  }
-```
-
-This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
-
-If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:
-
-```javascript
-  render: function() {
-    return <input type="text" defaultValue="Hello!" />;
-  }
-```
-
-This example will function much like the **Controlled Components** example above.
-
-Likewise, `<input>` supports `defaultChecked` and `<select>` supports `defaultValue`.
-
-
-## Advanced Topics
-
-
-### Why Controlled Components?
-
-Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
-
-```html
-  <input type="text" name="title" value="Untitled" />
-```
-
-This renders an input *initialized* with the value, `Untitled`. When the user updates the input, the node's value *property* will change. However, `node.getAttribute('value')` will still return the value used at initialization time, `Untitled`.
-
-Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
-
-```javascript
-  render: function() {
-    return <input type="text" name="title" value="Untitled" />;
-  }
-```
-
-Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
-
-
-### Why Textarea Value?
-
-In HTML, the value of `<textarea>` is usually set using its children:
-
-```html
-  <!-- counterexample: DO NOT DO THIS! -->
-  <textarea name="description">This is the description.</textarea>
-```
-
-For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use `\n` if we want newlines. In a world where we have `value` and `defaultValue`, it is ambiguous what role children play. For this reason, you should not use children when setting `<textarea>` values:
-
-```javascript
-  <textarea name="description" value="This is a description." />
-```
-
-If you *do* decide to use children, they will behave like `defaultValue`.
-
-
-### Why Select Value?
-
-The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:
-
-```javascript
-  <select value="B">
-    <option value="A">Apple</option>
-    <option value="B">Banana</option>
-    <option value="C">Cranberry</option>
-  </select>
-```
-
-To make an uncontrolled component, `defaultValue` is used instead.

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

@@ -1,151 +0,0 @@
----
-id: working-with-the-browser
-title: Working With the Browser
-layout: docs
-permalink: working-with-the-browser.html
-prev: forms.html
-next: more-about-refs.html
----
-
-React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
-
-
-## The Virtual DOM
-
-React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods return a *description* of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
-
-Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and in a performant way cross-browser. You can even use some HTML5 events in IE8!
-
-Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
-
-
-## Refs and getDOMNode()
-
-To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a `getDOMNode()` function which you can call to get a reference to it.
-
-> Note:
->
-> `getDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `getDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
-
-In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use refs to refer to a component you own. They work like this:
-
-```javascript
-/** @jsx React.DOM */
-
-var MyComponent = React.createClass({
-  handleClick: function() {
-    // Explicitly focus the text input using the raw DOM API.
-    this.refs.myTextInput.getDOMNode().focus();
-  },
-  render: function() {
-    // The ref attribute adds a reference to the component to
-    // this.refs when the component is mounted.
-    return (
-      <div>
-        <input type="text" ref="myTextInput" />
-        <input
-          type="button"
-          value="Focus the text input"
-          onClick={this.handleClick}
-        />
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <MyComponent />,
-  document.getElementById('example')
-);
-```
-
-
-## More About Refs
-
-To learn more about refs, including ways to use them effectively, see our [more about refs](/react/docs/more-about-refs.html) documentation.
-
-
-## Component Lifecycle
-
-Components have three main parts of their lifecycle:
-
-* **Mounting:** A component is being inserted into the DOM.
-* **Updating:** A component is being re-rendered to determine if the DOM should be updated.
-* **Unmounting:** A component is being removed from the DOM.
-
-React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
-
-
-### Mounting
-
-* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
-* `componentWillMount()` is invoked immediately before mounting occurs.
-* `componentDidMount()` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
-
-
-### Updating
-
-* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
-* `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
-* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
-* `componentDidUpdate(object prevProps, object prevState)` is invoked immediately after updating occurs.
-
-
-### Unmounting
-
-* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
-
-
-### Mounted Methods
-
-_Mounted_ composite components also support the following methods:
-
-* `getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
-* `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
-
-
-## Browser Support and Polyfills
-
-At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing `+new Date()`, we can just write `Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
-
-In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like [es5-shim](https://github.com/kriskowal/es5-shim).
-
-
-### Polyfills Needed to Support Older Browsers
-
-`es5-shim.js` from [kriskowal's es5-shim](https://github.com/kriskowal/es5-shim) provides the following that React needs:
-
-* `Array.isArray`
-* `Array.prototype.every`
-* `Array.prototype.forEach`
-* `Array.prototype.indexOf`
-* `Array.prototype.map`
-* `Date.now`
-* `Function.prototype.bind`
-* `Object.keys`
-* `String.prototype.split`
-* `String.prototype.trim`
-
-`es5-sham.js`, also from [kriskowal's es5-shim](https://github.com/kriskowal/es5-shim), provides the following that React needs:
-
-* `Object.create`
-* `Object.freeze`
-
-The unminified build of React needs the following from [paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill).
-
-* `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 for.
-
-
-#### onScroll event on IE8
-
-On IE8 the `onScroll` event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events.
-Currently a handler to this event is ignored on IE8.
-
-See the [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) GitHub issue for more information.

docs/docs/07.1-more-about-refs.md

@@ -1,140 +0,0 @@
----
-id: more-about-refs
-title: More About Refs
-layout: docs
-permalink: more-about-refs.html
-prev: working-with-the-browser.html
-next: tooling-integration.html
----
-After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent `props` are sent to each child that is output from `render()`. However there are a few cases, where it still might be necessary or beneficial.
-
-Consider the case when you wish to tell an `<input />` element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, `''`.
-
-```javascript
-  var App = React.createClass({
-    getInitialState: function() {
-      return {userInput: ''};
-    },
-    handleChange: function(e) {
-      this.setState({userInput: e.target.value});
-    },
-    clearAndFocusInput: function() {
-      this.setState({userInput: ''}); // Clear the input
-      // We wish to focus the <input /> now!
-    },
-    render: function() {
-      return (
-        <div>
-          <div onClick={this.clearAndFocusInput}>
-            Click to Focus and Reset
-          </div>
-          <input
-            value={this.state.userInput}
-            onChange={this.handleChange}
-          />
-        </div>
-      );
-    }
-  });
-```
-
-
-Notice how, in this example, we want to "tell" the input something - something that it cannot infer from its props over time. In this case we want to "tell" it that it should now become focused. However, there are some challenges. What is returned from `render()` is not your actual composition of "child" components, it is merely a *description* of the children at a particular instance in time - a snapshot, if you will.
-
-> Note:
->
-> Remember, what you return from `render()` is not your *actual* rendered children instances. What you return from `render()` is merely a *description* of the children instances in your component's sub-hierarchy at a particular moment in time.
-
-
-This means that you should never "hold onto" something that you return from `render()` and then expect it to be anything meaningful.
-
-```javascript
-  // counterexample: DO NOT DO THIS!
-  render: function() {
-    var myInput = <input />;          // I'm going to try to call methods on this
-    this.rememberThisInput = myInput; // input at some point in the future! YAY!
-    return (
-      <div>
-        <div>...</div>
-        {myInput}
-      </div>
-    );
-  }
-```
-
-In this counterexample, the `<input />` is merely a *description* of an `<input />`. This description is used to create a *real* **backing instance** for the `<input />`.
-
-So how do we talk to the *real* backing instance of the input?
-
-## The ref Attribute
-
-React supports a very special property that you can attach to any component that is output from `render()`. This special property allows you to refer to the corresponding **backing instance** of anything returned from `render()`. It is always guaranteed to be the proper instance, at any point in time.
-
-It's as simple as:
-
-1. Assign a `ref` attribute to anything returned from `render` such as:
-
-  ```html
-  <input ref="myInput" />
-  ```
-
-2. In some other code (typically event handler code), access the **backing instance** via `this.refs` as in:
-
-  ```javascript
-  this.refs.myInput
-  ```
-
-  You can access the component's DOM node directly by calling `this.refs.myInput.getDOMNode()`.
-
-## Completing the Example
-
-```javascript
-  var App = React.createClass({
-    getInitialState: function() {
-      return {userInput: ''};
-    },
-    handleChange: function(e) {
-      this.setState({userInput: e.target.value});
-    },
-    clearAndFocusInput: function() {
-      // Clear the input
-      this.setState({userInput: ''}, function() {
-        // This code executes after the component is re-rendered
-        this.refs.theInput.getDOMNode().focus();   // Boom! Focused!
-      });
-    },
-    render: function() {
-      return (
-        <div>
-          <div onClick={this.clearAndFocusInput}>
-            Click to Focus and Reset
-          </div>
-          <input
-            ref="theInput"
-            value={this.state.userInput}
-            onChange={this.handleChange}
-          />
-        </div>
-      );
-    }
-  });
-```
-
-In this example, our render function returns a description of an `<input />` instance. But the true instance is accessed via `this.refs.theInput`. As long as a child component with `ref="theInput"` is returned from render, `this.refs.theInput` will access the proper instance. This even works on higher level (non-DOM) components such as `<Typeahead ref="myTypeahead" />`.
-
-
-## Summary
-
-Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive `props` and `state`. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save `ref`s for use cases that are inherently non-reactive.
-
-### Benefits:
-
-- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`).
-- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node via `this.refs.myInput.getDOMNode()`. Refs are one of the only practical ways of doing this reliably.
-- Refs are automatically book-kept for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).
-
-### Cautions:
-
-- *Never* access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.
-- If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref="myRefString"`.
-- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where `state` should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" – instead, the data flow will usually accomplish your goal.

docs/docs/08-tooling-integration.md

@@ -1,41 +0,0 @@
----
-id: tooling-integration
-title: Tooling Integration
-layout: docs
-permalink: tooling-integration.html
-prev: more-about-refs.html
-next: addons.html
----
-
-Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
-
-## React
-
-### CDN-hosted React
-
-We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These prebuilt files use the UMD module format. Dropping them in with a simple `<script>` tag will inject a `React` global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
-
-
-### Using master
-
-We have instructions for building from `master` [in our GitHub repository](https://github.com/facebook/react). We build a tree of CommonJS modules under `build/modules` which you can drop into any environment or packaging tool that supports CommonJS.
-
-## JSX
-
-### In-browser JSX Transform
-
-If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
-
-> Note:
->
-> The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
-
-
-### 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.
-
-
-### Helpful Open-Source Projects
-
-The open-source community has built tools that integrate JSX with several editors and build systems. See [JSX integrations](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) for the full list.

docs/docs/09-addons.md

@@ -1,24 +0,0 @@
----
-id: addons
-title: Add-ons
-layout: docs
-permalink: addons.html
-prev: tooling-integration.html
-next: animation.html
----
-
-`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
-
-- [`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.
-
-The add-ons below are in the development (unminified) version of React only:
-
-- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
-- [`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/09.1-animation.md

@@ -1,125 +0,0 @@
----
-id: animation
-title: Animation
-layout: docs
-permalink: animation.html
-prev: addons.html
-next: two-way-binding-helpers.html
----
-
-React provides a `ReactTransitionGroup` addon component as a low-level API for animation, and a `ReactCSSTransitionGroup` for easily implementing basic CSS animations and transitions.
-
-## High-level API: `ReactCSSTransitionGroup`
-
-`ReactCSSTransitionGroup` is based on `ReactTransitionGroup` and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.
-
-### Getting Started
-
-`ReactCSSTransitionGroup` is the interface to `ReactTransitions`. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.
-
-```javascript{30-32}
-/** @jsx React.DOM */
-
-var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
-
-var TodoList = React.createClass({
-  getInitialState: function() {
-    return {items: ['hello', 'world', 'click', 'me']};
-  },
-  handleAdd: function() {
-    var newItems =
-      this.state.items.concat([prompt('Enter some text')]);
-    this.setState({items: newItems});
-  },
-  handleRemove: function(i) {
-    var newItems = this.state.items;
-    newItems.splice(i, 1);
-    this.setState({items: newItems});
-  },
-  render: function() {
-    var items = this.state.items.map(function(item, i) {
-      return (
-        <div key={item} onClick={this.handleRemove.bind(this, i)}>
-          {item}
-        </div>
-      );
-    }.bind(this));
-    return (
-      <div>
-        <button onClick={this.handleAdd}>Add Item</button>
-        <ReactCSSTransitionGroup transitionName="example">
-          {items}
-        </ReactCSSTransitionGroup>
-      </div>
-    );
-  }
-});
-```
-
-In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
-
-You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
-
-```css
-.example-enter {
-  opacity: 0.01;
-  transition: opacity .5s ease-in;
-}
-
-.example-enter.example-enter-active {
-  opacity: 1;
-}
-```
-
-You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keeps it in the DOM. If you're using an unminified build of React with add-ons you'll see a warning that React was expecting an animation or transition to occur. That's because `ReactCSSTransitionGroup` keeps your DOM elements on the page until the animation completes. Try adding this CSS:
-
-```css
-.example-leave {
-  opacity: 1;
-  transition: opacity .5s ease-in;
-}
-
-.example-leave.example-leave-active {
-  opacity: 0.01;
-}
-```
-
-### Disabling Animations
-
-You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.
-
-> Note:
->
-> When using `ReactCSSTransitionGroup`, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level `ReactTransitionGroup` API which provides the hooks you need to do custom transitions.
-
-## 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.
-
-### `componentWillEnter(callback)`
-
-This is called at the same time as `componentDidMount()` for components added to an existing `TransitionGroup`. It will block other animations from occurring until `callback` is called. It will not be called on the initial render of a `TransitionGroup`.
-
-### `componentDidEnter()`
-
-This is called after the `callback` function that was passed to `componentWillEnter` is called.
-
-### `componentWillLeave(callback)`
-
-This is called when the child has been removed from the `ReactTransitionGroup`. Though the child has been removed, `ReactTransitionGroup` will keep it in the DOM until `callback` is called.
-
-### `componentDidLeave()`
-
-This is called when the `willLeave` `callback` is called (at the same time as `componentWillUnmount`).
-
-### Rendering a Different Component
-
-By default `ReactTransitionGroup` renders as a `span`. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
-
-```javascript{1}
-<ReactTransitionGroup component={React.DOM.ul}>
-  ...
-</ReactTransitionGroup>
-```
-
-Every DOM component is under `React.DOM`. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself!

docs/docs/09.2-form-input-binding-sugar.md

@@ -1,119 +0,0 @@
----
-id: two-way-binding-helpers
-title: Two-Way Binding Helpers
-layout: docs
-permalink: two-way-binding-helpers.html
-prev: animation.html
-next: class-name-manipulation.html
----
-
-`ReactLink` is an easy way to express two-way binding with React. 
-
-> Note:
->
-> If you're new to the framework, note that `ReactLink` is not needed for most applications and should be used cautiously.
-
-In React, data flows one way: from owner to child. This is because data only flows one direction in [the Von Neumann model of computing](http://en.wikipedia.org/wiki/Von_Neumann_architecture). You can think of it as "one-way data binding."
-
-However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
-
-In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](/react/docs/forms.html) for more information.
-
-Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `ReactLink`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
-
-> Note:
->
-> ReactLink is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
-
-## ReactLink: Before and After
-
-Here's a simple form example without using `ReactLink`:
-
-```javascript
-/** @jsx React.DOM */
-
-var NoLink = React.createClass({
-  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} />;
-  }
-});
-```
-
-This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use `ReactLink` to save us some typing:
-
-```javascript{4,9}
-/** @jsx React.DOM */
-
-var WithLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    return <input type="text" valueLink={this.linkState('value')} />;
-  }
-});
-```
-
-`LinkedStateMixin` adds a method to your React component called `linkState()`. `linkState()` returns a `ReactLink` object which contains the current value of the React state and a callback to change it.
-
-`ReactLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
-
-Note that `<input>` supports ReactLink for both `value` and `checked`.
-
-## Under the Hood
-
-There are two sides to `ReactLink`: the place where you create the `ReactLink` instance and the place where you use it. To prove how simple `ReactLink` is, let's rewrite each side separately to be more explicit.
-
-### ReactLink Without LinkedStateMixin
-
-```javascript{7-9,11-14}
-/** @jsx React.DOM */
-
-var WithoutMixin = React.createClass({
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  handleChange: function(newValue) {
-    this.setState({value: newValue});
-  },
-  render: function() {
-    var valueLink = {
-      value: this.state.value,
-      requestChange: this.handleChange
-    };
-    return <input type="text" valueLink={valueLink} />;
-  }
-});
-```
-
-As you can see, `ReactLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
-
-### ReactLink Without valueLink
-
-```javascript
-/** @jsx React.DOM */
-
-var WithoutLink = React.createClass({
-  mixins: [React.addons.LinkedStateMixin],
-  getInitialState: function() {
-    return {value: 'Hello!'};
-  },
-  render: function() {
-    var valueLink = this.linkState('value');
-    var handleChange = function(e) {
-      valueLink.requestChange(e.target.value);
-    };
-    return <input type="text" value={valueLink.value} onChange={handleChange} />;
-  }
-});
-```
-
-The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!

docs/docs/09.3-class-name-manipulation.md

@@ -1,46 +0,0 @@
----
-id: class-name-manipulation
-title: Class Name Manipulation
-layout: docs
-permalink: class-name-manipulation.html
-prev: two-way-binding-helpers.html
-next: test-utils.html
----
-
-`classSet()` is a neat utility for easily manipulating the DOM `class` string.
-
-Here's a common scenario and its solution without `classSet()`:
-
-```javascript
-// inside some `<Message />` React component
-render: function() {
-  var classString = 'message';
-  if (this.props.isImportant) {
-    classString += ' message-important';
-  }
-  if (this.props.isRead) {
-    classString += ' message-read';
-  }
-  // 'message message-important message-read'
-  return <div className={classString}>Great, I'll be there.</div>;
-}
-```
-
-This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:
-
-```javascript
-render: function() {
-  var cx = React.addons.classSet;
-  var classes = cx({
-    'message': true,
-    'message-important': this.props.isImportant,
-    'message-read': this.props.isRead
-  });
-  // same final string, but much cleaner
-  return <div className={classes}>Great, I'll be there.</div>;
-}
-```
-
-When using `classSet()`, pass an object with keys of the CSS class names you might or might not need. Truthy values will result in the key being a part of the resulting string.
-
-No more hacky string concatenations!