[Beta] Blog MVP (#5493)

* Remove old blog entries

* Blog MVP

* TS

beta/src/components/MDX/MDXComponents.tsx

@@ -133,6 +133,15 @@ function LearnMore({
   );
 }
 
+function ReadBlogPost({path}: {path: string}) {
+  return (
+    <ButtonLink className="mt-1" label="Read Post" href={path} type="primary">
+      Read Post
+      <IconNavArrow displayDirection="right" className="inline ml-1" />
+    </ButtonLink>
+  );
+}
+
 function Math({children}: {children: any}) {
   return (
     <span
@@ -399,6 +408,7 @@ export const MDXComponents = {
   MathI,
   Note,
   PackageImport,
+  ReadBlogPost,
   Recap,
   Recipes,
   Sandpack,

beta/src/content/blog/2013/06/02/jsfiddle-integration.md

@@ -1,8 +0,0 @@
----
-title: JSFiddle Integration
-author: [vjeux]
----
-
-[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
-
-<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>

beta/src/content/blog/2013/06/05/why-react.md

@@ -1,88 +0,0 @@
----
-title: Why did we build React?
-author: [petehunt]
----
-
-There are a lot of JavaScript MVC frameworks out there. Why did we build React
-and why would you want to use it?
-
-## React isn't an MVC framework. {/*react-isnt-an-mvc-framework*/}
-
-React is a library for building composable user interfaces. It encourages
-the creation of reusable UI components which present data that changes over
-time.
-
-## React doesn't use templates. {/*react-doesnt-use-templates*/}
-
-Traditionally, web application UIs are built using templates or HTML directives.
-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:
-
-- **JavaScript is a flexible, powerful programming language** with the ability
-  to build abstractions. This is incredibly important in large applications.
-- By unifying your markup with its corresponding view logic, React can actually
-  make views **easier to extend and maintain**.
-- By baking an understanding of markup and content into JavaScript, there's
-  **no manual string concatenation** and therefore less surface area for XSS
-  vulnerabilities.
-
-We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
-extension, in case you prefer the readability of HTML to raw JavaScript.
-
-## Reactive updates are dead simple. {/*reactive-updates-are-dead-simple*/}
-
-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](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
-
-React takes a different approach.
-
-When your component is first initialized, the `render` method is called,
-generating a lightweight representation of your view. From that representation,
-a string of markup is produced, and injected into the document. When your data
-changes, the `render` method is called again. In order to perform updates as
-efficiently as possible, we diff the return value from the previous call to
-`render` with the new one, and generate a minimal set of changes to be applied
-to the DOM.
-
-> The data returned from `render` is neither a string nor a DOM node -- it's a
-> lightweight description of what the DOM should look like.
-
-We call this process **reconciliation**. Check out
-[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
-reconciliation in action.
-
-Because this re-render is so fast (around 1ms for TodoMVC), the developer
-doesn't need to explicitly specify data bindings. We've found this approach
-makes it easier to build apps.
-
-## HTML is just the beginning. {/*html-is-just-the-beginning*/}
-
-Because React has its own lightweight representation of the document, we can do
-some pretty cool things with it:
-
-- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
-- Instagram is a "single page" web app built entirely with React and
-  `Backbone.Router`. Designers regularly contribute React code with JSX.
-- 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](https://github.com/petehunt/react-server-rendering-example)
-  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 [https://reactjs.org](https://reactjs.org) 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](/support.html) with us!
-
-Thanks for reading!

beta/src/content/blog/2013/06/12/community-roundup.md

@@ -1,48 +0,0 @@
----
-title: 'Community Round-up #1'
-author: [vjeux]
----
-
-React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
-
-## Khan Academy Question Editor {/*khan-academy-question-editor*/}
-
-It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for her contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Sophie wrote about her experience using React:
-
-> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
->
-> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
->
-> <figure><a href="http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/images/blog/khan-academy-editor.png"/></a></figure>
->
-> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
-
-## Pimp my Backbone.View (by replacing it with React) {/*pimp-my-backboneview-by-replacing-it-with-react*/}
-
-[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
-
-> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.
->
-> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.
->
-> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.
->
-> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
-
-## Using facebook's React with require.js {/*using-facebooks-react-with-requirejs*/}
-
-[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
-
-> I recently stumbled upon facebook's React library, which is a JavaScript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.
->
-> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
-
-## Origins of React {/*origins-of-react*/}
-
-[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
-
-> React isn't quite like any other popular JavaScript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
->
-> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
->
-> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)

beta/src/content/blog/2013/06/19/community-roundup-2.md

@@ -1,73 +0,0 @@
----
-title: 'Community Round-up #2'
-author: [vjeux]
----
-
-Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
-
-## Some quick thoughts on React {/*some-quick-thoughts-on-react*/}
-
-[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
-
-> I have been using Facebook's recently released JavaScript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
->
-> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
->
-> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
->
-> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
->
-> [Read the full post...](http://www.andrewgreig.com/637/)
-
-## React and Socket.IO Chat Application {/*react-and-socketio-chat-application*/}
-
-[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
-
-> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
->
-> <figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/images/blog/chatapp.png"/></a></figure>
->
-> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
-
-## React and Other Frameworks {/*react-and-other-frameworks*/}
-
-[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
-
-> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
->
-> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
->
-> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
-
-In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
-
-## Web Components: React & x-tags {/*web-components-react--x-tags*/}
-
-Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
-
-> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
->
-> <figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/images/blog/xreact.png"/></a></figure>
->
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
-
-## React TodoMVC Example {/*react-todomvc-example*/}
-
-[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
-
-> Developers these days are spoiled with choice when it comes to selecting an MV\* framework for structuring and organizing their JavaScript web apps.
->
-> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
->
-> <figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/images/blog/todomvc.png"/></a></figure>
->
-> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
-
-## JSX is not HTML {/*jsx-is-not-html*/}
-
-Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
-
-- [Whitespace removal](/docs/jsx-is-not-html.html)
-- [HTML Entities](/docs/jsx-is-not-html.html)
-- [Comments](/docs/jsx-is-not-html.html)
-- [Custom HTML Attributes](/docs/jsx-is-not-html.html)

beta/src/content/blog/2013/06/21/react-v0-3-3.md

@@ -1,20 +0,0 @@
----
-title: 'React v0.3.3'
-author: [zpao]
----
-
-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 {/*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 {/*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 {/*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.

beta/src/content/blog/2013/06/27/community-roundup-3.md

@@ -1,90 +0,0 @@
----
-title: 'Community Round-up #3'
-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 {/*moving-from-backbone-to-react*/}
-
-[Clay Allsopp](https://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="/images/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 {/*grunt-task-for-jsx*/}
-
-[Eric Clemmons](https://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 {/*backbonehandlebars-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 manipulate 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 {/*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 {/*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 {/*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)

beta/src/content/blog/2013/07/02/react-v0-4-autobind-by-default.md

@@ -1,51 +0,0 @@
----
-title: "New in React v0.4: Autobind by Default"
-author: [zpao]
----
-
-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? {/*what-is-reactautobind*/}
-
-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](https://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? {/*whats-changing-in-v04*/}
-
-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.

beta/src/content/blog/2013/07/03/community-roundup-4.md

@@ -1,59 +0,0 @@
----
-title: 'Community Round-up #4'
-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 {/*khan-academy*/}
-
-[Ben Kamens](http://bjk5.com/) explains how [Sophie Alpert](http://sophiebits.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.
-
-[![](/images/blog/monkeys.gif)](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
-
-## React Snippets {/*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](/docs/reusable-components.html) and [Lifecycle Methods](/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 {/*introduction-to-react-screencast*/}
-
-[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
-
-<figure><iframe src="https://player.vimeo.com/video/67248575" width="100%" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
-
-## Snake in React {/*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><a href="https://tomocchino.github.io/react-snake/"><img src="/images/blog/snake.png"/></a></figure>

beta/src/content/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.md

@@ -1,60 +0,0 @@
----
-title: 'New in React v0.4: Prop Validation and Default Values'
-author: [zpao]
----
-
-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 {/*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 {/*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.

beta/src/content/blog/2013/07/17/react-v0-4-0.md

@@ -1,37 +0,0 @@
----
-title: 'React v0.4.0'
-author: [zpao]
----
-
-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](https://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](/docs/installation.html)!
-
-### React {/*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...](/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...](/docs/multiple-components.html)
-- Removed `React.autoBind`. [Read our blog post for details...](/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...](/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 {/*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 {/*react-tools*/}
-
-- Fixed a number of bugs when transforming directories
-- No longer re-write `require()`s to be relative unless specified

beta/src/content/blog/2013/07/23/community-roundup-5.md

@@ -1,94 +0,0 @@
----
-title: 'Community Round-up #5'
-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 {/*cross-browser-onchange*/}
-
-[Sophie Alpert](http://sophiebits.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. She wrote a blog post explaining the various browser quirks she 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://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
-
-## React Samples {/*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 {/*react-chosen-wrapper*/}
-
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://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.getElementById('example')
-);
-```
-
-## JSX and ES6 Template Strings {/*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="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="100%" height={356} frameBorder={0} marginWidth={0} marginHeight={0} scrolling="no" style={{border: '1px solid #CCC', borderWidth: '1px 1px 0', marginBottom: 5}} allowFullScreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
-
-## React Presentation {/*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-nocookie.com/embed/XxVg_s8xAms" frameBorder={0} allowFullScreen /></figure>
-
-## Docs {/*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?](/docs/why-react.html)
-> - [Displaying Data](/docs/displaying-data.html)
->   - [JSX in Depth](/docs/jsx-in-depth.html)
->   - [JSX Gotchas](/docs/jsx-gotchas.html)
-> - [Interactivity and Dynamic UIs](/docs/interactivity-and-dynamic-uis.html)
-> - [Multiple Components](/docs/multiple-components.html)
-> - [Reusable Components](/docs/reusable-components.html)
-> - [Forms](/docs/forms.html)
-> - [Working With the Browser](/docs/working-with-the-browser.html)
->   - [More About Refs](/docs/more-about-refs.html)
-> - [Tooling integration](/docs/tooling-integration.html)
-> - [Reference](/docs/top-level-api.html)

beta/src/content/blog/2013/07/26/react-v0-4-1.md

@@ -1,21 +0,0 @@
----
-title: 'React v0.4.1'
-author: [zpao]
----
-
-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 {/*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 {/*jsxtransformer*/}
-
-- Improved environment detection so it can be run in a non-browser environment.
-
-[Download it now!](/downloads.html)

beta/src/content/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.md

@@ -1,47 +0,0 @@
----
-title: 'Use React and JSX in Ruby on Rails'
-author: [zpao]
----
-
-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 {/*packaging-reactjs*/}
-
-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 {/*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.getElementById('example'));
-```
-
-## Asset Pipeline {/*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*/}
-
-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.

beta/src/content/blog/2013/08/05/community-roundup-6.md

@@ -1,76 +0,0 @@
----
-title: 'Community Round-up #6'
-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 {/*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><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/images/blog/dog-tutorial.png"/></a></figure>
-
-## Reactify {/*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 {/*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 {/*react-stylus-boilerplate*/}
-
-[Zaim Bakar](https://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 {/*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><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/images/blog/landoflisp.png"/></a></figure>
->
-> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)

beta/src/content/blog/2013/08/19/use-react-and-jsx-in-python-applications.md

@@ -1,55 +0,0 @@
----
-title: 'Use React and JSX in Python Applications'
-author: [kmeht]
----
-
-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 {/*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 {/*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 {/*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)!

beta/src/content/blog/2013/08/26/community-roundup-7.md

@@ -1,73 +0,0 @@
----
-title: 'Community Round-up #7'
-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](/blog/)
-- 2 early adopters: [Khan Academy](http://sophiebits.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 {/*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><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/images/blog/wolfenstein_react.png"/></a></figure>
-
-## React & Meteor {/*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 {/*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><a href="https://github.com/facebook/react-page/"><img src="/images/blog/react-page.png"/></a></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/)

beta/src/content/blog/2013/09/24/community-roundup-8.md

@@ -1,66 +0,0 @@
----
-title: 'Community Round-up #8'
-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 {/*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 Sophie 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 {/*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={{marginLeft: 74}}><blockquote className="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
-
-## Remarkable React {/*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 writing _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 {/*markdown-in-react*/}
-
-[Sophie Alpert](http://sophiebits.com/) converted [marked](https://github.com/chjj/marked), a Markdown JavaScript implementation, in React: [marked-react](https://github.com/sophiebits/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><a href="https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/images/blog/markdown_refactor.png"/></a></figure>
-
-## Unite from BugBusters {/*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><a href="https://unite.bugbuster.com/"><img src="/images/blog/unite.png"/></a></figure>
-
-## #reactjs IRC Logs {/*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.
-
-[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)

beta/src/content/blog/2013/10/03/community-roundup-9.md

@@ -1,95 +0,0 @@
----
-title: 'Community Round-up #9'
-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.
-
-![](/images/blog/react-hackathon.jpg)
-
-## React Hackathon Winner {/*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><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/images/blog/quiztime.png"/></a></figure>
->
-> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
-
-## JSConf EU Talk: Rethinking Best Practices {/*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="https://www.slideshare.net/slideshow/embed_code/26589373" width="100%" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
-
-## Pump - Clojure bindings for React {/*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 {/*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 containing 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 {/*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><a href="https://turbo-react.herokuapp.com/"><img src="/images/blog/turboreact.png"/></a></figure>
->
-> [Check out the demo...](https://turbo-react.herokuapp.com/)
-
-## Reactive Table {/*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/)

beta/src/content/blog/2013/10/16/react-v0.5.0.md

@@ -1,50 +0,0 @@
----
-title: 'React v0.5'
-author: [zpao]
----
-
-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](/docs/addons.html).
-
-## Thanks to Our Community {/*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 {/*changelog*/}
-
-### React {/*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!) {/*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](/docs/addons.html).
-
-### JSX {/*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.

beta/src/content/blog/2013/10/29/react-v0-5-1.md

@@ -1,23 +0,0 @@
----
-title: 'React v0.5.1'
-author: [zpao]
----
-
-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 [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
-
-## Changelog {/*changelog*/}
-
-### React {/*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 {/*react-with-addons*/}
-
-- Fixed bug with transition and animation event detection.
-
-[1]: https://github.com/sophiebits
-[2]: https://github.com/andreypopp
-[3]: https://github.com/lrowe

beta/src/content/blog/2013/11/06/community-roundup-10.md

@@ -1,122 +0,0 @@
----
-title: 'Community Round-up #10'
-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 {/*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 {/*react-rethinking-best-practices*/}
-
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
-
-<figure><iframe width="650" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
-
-## Server-side React with PHP {/*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><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/images/blog/react-php.png"/></a></figure>
-
-## TodoMVC Benchmarks {/*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 {/*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><a href="http://guessthefilter.com/"><img src="/images/blog/guess_filter.jpg"/></a></figure>
-
-## React vs FruitMachine {/*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 {/*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 {/*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>

beta/src/content/blog/2013/11/18/community-roundup-11.md

@@ -1,91 +0,0 @@
----
-title: 'Community Round-up #11'
-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 {/*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="650" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
-
-## React Tips {/*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](/tips/introduction.html)!
-
-- [Inline Styles](/tips/inline-styles.html)
-- [If-Else in JSX](/tips/if-else-in-JSX.html)
-- [Self-Closing Tag](/tips/self-closing-tag.html)
-- [Maximum Number of JSX Root Nodes](/tips/maximum-number-of-jsx-root-nodes.html)
-- [Shorthand for Specifying Pixel Values in style props](/tips/style-props-value-px.html)
-- [Type of the Children props](/tips/children-props-type.html)
-- [Value of null for Controlled Input](/tips/controlled-input-null-value.html)
-- [`componentWillReceiveProps` Not Triggered After Mounting](/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
-- [Props in getInitialState Is an Anti-Pattern](/tips/props-in-getInitialState-as-anti-pattern.html)
-- [DOM Event Listeners in a Component](/tips/dom-event-listeners.html)
-- [Load Initial Data via AJAX](/tips/initial-ajax.html)
-- [False in JSX](/tips/false-in-jsx.html)
-
-## Intro to the React Framework {/*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><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/images/blog/tutsplus.png"/></a></figure>
->
-> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
-
-## 140-characters textarea {/*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 {/*genesis-skeleton*/}
-
-[Eric Clemmons](https://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><a href="http://genesis-skeleton.com/"><img src="/images/blog/genesis_skeleton.png"/></a>a></figure>
-
-## AgFlow Talk {/*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="100%" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
-
-## JSX {/*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 {/*photo-gallery*/}
-
-[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
-
-<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/images/blog/xoxo2013.png"/></a>a></figure>
-
-## Random Tweet {/*random-tweet*/}
-
-<img src="/images/blog/steve_reverse.gif" style={{float: 'right'}} />
-
-<div style={{width: 320}}>
-<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>

beta/src/content/blog/2013/12/18/react-v0.5.2-v0.4.2.md

@@ -1,21 +0,0 @@
----
-title: 'React v0.5.2, v0.4.2'
-author: [zpao]
----
-
-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]: /react/downloads.html
-[bounty]: https://www.facebook.com/whitehat/
-[ember]: http://emberjs.com/security/
-[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU

beta/src/content/blog/2013/12/19/react-v0.8.0.md

@@ -1,46 +0,0 @@
----
-title: 'React v0.8'
-author: [zpao]
----
-
-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 {/*changelog*/}
-
-### React {/*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 {/*react-with-addons*/}
-
-- Fixed bugs with TransitionGroup when children were undefined
-- Added support for `onTransition`
-
-### react-tools {/*react-tools*/}
-
-- Upgraded `jstransform` and `esprima-fb`
-
-### JSXTransformer {/*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

beta/src/content/blog/2013/12/23/community-roundup-12.md

@@ -1,98 +0,0 @@
----
-title: 'Community Round-up #12'
-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](/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://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 {/*the-future-of-javascript-mvc*/}
-
-[David Nolen](https://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](/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><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/images/blog/om-backbone.png"/></a></figure>
->
-> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
-
-## Scroll Position with React {/*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](/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/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
->
-> ```js
-> 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 {/*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](/docs/animation.html) to implement animations.
-
-<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="/images/blog/lights-out.png"/></a></figure>
-
-[Try it out!](https://chenglou.github.io/react-lights-out/)
-
-## Reactive Table Bookmarklet {/*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><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="/images/blog/reactive-bookmarklet.png"/></a></figure>
-
-[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
-
-## MontageJS Tutorial in React {/*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.
-
-[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
-
-## Writing Good React Components {/*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 {/*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 {/*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><a href="/react/jsx-compiler.html"><img src="/images/blog/jsx-compiler.png"/></a></figure>
-
-[Try it out!](/jsx-compiler.html)
-
-## Random Tweet {/*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>

beta/src/content/blog/2013/12/30/community-roundup-13.md

@@ -1,110 +0,0 @@
----
-title: 'Community Round-up #13'
-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 {/*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="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
-
-[Try out the demos!](https://petehunt.github.io/react-touch/)
-
-## Introduction to React {/*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="650" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
-
-## JSX: E4X The Good Parts {/*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 {/*react--socketio*/}
-
-[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 {/*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 {/*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><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/images/blog/ngreact.png"/></a></figure>
->
-> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
-
-## vim-jsx {/*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 {/*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>

beta/src/content/blog/2014/01/02/react-chrome-developer-tools.md

@@ -1,18 +0,0 @@
----
-title: 'React Chrome Developer Tools'
-author: [sebmarkbage]
----
-
-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="650" height="315" src="//www.youtube-nocookie.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><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/images/blog/react-dev-tools.jpg"/></a></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).

beta/src/content/blog/2014/01/06/community-roundup-14.md

@@ -1,85 +0,0 @@
----
-title: 'Community Round-up #14'
-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-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 multiple 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 {/*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.
-[![](/images/blog/animal-sounds.jpg)](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
-
-[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
-
-## React Rails Tutorial {/*react-rails-tutorial*/}
-
-[Selem Delul](http://selem.im) bundled the [React Tutorial](/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
-
-> ```sh
-> 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 {/*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.
-
-[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
-
-[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
-
-## React Infinite Scroll {/*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 {/*web-components-style*/}
-
-[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
-
-[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
-
-## React vs Angular {/*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 {/*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>

beta/src/content/blog/2014/02/05/community-roundup-15.md

@@ -1,126 +0,0 @@
----
-title: 'Community Round-up #15'
-author: [jgebhardt]
----
-
-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"](https://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" {/*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 {/*reagent-minimalistic-react-for-clojurescript*/}
-
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://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...](https://holmsand.github.io/reagent/)
-
-## Functional DOM programming {/*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="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
-
-## Kioo: Separating markup and logic {/*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 {/*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 {/*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 {/*time-travel-implementing-undo-in-om*/}
-
-David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
-
-### A Step-by-Step Om Walkthrough {/*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 {/*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 {/*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 {/*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>

beta/src/content/blog/2014/02/15/community-roundup-16.md

@@ -1,77 +0,0 @@
----
-title: 'Community Round-up #16'
-author: [jgebhardt]
----
-
-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 {/*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="100%" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
-## React's diff algorithm {/*reacts-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>[![](/images/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! {/*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 {/*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 {/*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 {/*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 {/*eggheadio-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-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
-
-### "React: Finally, a great server/client web stack" {/*react-finally-a-great-serverclient-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 {/*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>[![](/images/blog/resistance-calculator.png)](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
-
-## Random Tweets {/*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>

beta/src/content/blog/2014/02/16/react-v0.9-rc1.md

@@ -1,125 +0,0 @@
----
-title: React v0.9 RC
-author: [sophiebits]
----
-
-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: https://fb.me/react-0.9.0-rc1.js  
-  Minified build for production: https://fb.me/react-0.9.0-rc1.min.js  
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.9.0-rc1.js>  
-  Minified build for production: https://fb.me/react-with-addons-0.9.0-rc1.min.js  
-- **In-Browser JSX transformer**  
-  https://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 {/*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 eliminates 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 {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*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 {/*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 {/*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-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 {/*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

beta/src/content/blog/2014/02/20/react-v0.9.md

@@ -1,137 +0,0 @@
----
-title: React v0.9
-author: [sophiebits]
----
-
-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: https://fb.me/react-0.9.0.js  
-  Minified build for production: https://fb.me/react-0.9.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.9.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.9.0.min.js
-- **In-Browser JSX Transformer**  
-  https://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? {/*whats-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](/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 {/*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 eliminates 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 {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*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 {/*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 {/*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-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 {/*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

beta/src/content/blog/2014/02/24/community-roundup-17.md

@@ -1,90 +0,0 @@
----
-title: 'Community Round-up #17'
-author: [jgebhardt]
----
-
-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 {/*react-in-the-real-world*/}
-
-### Facebook Lookback video editor {/*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 {/*russias-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*/}
-
-[Relato](https://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 {/*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.
-[![](/images/blog/makona-editor.png)](https://johnthethird.github.io/makona-editor/)
-
-### Create Chrome extensions using React {/*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 {/*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*/}
-
-[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*/}
-
-[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
-
-### SVG-based graphical node editor {/*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](https://forresto.github.io/prototyping/react/) in React.
-[![](/images/blog/react-svg-fbp.png)](https://forresto.github.io/prototyping/react/)
-
-### Ultimate Tic-Tac-Toe Game in React {/*ultimate-tic-tac-toe-game-in-react*/}
-
-Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://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 {/*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="650" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
-
-## React Components {/*react-components*/}
-
-### Table Sorter {/*table-sorter*/}
-
-[Table Sorter](https://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 {/*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 {/*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 {/*input-with-placeholder-shim*/}
-
-[react-input-placeholder](enigma-io/react-input-placeholder) by [enigma-io](@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*/}
-
-[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 {/*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](https://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 {/*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>

beta/src/content/blog/2014/03/14/community-roundup-18.md

@@ -1,101 +0,0 @@
----
-title: 'Community Round-up #18'
-author: [jgebhardt]
----
-
-In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
-
-## "Little framework BIG splash" {/*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 {/*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 {/*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 {/*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 {/*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 {/*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"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
-
-## React and plain old HTML {/*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 {/*react-and-objectobserve*/}
-
-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 {/*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 {/*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="650" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
-
-## React and Web Components {/*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 {/*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 {/*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 {/*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 {/*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>

beta/src/content/blog/2014/03/19/react-v0.10-rc1.md

@@ -1,74 +0,0 @@
----
-title: React v0.10 RC
-author: [zpao]
----
-
-[v0.9 has only been out for a month](/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: https://fb.me/react-0.10.0-rc1.js  
-  Minified build for production: https://fb.me/react-0.10.0-rc1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.10.0-rc1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.10.0-rc1.min.js
-- **In-Browser JSX transformer**  
-  https://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 {/*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](https://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 {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### New Features {/*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`](/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 {/*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 {/*addons*/}
-
-- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
-
-### react-tools {/*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).

beta/src/content/blog/2014/03/21/react-v0.10.md

@@ -1,74 +0,0 @@
----
-title: React v0.10
-author: [zpao]
----
-
-Hot on the heels of the [release candidate earlier this week](/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: https://fb.me/react-0.10.0.js  
-  Minified build for production: https://fb.me/react-0.10.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.10.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.10.0.min.js
-- **In-Browser JSX transformer**  
-  https://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 {/*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](https://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 {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### New Features {/*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`](/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 {/*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 {/*addons*/}
-
-- `update` function to deal with immutable data. [Read the docs](/docs/update.html)
-
-### react-tools {/*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).

beta/src/content/blog/2014/03/28/the-road-to-1.0.md

@@ -1,56 +0,0 @@
----
-title: The Road to 1.0
-author: [zpao]
----
-
-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 {/*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 {/*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 {/*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 {/*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. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
-
-## Addons {/*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 {/*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 {/*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 {/*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]: /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

beta/src/content/blog/2014/04/04/reactnet.md

@@ -1,38 +0,0 @@
----
-title: 'Use React and JSX in ASP.NET MVC'
-author: [Daniel15]
----
-
-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 {/*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).

beta/src/content/blog/2014/05/06/flux.md

@@ -1,16 +0,0 @@
----
-title: 'Flux: An Application Architecture for React'
-author: [fisherwebdev, jingc]
----
-
-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="650" height="315" src="//www.youtube-nocookie.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/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.

beta/src/content/blog/2014/05/29/one-year-of-open-source-react.md

@@ -1,14 +0,0 @@
----
-title: 'One Year of Open-Source React'
-author: [chenglou]
----
-
-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](/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](https://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](/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!

beta/src/content/blog/2014/06/27/community-roundup-19.md

@@ -1,60 +0,0 @@
----
-title: 'Community Round-up #19'
-author: [chenglou]
----
-
-## React Meetups! {/*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 {/*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](https://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 {/*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="650" height="315" src="//www.youtube-nocookie.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.
-
-[![](/images/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 {/*even-more-people-using-react*/}
-
-### Prismatic {/*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 {/*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*/}
-
-[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*/}
-
-[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 {/*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>

beta/src/content/blog/2014/07/13/react-v0.11-rc1.md

@@ -1,144 +0,0 @@
----
-title: React v0.11 RC
-author: [zpao]
----
-
-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: https://fb.me/react-0.11.0-rc1.js  
-  Minified build for production: https://fb.me/react-0.11.0-rc1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.11.0-rc1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.11.0-rc1.min.js
-- **In-Browser JSX transformer**  
-  https://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` {/*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` {/*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 {/*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 {/*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 {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*breaking-changes*/}
-
-- `getDefaultProps()` is now called once per class and shared across all instances
-
-#### New Features {/*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 {/*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 {/*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 {/*react-npm-module*/}
-
-- Now includes the pre-built packages under `dist/`.
-- `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX {/*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 {/*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

beta/src/content/blog/2014/07/17/react-v0.11.md

@@ -1,163 +0,0 @@
----
-title: React v0.11
-author: [zpao]
----
-
-**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
-
----
-
-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: https://fb.me/react-0.11.0.js  
-  Minified build for production: https://fb.me/react-0.11.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.11.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.11.0.min.js
-- **In-Browser JSX transformer**  
-  https://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` {/*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` {/*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 {/*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 {/*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.
-
-## Descriptors {/*descriptors*/}
-
-In our [v0.10 release notes](/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
-
-Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
-
-## Prop Type Validation {/*prop-type-validation*/}
-
-Previously `React.PropTypes` validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply `console.log` your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (_not throw_) an `Error` object. We then log the `error.message` property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an `Error` with your message instead.
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*breaking-changes*/}
-
-- `getDefaultProps()` is now called once per class and shared across all instances
-- `MyComponent()` now returns a descriptor, not an instance
-- `React.isValidComponent` and `React.PropTypes.component` validate _descriptors_, not component instances.
-- Custom `propType` validators should return an `Error` instead of logging directly
-
-#### New Features {/*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 {/*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 {/*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 {/*react-npm-module*/}
-
-- Now includes the pre-built packages under `dist/`.
-- `envify` is properly listed as a dependency instead of a peer dependency
-
-### JSX {/*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 {/*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

beta/src/content/blog/2014/07/25/react-v0.11.1.md

@@ -1,45 +0,0 @@
----
-title: React v0.11.1
-author: [zpao]
----
-
-Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
-
-The first of these is the most major and resulted in a regression with the use of `setState` inside `componentWillMount` when using React on the server. These `setState` calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as `document` is not defined.
-
-There are several fixes we're including in v0.11.1 that are focused around the newly supported `event.getModifierState()` function. We made some adjustments to improve this cross-browser standardization.
-
-The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.
-
-We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/blog/2014/07/17/react-v0.11.html#prop-type-validation).
-
-The release is available for download from the CDN:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.11.1.js  
-  Minified build for production: https://fb.me/react-0.11.1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.11.1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.11.1.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.11.1.js
-
-We've also published version `0.11.1` 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.
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Bug Fixes {/*bug-fixes*/}
-
-- `setState` can be called inside `componentWillMount` in non-DOM environments
-- `SyntheticMouseEvent.getEventModifierState` correctly renamed to `getModifierState`
-- `getModifierState` correctly returns a `boolean`
-- `getModifierState` is now correctly case sensitive
-- Empty Text node used in IE8 `innerHTML` workaround is now removed, fixing rerendering in certain cases
-
-### JSXTransformer {/*jsxtransformer*/}
-
-- Fix duplicate variable declaration (caused issues in some browsers)

beta/src/content/blog/2014/07/28/community-roundup-20.md

@@ -1,110 +0,0 @@
----
-title: 'Community Round-up #20'
-author: [LoukaN]
----
-
-It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
-
-## Atom moves to React {/*atom-moves-to-react*/}
-
-[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
-
-[<img src="/images/blog/gpu-cursor-move.gif" style={{width: '100%'}} />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
-
-## Why Does React Scale? {/*why-does-react-scale*/}
-
-At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
-
-<iframe width={650} height={315} src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameBorder={0} allowFullScreen />
-
-## Live Editing {/*live-editing*/}
-
-One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
-
-<iframe src="//player.vimeo.com/video/100010922" width="100%" height={315} webkitallowfullscreen mozallowfullscreen allowFullScreen />
-
-## ReactIntl Mixin by Yahoo {/*reactintl-mixin-by-yahoo*/}
-
-There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an [internationalization mixin](https://github.com/yahoo/react-intl). It's great to see them getting excited about React and contributing back to the community.
-
-```javascript
-var MyComponent = React.createClass({
-  mixins: [ReactIntlMixin],
-  render: function () {
-    return (
-      <div>
-        <p>
-          {this.intlDate(1390518044403, {hour: 'numeric', minute: 'numeric'})}
-        </p>
-        <p>{this.intlNumber(400, {style: 'percent'})}</p>
-      </div>
-    );
-  },
-});
-
-React.renderComponent(
-  <MyComponent locales={['fr-FR']} />,
-  document.getElementById('example')
-);
-```
-
-## Thinking and Learning React {/*thinking-and-learning-react*/}
-
-Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.
-
-## London React Meetup {/*london-react-meetup*/}
-
-If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available, with lots of great content.
-
-- What's new in React 0.11 and how to improve performance by guaranteeing immutability
-- State handling in React with Morearty.JS
-- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
-- Building an isomorphic, real-time to-do list with moped and node.js
-
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
-
-In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
-
-## Using React and KendoUI Together {/*using-react-and-kendoui-together*/}
-
-One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
-
-<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/images/blog/kendoui.png" /></a></figure>
-
-## Acorn JSX {/*acorn-jsx*/}
-
-Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
-
-## ReactScriptLoader {/*reactscriptloader*/}
-
-Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
-
-```javascript
-var Foo = React.createClass({
-  mixins: [ReactScriptLoaderMixin],
-  getScriptURL: function () {
-    return 'http://d3js.org/d3.v3.min.js';
-  },
-  getInitialState: function () {
-    return {scriptLoading: true, scriptLoadError: false};
-  },
-  onScriptLoaded: function () {
-    this.setState({scriptLoading: false});
-  },
-  onScriptError: function () {
-    this.setState({scriptLoading: false, scriptLoadError: true});
-  },
-  render: function () {
-    var message = this.state.scriptLoading
-      ? 'Loading script...'
-      : this.state.scriptLoadError
-      ? 'Loading failed'
-      : 'Loading succeeded';
-    return <span>{message}</span>;
-  },
-});
-```
-
-## Random Tweet {/*random-tweet*/}
-
-<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>

beta/src/content/blog/2014/07/30/flux-actions-and-the-dispatcher.md

@@ -1,38 +0,0 @@
----
-title: 'Flux: Actions and the Dispatcher'
-author: [fisherwebdev]
----
-
-Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
-
-Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
-
-## Where the Dispatcher Fits in the Flux Data Flow {/*where-the-dispatcher-fits-in-the-flux-data-flow*/}
-
-The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each _store_ registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.
-
-## Actions and ActionCreators {/*actions-and-actioncreators*/}
-
-When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an _action_ — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.
-
-Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
-
-Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
-
-<img src="/images/blog/flux-diagram.png" style={{width: '100%'}} />
-
-## Why We Need a Dispatcher {/*why-we-need-a-dispatcher*/}
-
-As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.
-
-The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.
-
-Further, the waitFor() method may be used in different ways for different actions, within the same store's callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.
-
-Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.
-
-## Example Chat App {/*example-chat-app*/}
-
-Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
-
-We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!

beta/src/content/blog/2014/08/03/community-roundup-21.md

@@ -1,107 +0,0 @@
----
-title: 'Community Round-up #21'
-author: [LoukaN]
----
-
-## React Router {/*react-router*/}
-
-[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
-
-```javascript
-React.renderComponent(
-  <Routes>
-    <Route handler={App}>
-      <Route name="about" handler={About} />
-      <Route name="users" handler={Users}>
-        <Route name="user" path="/user/:userId" handler={User} />
-      </Route>
-    </Route>
-  </Routes>,
-  document.getElementById('example')
-);
-```
-
-## Going Big with React {/*going-big-with-react*/}
-
-Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test JavaScript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
-
-[![](/images/blog/skills-matter.png)](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
-
-## What is React? {/*what-is-react*/}
-
-[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
-
-- Is React a template library?
-- Is React similar to Web Components?
-- Are the Virtual DOM and Shadow DOM the same?
-- Can React be used with other JavaScript MVC frameworks?
-- Who uses React?
-- Is React a premature optimization if you aren’t Facebook or Instagram?
-- Can I work with designers?
-- Will React hurt my search engine optimizations (SEO)?
-- Is React a framework for building applications or a library with one feature?
-- Are components a better way to build an application?
-- Can I build something complex with React?
-
-## Referencing Dynamic Children {/*referencing-dynamic-children*/}
-
-While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
-
-```javascript
-var App = React.createClass({
-  render: function () {
-    var children = React.Children.map(this.props.children, function (
-      child,
-      index
-    ) {
-      return React.addons.cloneWithProps(child, {
-        ref: 'child-' + index,
-      });
-    });
-    return <div>{children}</div>;
-  },
-});
-```
-
-## JSX with Sweet.js using Readtables {/*jsx-with-sweetjs-using-readtables*/}
-
-Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
-
-[![](/images/blog/sweet-jsx.png)](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
-
-## First Look: Getting Started with React {/*first-look-getting-started-with-react*/}
-
-[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
-
-<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="/images/blog/first-look.png" /></a></figure>
-
-## React Draggable {/*react-draggable*/}
-
-[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
-
-[![](/images/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/)
-
-## HTML Parser2 React {/*html-parser2-react*/}
-
-[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
-This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
-
-```javascript
-var html =
-  '<div data-id="1" class="hey this is a class" ' +
-  'style="width:100%;height: 100%;"><article id="this-article">' +
-  '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
-  '<li>3</li></ul></div></article></div>';
-var parsedComponent = reactParser(html, React);
-```
-
-## Building UIs with React {/*building-uis-with-react*/}
-
-If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
-
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
-
-## Random Tweets {/*random-tweets*/}
-
-<blockquote class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
-<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>&mdash; spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>

beta/src/content/blog/2014/09/03/introducing-the-jsx-specification.md

@@ -1,14 +0,0 @@
----
-title: 'Introducing the JSX Specification'
-author: [sebmarkbage]
----
-
-At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.
-
-In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
-
-Read the spec now at https://facebook.github.io/jsx/.
-
-This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
-
-Feel free to [open an Issue](https://github.com/facebook/jsx/issues/new) or Pull Request if you find something wrong.

beta/src/content/blog/2014/09/12/community-round-up-22.md

@@ -1,104 +0,0 @@
----
-title: 'Community Round-up #22'
-author: [LoukaN]
----
-
-This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
-
-<table><tr><td>
-<blockquote width="300" class="twitter-tweet" data-cards="hidden" lang="en"><p>Our friends at <a href="https://twitter.com/Yahoo">@yahoo</a> talk about migrating Yahoo! Mail from YUI to ReactJS at the next <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup! <a href="http://t.co/Cu2AaE0sVE">http://t.co/Cu2AaE0sVE</a></p>&mdash; Facebook Open Source (@fbOpenSource) <a href="https://twitter.com/fbOpenSource/status/510258065900572672">September 12, 2014</a></blockquote>
-</td><td valign="top">
-<blockquote width="300" class="twitter-tweet" lang="en"><p>I guess <a href="https://twitter.com/reactjs">@reactjs</a> is getting into Firefox :-) Thanks <a href="https://twitter.com/n1k0">@n1k0</a> ! <a href="https://t.co/kipfUS0hu4">https://t.co/kipfUS0hu4</a></p>&mdash; David Bruant (@DavidBruant) <a href="https://twitter.com/DavidBruant/status/484956929933213696">July 4, 2014</a></blockquote>
-</td></tr><tr><td>
-<blockquote width="300" class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>&mdash; spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
-</td><td>
-<blockquote width="300" class="twitter-tweet" lang="en"><p>We shipped reddit&#39;s first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process.&#10;&#10;<a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>&mdash; Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
-</td></tr></table>
-
-## React's Architecture {/*reacts-architecture*/}
-
-[Vjeux](http://blog.vjeux.com/), from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the [annotated slides](https://speakerdeck.com/vjeux/oscon-react-architecture) or [Chris Dawson](http://thenewstack.io/author/chrisdawson/)'s notes titled [JavaScript’s History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
-
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
-
-## v8 optimizations {/*v8-optimizations*/}
-
-Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18) specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!
-
-## Reusable Components by Khan Academy {/*reusable-components-by-khan-academy*/}
-
-[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
-
-```javascript
-var TeX = require('react-components/js/tex.jsx');
-React.renderComponent(<TeX>\nabla \cdot E = 4 \pi \rho</TeX>, domNode);
-
-var translated = (
-  <$_ first="Motoko" last="Kusanagi">
-    Hello, %(first)s %(last)s!
-  </$_>
-);
-```
-
-## React + Browserify + Gulp {/*react--browserify--gulp*/}
-
-[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/).
-
-<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="/images/blog/react-browserify-gulp.jpg" /></a></figure>
-
-## React Style {/*react-style*/}
-
-After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: [IntegratedCSS](https://github.com/SanderSpies/react-style). It seems weird at first but this is the direction where React is heading.
-
-```javascript
-var Button = React.createClass({
-  normalStyle: ReactStyle(function () {
-    return {backgroundColor: vars.orange};
-  }),
-  activeStyle: ReactStyle(function () {
-    if (this.state.active) {
-      return {color: 'yellow', padding: '10px'};
-    }
-  }),
-  render: function () {
-    return (
-      <div styles={[this.normalStyle(), this.activeStyle()]}>
-        Hello, I'm styled
-      </div>
-    );
-  },
-});
-```
-
-## Virtual DOM in Elm {/*virtual-dom-in-elm*/}
-
-[Evan Czaplicki](http://evan.czaplicki.us) explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.
-
-> Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.
->
-> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm)
-
-## Components Tutorial {/*components-tutorial*/}
-
-If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
-
-<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
-
-## Saving time & staying sane? {/*saving-time--staying-sane*/}
-
-When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path](http://mpath.com/) summed up his experience using React in an [article](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js).
-
-> We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.
->
-> - **Big win**: Tighter coupling of markup and behavior
-> - **Jury's still out**: CSS lives outside React.js
-> - **Big win**: Cascading updates and functional thinking
-> - **Jury's still out**: Verbose propagation
->
-> [Read the article...](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js)
-
-## Weather {/*weather*/}
-
-To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes.
-
-<figure><a href="https://github.com/andrewgleave/react-weather"><img src="/images/blog/weather.png" /></a></figure>

beta/src/content/blog/2014/09/16/react-v0.11.2.md

@@ -1,46 +0,0 @@
----
-title: React v0.11.2
-author: [zpao]
----
-
-Today we're releasing React v0.11.2 to add a few small features.
-
-We're adding support for two more DOM elements, `<dialog>` and `<picture>`, as well as the associated attributes needed to use these elements: `open`, `media`, and `sizes`. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.
-
-We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing `React.createDescriptor` with `React.createElement`. `createDescriptor` will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.
-
-And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference.com/) yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the `jsx` transform. To use, simply use the `--strip-types` flag on the command line, or set `stripTypes` in the `options` object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.
-
-The release is available for download from the CDN:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.11.2.js  
-  Minified build for production: https://fb.me/react-0.11.2.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.11.2.js  
-  Minified build for production: https://fb.me/react-with-addons-0.11.2.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.11.2.js
-
-We've also published version `0.11.2` 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.
-
-### React Core {/*react-core*/}
-
-#### New Features {/*new-features*/}
-
-- Added support for `<dialog>` element and associated `open` attribute
-- Added support for `<picture>` element and associated `media` and `sizes` attributes
-- Added `React.createElement` API in preparation for React v0.12
-  - `React.createDescriptor` has been deprecated as a result
-
-### JSX {/*jsx*/}
-
-- `<picture>` is now parsed into `React.DOM.picture`
-
-### React Tools {/*react-tools*/}
-
-- Update `esprima` and `jstransform` for correctness fixes
-- The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations
-  - This option is also exposed to `require('react-tools').transform` as `stripTypes`

beta/src/content/blog/2014/09/24/testing-flux-applications.md

@@ -1,312 +0,0 @@
----
-title: 'Testing Flux Applications'
-author: [fisherwebdev]
----
-
-**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
-
-[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
-
-## Testing with Jest {/*testing-with-jest*/}
-
-For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).
-
-The first steps toward working with Jest are as follows:
-
-1. Get the module dependencies for the application installed by running `npm install`.
-2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js
-3. Run `npm install jest-cli --save-dev`
-4. Add the following to your package.json
-
-```javascript
-{
-  ...
-  "scripts": {
-    "test": "jest"
-  }
-  ...
-}
-```
-
-Now you're ready to run your tests from the command line with `npm test`.
-
-By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's `dontMock()` method.
-
-```javascript
-jest.dontMock('TodoStore');
-```
-
-This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.
-
-## Testing Stores {/*testing-stores*/}
-
-At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.
-
-By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.
-
-We therefore need to simulate the Flux data flow with this _one weird trick_.
-
-```javascript
-var mockRegister = MyDispatcher.register;
-var mockRegisterInfo = mockRegister.mock;
-var callsToRegister = mockRegisterInfo.calls;
-var firstCall = callsToRegister[0];
-var firstArgument = firstCall[0];
-var callback = firstArgument;
-```
-
-We now have the store's registered callback, the sole mechanism by which data can enter the store.
-
-For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the `register()` method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the `register()` method just as we would normally refer to that method in our production code. But we can get additional information about that method with the `mock` _property_ of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to `register()` is available with the `calls` property of `mock`, and each of these calls has a list of the arguments that were used in each method call.
-
-So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's `register()` method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:
-
-```javascript
-callback = MyDispatcher.register.mock.calls[0][0];
-```
-
-We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test.
-
-```javascript
-var payload = {
-  source: 'VIEW_ACTION',
-  action: {
-    actionType: TodoConstants.TODO_CREATE,
-    text: 'foo',
-  },
-};
-callback(payload);
-var all = TodoStore.getAll();
-var keys = Object.keys(all);
-expect(all[keys[0]].text).toEqual('foo');
-```
-
-## Putting it All Together {/*putting-it-all-together*/}
-
-The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.
-
-```javascript
-jest.dontMock('../TodoStore');
-jest.dontMock('react/lib/merge');
-
-describe('TodoStore', function () {
-  var TodoConstants = require('../../constants/TodoConstants');
-
-  // mock actions inside dispatch payloads
-  var actionTodoCreate = {
-    source: 'VIEW_ACTION',
-    action: {
-      actionType: TodoConstants.TODO_CREATE,
-      text: 'foo',
-    },
-  };
-  var actionTodoDestroy = {
-    source: 'VIEW_ACTION',
-    action: {
-      actionType: TodoConstants.TODO_DESTROY,
-      id: 'replace me in test',
-    },
-  };
-
-  var AppDispatcher;
-  var TodoStore;
-  var callback;
-
-  beforeEach(function () {
-    AppDispatcher = require('../../dispatcher/AppDispatcher');
-    TodoStore = require('../TodoStore');
-    callback = AppDispatcher.register.mock.calls[0][0];
-  });
-
-  it('registers a callback with the dispatcher', function () {
-    expect(AppDispatcher.register.mock.calls.length).toBe(1);
-  });
-
-  it('initializes with no to-do items', function () {
-    var all = TodoStore.getAll();
-    expect(all).toEqual({});
-  });
-
-  it('creates a to-do item', function () {
-    callback(actionTodoCreate);
-    var all = TodoStore.getAll();
-    var keys = Object.keys(all);
-    expect(keys.length).toBe(1);
-    expect(all[keys[0]].text).toEqual('foo');
-  });
-
-  it('destroys a to-do item', function () {
-    callback(actionTodoCreate);
-    var all = TodoStore.getAll();
-    var keys = Object.keys(all);
-    expect(keys.length).toBe(1);
-    actionTodoDestroy.action.id = keys[0];
-    callback(actionTodoDestroy);
-    expect(all[keys[0]]).toBeUndefined();
-  });
-});
-```
-
-You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
-
-## Mocking Data Derived from Other Stores {/*mocking-data-derived-from-other-stores*/}
-
-Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.
-
-```javascript
-var MyOtherStore = require('../MyOtherStore');
-MyOtherStore.getState.mockReturnValue({
-  '123': {
-    id: '123',
-    text: 'foo',
-  },
-  '456': {
-    id: '456',
-    text: 'bar',
-  },
-});
-```
-
-Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.
-
-A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
-
-For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
-
-## Moving Logic from React to Stores {/*moving-logic-from-react-to-stores*/}
-
-What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.
-
-For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's `render()` method:
-
-```javascript
-var allTodos = this.props.allTodos;
-var allChecked = true;
-for (var id in allTodos) {
-  if (!allTodos[id].complete) {
-    allChecked = false;
-    break;
-  }
-}
-...
-
-return (
-  <section id="main">
-  <input
-    id="toggle-all"
-    type="checkbox"
-    checked={allChecked ? 'checked' : ''}
-  />
-  ...
-  </section>
-);
-```
-
-While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic:
-
-```javascript
-areAllComplete: function() {
-  for (var id in _todos) {
-    if (!_todos[id].complete) {
-      return false;
-    }
-  }
-  return true;
-},
-```
-
-Now we have the application logic where it belongs, and we can write the following test:
-
-```javascript
-it('determines whether all to-do items are complete', function () {
-  var i = 0;
-  for (; i < 3; i++) {
-    callback(mockTodoCreate);
-  }
-  expect(TodoStore.areAllComplete()).toBe(false);
-
-  var all = TodoStore.getAll();
-  for (key in all) {
-    callback({
-      source: 'VIEW_ACTION',
-      action: {
-        actionType: TodoConstants.TODO_COMPLETE,
-        id: key,
-      },
-    });
-  }
-  expect(TodoStore.areAllComplete()).toBe(true);
-
-  callback({
-    source: 'VIEW_ACTION',
-    action: {
-      actionType: TodoConstants.TODO_UNDO_COMPLETE,
-      id: key,
-    },
-  });
-  expect(TodoStore.areAllComplete()).toBe(false);
-});
-```
-
-Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.
-
-```javascript
-function getTodoState() {
-  return {
-    allTodos: TodoStore.getAll(),
-    areAllComplete: TodoStore.areAllComplete()
-  };
-}
-
-var TodoApp = React.createClass({
-...
-
-  /**
-   * @return {object}
-   */
-  render: function() {
-    return (
-      ...
-      <MainSection
-        allTodos={this.state.allTodos}
-        areAllComplete={this.state.areAllComplete}
-      />
-      ...
-    );
-  },
-
-  /**
-   * Event handler for 'change' events coming from the TodoStore
-   */
-  _onChange: function() {
-    this.setState(getTodoState());
-  }
-
-});
-```
-
-And then we'll utilize that property for the rendering of the checkbox.
-
-```javascript
-render: function() {
-  ...
-
-  return (
-    <section id="main">
-    <input
-      id="toggle-all"
-      type="checkbox"
-      checked={this.props.areAllComplete ? 'checked' : ''}
-    />
-    ...
-    </section>
-  );
-},
-```
-
-To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html).
-
-## Further Reading {/*further-reading*/}
-
-- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
-- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)

beta/src/content/blog/2014/10/14/introducing-react-elements.md

@@ -1,217 +0,0 @@
----
-title: 'Introducing React Elements'
-author: [sebmarkbage]
-redirect_from:
-  - 'blog/2014/10/14/introducting-react-elements.html'
----
-
-The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
-
-If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
-
-If you can't or don't want to use JSX, then please insert some hints for us. Add a `React.createFactory` call around your imported class when you require it:
-
-```javascript
-var MyComponent = React.createFactory(require('MyComponent'));
-```
-
-Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.
-
-`ReactElement` is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.
-
-Continue reading if you want all the nitty gritty details...
-
-## New Terminology {/*new-terminology*/}
-
-We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term `ReactElement` instead of _descriptor_. Likewise, we use the term `ReactNode` instead of _renderable_.
-
-[See the full React terminology guide.](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589)
-
-## Creating a ReactElement {/*creating-a-reactelement*/}
-
-We now expose an external API for programmatically creating a `ReactElement` object.
-
-```javascript
-var reactElement = React.createElement(type, props, children);
-```
-
-The `type` argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:
-
-```javascript
-var div = React.createFactory('div');
-var reactDivElement = div(props, children);
-```
-
-## Deprecated: Auto-generated Factories {/*deprecated-auto-generated-factories*/}
-
-Imagine if `React.createClass` was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a `ReactElement`:
-
-```javascript
-new MyComponent(); // Component, not ReactElement
-```
-
-React 0.11 gave you a factory function for free when you called `React.createClass`. This wrapped your internal class and then returned a `ReactElement` factory function for you.
-
-```javascript
-var MyComponent = React.createFactory(
-  class {
-    render() {
-      ...
-    }
-  }
-);
-```
-
-In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're [deprecating the auto-generated factory](https://gist.github.com/sebmarkbage/d7bce729f38730399d28).
-
-This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.
-
-## Upgrading to 0.12 {/*upgrading-to-012*/}
-
-### React With JSX {/*react-with-jsx*/}
-
-If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
-
-```javascript
-// If you use node/browserify modules make sure
-// that you require React into scope.
-var React = require('react');
-```
-
-React's JSX will create the `ReactElement` for you. You can continue to use JSX with regular classes:
-
-```javascript
-var MyComponent = React.createClass(...);
-
-var MyOtherComponent = React.createClass({
-  render: function() {
-    return <MyComponent prop="value" />;
-  }
-});
-```
-
-_NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes._
-
-### React Without JSX {/*react-without-jsx*/}
-
-If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:
-
-```javascript
-var MyComponentClass = React.createClass(...);
-
-var MyComponent = React.createFactory(MyComponentClass); // New step
-
-var MyOtherComponent = React.createClass({
-  render: function() {
-    return MyComponent({ prop: 'value' });
-  }
-});
-```
-
-If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side.
-
-Your class creation is done just like before:
-
-```javascript
-// MyComponent.js
-var React = require('react');
-var MyComponent = React.createClass(...);
-module.exports = MyComponent;
-```
-
-The other side uses `React.createFactory` after `require`ing the component class:
-
-```javascript
-// MyOtherComponent.js
-var React = require('react');
-// All you have to do to upgrade is wrap your requires like this:
-var MyComponent = React.createFactory(require('MyComponent'));
-
-var MyOtherComponent = React.createClass({
-  render: function () {
-    return MyComponent({prop: 'value'});
-  },
-});
-
-module.exports = MyOtherComponent;
-```
-
-You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.
-
-```javascript
-var MyDOMComponent = React.createClass({
-  render: function () {
-    return React.DOM.div({className: 'foo'}); // still ok
-  },
-});
-```
-
-We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get [the other benefits](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) that this model unlocks.
-
-### Anti-Pattern: Exporting Factories {/*anti-pattern-exporting-factories*/}
-
-If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:
-
-```javascript
-// Anti-pattern - Please, don't use
-function createClass(spec) {
-  return React.createFactory(React.createClass(spec));
-}
-```
-
-This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized `ReactElement` creation, etc.
-
-It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about.
-
-To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating `ReactElement`s.
-
-## Third-party Languages {/*third-party-languages*/}
-
-The signature of a `ReactElement` is something like this:
-
-```javascript
-{
-  type : string | class,
-  props : { children, className, etc. },
-  key : string | boolean | number | null,
-  ref : string | null
-}
-```
-
-Languages with static typing that don't need validation (e.g. [Om in ClojureScript](https://github.com/swannodette/om)), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.
-
-## Your Thoughts and Ideas {/*your-thoughts-and-ideas*/}
-
-We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:
-
-```javascript
-// MyOtherComponent.js
-var React = require('react');
-var MyComponent = require('MyComponent');
-
-var MyOtherComponent = React.createClass({
-  render: function () {
-    return {type: MyComponent, props: {prop: 'value'}};
-  },
-});
-
-module.exports = MyOtherComponent;
-```
-
-This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe.
-
-_NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a `element._isReactElement = true` marker on the object.)_
-
-## The Next Step: ES6 Classes {/*the-next-step-es6-classes*/}
-
-After 0.12 we'll begin work on moving to ES6 classes. We will still support `React.createClass` as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:
-
-```javascript
-export class MyComponent {
-  render() {
-    ...
-  }
-};
-```
-
-This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.

beta/src/content/blog/2014/10/16/react-v0.12-rc1.md

@@ -1,137 +0,0 @@
----
-title: 'React v0.12 RC'
-author: [sebmarkbage]
----
-
-We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.
-
-The release candidate is available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.12.0-rc1.js  
-  Minified build for production: https://fb.me/react-0.12.0-rc1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.12.0-rc1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.12.0-rc1.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.12.0-rc1.js
-
-We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-## React Elements {/*react-elements*/}
-
-The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducing-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
-
-## JSX Changes {/*jsx-changes*/}
-
-Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
-
-### The `@jsx` Pragma is Gone! {/*the-jsx-pragma-is-gone*/}
-
-We have wanted to do this since before we even open sourced React. No more `/** @jsx React.DOM */`!. The React specific JSX transform assumes you have `React` in scope (which had to be true before anyway).
-
-`JSXTransformer` and `react-tools` have both been updated to account for this.
-
-### JSX for Function Calls is No Longer Supported {/*jsx-for-function-calls-is-no-longer-supported*/}
-
-The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/blog/2014/10/14/introducting-react-elements.html).
-
-The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
-
-### JSX Lower-case Convention {/*jsx-lower-case-convention*/}
-
-We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:
-
-```javascript
-return <component />;
-```
-
-Is `component` an existing HTML tag? What if it becomes one?
-
-To address this, we decided on a convention: **All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.**
-
-This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.
-
-Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.
-
-In addition, the HTML tags are converted to strings instead of using `React.DOM` directly. `<div/>` becomes `React.createElement('div')` instead of `React.DOM.div()`.
-
-### JSX Spread Attributes {/*jsx-spread-attributes*/}
-
-Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread `...` operator.
-
-```javascript
-var myProps = {a: 1, b: 2};
-return <MyComponent {...myProps} />;
-```
-
-This merges the properties of the object onto the props of `MyComponent`.
-
-[Read More About Spread Attributes](https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81)
-
-If you used to use plain function calls to pass arbitrary props objects...
-
-```javascript
-return MyComponent(myProps);
-```
-
-You can now switch to using Spread Attributes instead:
-
-```javascript
-return <MyComponent {...myProps} />;
-```
-
-## Breaking Change: `key` and `ref` Removed From `this.props` {/*breaking-change-key-and-ref-removed-from-thisprops*/}
-
-The props `key` and `ref` were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.
-
-These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props.
-
-We made this distinction clearer by moving them off the props object and onto the `ReactElement` itself. This means that you need to rename:
-
-`someElement.props.key` -> `someElement.key`
-
-You can no longer access `this.props.ref` and `this.props.key` from inside the Component instance itself. So you need to use a different name for those props.
-
-You do NOT need to change the way to define `key` and `ref`, only if you need to read it. E.g. `<div key="my-key" />` and `div({ key: 'my-key' })` still works.
-
-## Breaking Change: Default Props Resolution {/*breaking-change-default-props-resolution*/}
-
-This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.
-
-You will primarily see this breaking if you're also using `transferPropsTo`.
-
-## Deprecated: transferPropsTo {/*deprecated-transferpropsto*/}
-
-`transferPropsTo` is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.
-
-Our suggested solution is to use the Spread Attributes.
-
-```javascript
-return <div {...this.props} />;
-```
-
-Or, just if you're not using JSX:
-
-```javascript
-return div(this.props);
-```
-
-Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. [Read more about upgrading from transferPropsTo](https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7).
-
-## Deprecated: Returning `false` in Event Handlers {/*deprecated-returning-false-in-event-handlers*/}
-
-It used to be possible to return `false` from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use `event.preventDefault()` instead.
-
-## Renamed APIs {/*renamed-apis*/}
-
-As part of the [new React terminology](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) we aliased some existing APIs to use the new naming convention:
-
-- `React.renderComponent` -> `React.render`
-- `React.renderComponentToString` -> `React.renderToString`
-- `React.renderComponentToStaticMarkup` -> `React.renderToStaticMarkup`
-- `React.isValidComponent` -> `React.isValidElement`
-- `React.PropTypes.component` -> `React.PropTypes.element`
-- `React.PropTypes.renderable` -> `React.PropTypes.node`
-
-The older APIs will log a warning but work the same. They will be removed in v0.13.

beta/src/content/blog/2014/10/17/community-roundup-23.md

@@ -1,137 +0,0 @@
----
-title: 'Community Round-up #23'
-author: [LoukaN]
----
-
-This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
-
-## React And Flux at ForwardJS {/*react-and-flux-at-forwardjs*/}
-
-Facebook engineers [Jing Chen](https://github.com/jingc) and [Bill Fisher](https://github.com/fisherwebdev) gave a talk about Flux and React at [ForwardJS](http://forwardjs.com/), and how using an application architecture with a unidirectional data flow helped solve recurring bugs.
-
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
-
-# Yahoo {/*yahoo*/}
-
-Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.
-
-- [Flux Router Component](https://github.com/yahoo/flux-router-component)
-- [Dispatchr](https://github.com/yahoo/dispatchr)
-- [Fetchr](https://github.com/yahoo/fetchr)
-- [Flux Examples](https://github.com/yahoo/flux-examples)
-
-## Reflux {/*reflux*/}
-
-[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
-
-<center>
-<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/images/blog/reflux-flux.png" width="400" /></a>
-</center>
-
-## React and Flux Interview {/*react-and-flux-interview*/}
-
-[Ian Obermiller](http://ianobermiller.com/), engineer at Facebook, [made a lengthy interview](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) on the experience of using React and Flux in order to build probably the biggest React application ever written so far.
-
-> I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.
->
-> Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.
->
-> [Read the full interview...](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/)
-
-## Adobe's Brackets Project Tree {/*adobes-brackets-project-tree*/}
-
-[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/).
-
-<center>
-<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="/images/blog/flux-diagram.png" width="400" /></a>
-</center>
-
-## Async Requests with Flux Revisited {/*async-requests-with-flux-revisited*/}
-
-[Reto Schläpfer](http://www.code-experience.com/the-code-experience/) came back to a Flux project he hasn't worked on for a month and [saw many ways to improve the way he implemented Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/). He summarized his learnings in a blog post.
-
-> The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.
->
-> Before I show some updated code snippets, let me explain why this is superior:
->
-> - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.
->
-> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
->
-> - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.
->
-> [Read the full article...](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/)
-
-## Undo-Redo with Immutable Data Structures {/*undo-redo-with-immutable-data-structures*/}
-
-[Ameya Karve](https://github.com/ameyakarve) explained how to use [Mori](https://github.com/swannodette/mori), a library that provides immutable data structures, in order to [implement undo-redo](http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html). This usually very challenging feature only takes a few lines of code with Flux!
-
-```javascript
-undo: function() {
-  this.redoStates = Mori.conj(this.redoStates, Mori.first(this.undoStates));
-  this.undoStates = Mori.drop(1, this.undoStates);
-  this.todosState = Mori.first(this.undoStates);
-  this.canUndo = Mori.count(this.undoStates) > 1;
-  this.canRedo = true;
-  if (Mori.count(this.undoStates) > 1) {
-    this.todos = JSON.parse(this.todosState);
-  } else {
-    this.todos = [];
-  }
-  this.emit('change');
-},
-```
-
-## Flux in practice {/*flux-in-practice*/}
-
-[Gary Chambers](https://twitter.com/garychambers108) wrote a [guide to get started with Flux](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a). This is a very practical introduction to Flux.
-
-> So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.
->
-> [Read the full guide...](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a)
-
-## Components, React and Flux {/*components-react-and-flux*/}
-
-[Dan Abramov](https://twitter.com/dan_abramov) working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.
-
-<iframe src="//slides.com/danabramov/components-react-flux-wip/embed"  width="100%" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
-## React and Flux {/*react-and-flux*/}
-
-[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
-
-> Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
->
-> Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
->
-> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
-
-## Flux: Step by Step approach {/*flux-step-by-step-approach*/}
-
-[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
-
-<center>
-<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/images/blog/flux-chart.png" width="400" /></a>
-</center>
-
-## DeLorean: Back to the future! {/*delorean-back-to-the-future*/}
-
-[DeLorean](https://github.com/deloreanjs/delorean) is a tiny Flux pattern implementation developed by [Fatih Kadir Akin](https://github.com/f).
-
-> - Unidirectional data flow, it makes your app logic simpler than MVC
-> - Automatically listens to data changes and keeps your data updated
-> - Makes data more consistent across your whole application
-> - It's framework agnostic, completely. There's no view framework dependency
-> - Very small, just 4K gzipped
-> - Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others
-> - Improve your UI/data consistency using rollbacks
-
-## Facebook's iOS Infrastructure {/*facebooks-ios-infrastructure*/}
-
-Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.
-
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
-
-## Random Tweet {/*random-tweet*/}
-
-<blockquote class="twitter-tweet" lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>

beta/src/content/blog/2014/10/27/react-js-conf.md

@@ -1,14 +0,0 @@
----
-title: React.js Conf
-author: [vjeux]
----
-
-Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.
-
-**We're happy to announce [React.js Conf](http://conf.reactjs.com/)! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.**
-
-Before we open registration, [we're looking for great talks](http://conf.reactjs.com/call-for-presenters.html). We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!
-
-Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...
-
-We look forward to seeing many of you in person in just a few short months!

beta/src/content/blog/2014/10/28/react-v0.12.md

@@ -1,126 +0,0 @@
----
-title: React v0.12
-author: [zpao]
----
-
-We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
-
-We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
-
-The release is available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.12.0.js  
-  Minified build for production: https://fb.me/react-0.12.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.12.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.12.0.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.12.0.js
-
-We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
-## New Terminology & Updated APIs {/*new-terminology--updated-apis*/}
-
-v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
-
-We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`.
-
-The old methods will still work but will warn upon first use. They will be removed in v0.13.
-
-## JSX Changes {/*jsx-changes*/}
-
-[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
-
-- No more `/** @jsx React.DOM */`!
-- We no longer transform to a straight function call. `<Component/>` now becomes `React.createElement(Component)`
-- DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
-- We introduced spread attributes as a quick way to transfer props.
-
-## DevTools Improvements, No More `__internals` {/*devtools-improvements-no-more-__internals*/}
-
-For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
-
-As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more.
-
-## License Change - BSD {/*license-change---bsd*/}
-
-We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
-
-You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
-
----
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*breaking-changes*/}
-
-- `key` and `ref` moved off props object, now accessible on the element directly
-- React is now BSD licensed with accompanying Patents grant
-- Default prop resolution has moved to Element creation time instead of mount time, making them effectively static
-- `React.__internals` is removed - it was exposed for DevTools which no longer needs access
-- Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
-
-#### New Features {/*new-features*/}
-
-- Spread syntax (`{...}`) introduced to deprecate `this.transferPropsTo`
-- Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
-
-#### Deprecations {/*deprecations*/}
-
-- `React.renderComponent` --> `React.render`
-- `React.renderComponentToString` --> `React.renderToString`
-- `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup`
-- `React.isValidComponent` --> `React.isValidElement`
-- `React.PropTypes.component` --> `React.PropTypes.element`
-- `React.PropTypes.renderable` --> `React.PropTypes.node`
-- **DEPRECATED** `React.isValidClass`
-- **DEPRECATED** `instance.transferPropsTo`
-- **DEPRECATED** Returning `false` from event handlers to preventDefault
-- **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
-- **DEPRECATED** use of `key={null}` to assign implicit keys
-
-#### Bug Fixes {/*bug-fixes*/}
-
-- Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
-- Correctly treat `event.getModifierState` as case sensitive
-- Improved normalization of `event.charCode`
-- Better error stacks when involving autobound methods
-- Removed DevTools message when the DevTools are installed
-- Correctly detect required language features across browsers
-- Fixed support for some HTML attributes:
-  - `list` updates correctly now
-  - `scrollLeft`, `scrollTop` removed, these should not be specified as props
-- Improved error messages
-
-### React With Addons {/*react-with-addons*/}
-
-#### New Features {/*new-features-1*/}
-
-- `React.addons.batchedUpdates` added to API for hooking into update cycle
-
-#### Breaking Changes {/*breaking-changes-1*/}
-
-- `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
-
-#### Bug Fixes {/*bug-fixes-1*/}
-
-- Fixed some issues with CSS Transitions
-
-### JSX {/*jsx*/}
-
-#### Breaking Changes {/*breaking-changes-2*/}
-
-- Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
-- JSX no longer transforms to simple function calls
-
-#### New Features {/*new-features-2*/}
-
-- `@jsx React.DOM` no longer required
-- spread (`{...}`) operator introduced to allow easier use of props
-
-#### Bug Fixes {/*bug-fixes-2*/}
-
-- JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)

beta/src/content/blog/2014/11/24/react-js-conf-updates.md

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

beta/src/content/blog/2014/11/25/community-roundup-24.md

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

beta/src/content/blog/2014/12/18/react-v0.12.2.md

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

beta/src/content/blog/2014/12/19/react-js-conf-diversity-scholarship.md

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

beta/src/content/blog/2015/01/27/react-v0.13.0-beta-1.md

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

beta/src/content/blog/2015/02/18/react-conf-roundup-2015.md

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

beta/src/content/blog/2015/02/20/introducing-relay-and-graphql.md

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

beta/src/content/blog/2015/02/24/react-v0.13-rc1.md

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

beta/src/content/blog/2015/02/24/streamlining-react-elements.md

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

beta/src/content/blog/2015/03/03/react-v0.13-rc2.md

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

beta/src/content/blog/2015/03/04/community-roundup-25.md

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

beta/src/content/blog/2015/03/10/react-v0.13.md

@@ -1,88 +0,0 @@
----
-title: 'React v0.13'
-author: [sophiebits]
----
-
-Today, we're happy to release React v0.13!
-
-The most notable new feature is [support for ES6 classes](/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`.
-
-At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to **make React even faster**.
-
-Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new `React.cloneElement` API (which is similar to `React.addons.cloneWithProps` but preserves `key` and `ref` and does not merge `style` or `className` automatically). For more information about our planned optimizations, see GitHub issues
-[#3226](https://github.com/facebook/react/issues/3226),
-[#3227](https://github.com/facebook/react/issues/3227),
-[#3228](https://github.com/facebook/react/issues/3228).
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.13.0.js  
-  Minified build for production: https://fb.me/react-0.13.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.13.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.13.0.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.13.0.js
-
-We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Breaking Changes {/*breaking-changes*/}
-
-- Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
-- Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
-- Static methods (defined in `statics`) are no longer autobound to the component class
-- `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
-- Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
-- `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
-- Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
-
-#### New Features {/*new-features*/}
-
-- Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
-- Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
-- Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
-- New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
-- `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
-- Support for iterators and immutable-js sequences as children.
-
-#### Deprecations {/*deprecations*/}
-
-- `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
-- Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
-
-### React with Add-Ons {/*react-with-add-ons*/}
-
-#### New Features {/*new-features-1*/}
-
-- [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
-
-#### Deprecations {/*deprecations-1*/}
-
-- `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
-- Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired.
-
-### React Tools {/*react-tools*/}
-
-#### Breaking Changes {/*breaking-changes-1*/}
-
-- When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
-
-#### New Features {/*new-features-2*/}
-
-- `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
-  - `es5` is the default.
-  - `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
-- The transform for the call spread syntax has also been enabled.
-
-### JSX {/*jsx*/}
-
-#### Breaking Changes {/*breaking-changes-2*/}
-
-- A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.

beta/src/content/blog/2015/03/16/react-v0.13.1.md

@@ -1,46 +0,0 @@
----
-title: 'React v0.13.1'
-author: [zpao]
----
-
-It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.
-
-Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.13.1.js  
-  Minified build for production: https://fb.me/react-0.13.1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.13.1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.13.1.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.13.1.js
-
-We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### Bug Fixes {/*bug-fixes*/}
-
-- Don't throw when rendering empty `<select>` elements
-- Ensure updating `style` works when transitioning from `null`
-
-### React with Add-Ons {/*react-with-add-ons*/}
-
-#### Bug Fixes {/*bug-fixes-1*/}
-
-- TestUtils: Don't warn about `getDOMNode` for ES6 classes
-- TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
-- Perf: Stop double-counting DOM components
-
-### React Tools {/*react-tools*/}
-
-#### Bug Fixes {/*bug-fixes-2*/}
-
-- Fix option parsing for `--non-strict-es6module`

beta/src/content/blog/2015/03/19/building-the-facebook-news-feed-with-relay.md

@@ -1,222 +0,0 @@
----
-title: 'Building The Facebook News Feed With Relay'
-author: [josephsavona]
----
-
-At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
-
-We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
-
-<br/>
-
-## The Relay Architecture {/*the-relay-architecture*/}
-
-The diagram below shows the main parts of the Relay architecture on the client and the server:
-
-<img src="/images/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
-
-The main pieces are as follows:
-
-- Relay Components: React components annotated with declarative data descriptions.
-- Actions: Descriptions of how data should change in response to user actions.
-- Relay Store: A client-side data store that is fully managed by the framework.
-- Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
-
-This post will focus on **Relay components** that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.
-
-<br/>
-
-## A Relay Application {/*a-relay-application*/}
-
-To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
-
-<img src="/images/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
-
-<br/>
-
-## The `<Story>` Begins {/*the-story-begins*/}
-
-The first step is a React `<Story>` component that accepts a `story` prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.
-
-```javascript
-// Story.react.js
-export default class Story extends React.Component {
-  render() {
-    var story = this.props.story;
-    return (
-      <View>
-        <Image uri={story.author.profilePicture.uri} />
-        <Text>{story.author.name}</Text>
-        <Text>{story.text}</Text>
-      </View>
-    );
-  }
-}
-```
-
-<br/>
-
-## What's the `<Story>`? {/*whats-the-story*/}
-
-Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
-
-```javascript
-// Story.react.js
-class Story extends React.Component { ... }
-
-export default Relay.createContainer(Story, {
-  fragments: {
-    story: /* TODO */
-  }
-});
-```
-
-Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
-
-<img src="/images/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
-
-Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
-
-```javascript
-// Story.react.js
-class Story extends React.Component { ... }
-
-export default Relay.createContainer(Story, {
-  fragments: {
-    story: () => Relay.QL`
-      fragment on Story {
-        author {
-          name
-          profilePicture {
-            uri
-          }
-        }
-        text
-      }
-    `,
-  },
-});
-```
-
-Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
-
-<br/>
-
-## `<Story>`s on Demand {/*storys-on-demand*/}
-
-We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
-
-```javascript
-{
-  author: {
-    name: "Greg",
-    profilePicture: {
-      uri: "https://…"
-    }
-  },
-  text: "The first Relay blog post is up…"
-}
-```
-
-Relay guarantees that all data required to render a component will be available before it is rendered. This means that `<Story>` does not need to handle a loading state; the `story` is _guaranteed_ to be available before `render()` is called. We have found that this invariant simplifies our application code _and_ improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.
-
-The diagram below shows how Relay containers make data available to our React components:
-
-<img src="/images/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
-
-<br/>
-
-## `<NewsFeed>` Worthy {/*newsfeed-worthy*/}
-
-Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
-
-```javascript
-// NewsFeed.react.js
-class NewsFeed extends React.Component {
-  render() {
-    var stories = this.props.viewer.stories; // `viewer` is the active user
-    return (
-      <View>
-        {stories.map((story) => (
-          <Story story={story} />
-        ))}
-        <Button onClick={() => this.loadMore()}>Load More</Button>
-      </View>
-    );
-  }
-
-  loadMore() {
-    // TODO: fetch more stories
-  }
-}
-
-module.exports = NewsFeed;
-```
-
-<br/>
-
-## All the News Fit to be Relayed {/*all-the-news-fit-to-be-relayed*/}
-
-`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
-
-Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
-
-```javascript
-// NewsFeed.react.js
-class NewsFeed extends React.Component { ... }
-
-export default Relay.createContainer(NewsFeed, {
-  initialVariables: {
-    count: 3                                /* default to 3 stories */
-  },
-  fragments: {
-    viewer: () => Relay.QL`
-      fragment on Viewer {
-        stories(first: $count) {            /* fetch viewer's stories */
-          edges {                           /* traverse the graph */
-            node {
-              ${Story.getFragment('story')} /* compose child fragment */
-            }
-          }
-        }
-      }
-    `,
-  },
-});
-```
-
-Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
-
-Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
-
-```javascript
-// NewsFeed.react.js
-class NewsFeed extends React.Component {
-  render() { ... }
-
-  loadMore() {
-    // read current params
-    var count = this.props.relay.variables.count;
-    // update params
-    this.props.relay.setVariables({
-      count: count + 5,
-    });
-  }
-}
-```
-
-Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
-
-<br/>
-
-## In Conclusion {/*in-conclusion*/}
-
-These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:
-
-- Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
-- Trivial pagination with automatic optimizations to fetch only the additional items.
-- View composition and reusability, so that `<Story>` can be used on its own or within `<NewsFeed>`, without any changes to either component.
-- Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
-- Exactly _zero_ lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
-
-But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.

beta/src/content/blog/2015/03/26/introducing-react-native.md

@@ -1,16 +0,0 @@
----
-title: 'Introducing React Native'
-author: [sophiebits]
----
-
-In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
-
-For more details, see [Tom Occhino's post on the Facebook Engineering blog](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/):
-
-> _What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web._
->
-> _With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components._
->
-> _It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”_
-
-To learn more, visit the [React Native website](https://reactnative.dev/).

beta/src/content/blog/2015/03/30/community-roundup-26.md

@@ -1,72 +0,0 @@
----
-title: 'Community Round-up #26'
-author: [vjeux]
----
-
-We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
-
-<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
-
-## When is React Native Android coming? {/*when-is-react-native-android-coming*/}
-
-**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
-
-<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
-
-## Ray Wenderlich - Property Finder {/*ray-wenderlich---property-finder*/}
-
-If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
-
-[![](/images/blog/property-finder.png)](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
-
-Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
-
-## The Changelog {/*the-changelog*/}
-
-Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
-
-<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style={{ width: '100%' }}></audio>
-
-## Hacker News {/*hacker-news*/}
-
-Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
-
-[![](/images/blog/hacker-news-react-native.png)](https://github.com/iSimar/HackerNews-React-Native)
-
-## Parse + React {/*parse--react*/}
-
-There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
-
-[![](/images/blog/parse-react.jpg)](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
-
-## tcomb-form-native {/*tcomb-form-native*/}
-
-Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
-
-[![](/images/blog/tcomb-react-native.png)](https://github.com/gcanti/tcomb-form-native)
-
-## Facebook Login with React Native {/*facebook-login-with-react-native*/}
-
-One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains [how to use Facebook Login with React Native](http://brentvatne.ca/facebook-login-with-react-native/).
-
-## Modus Create {/*modus-create*/}
-
-Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
-
-[![](/images/blog/modus-create.gif)](http://moduscreate.com/react-native-has-landed/)
-
-## React Native with Babel and webpack {/*react-native-with-babel-and-webpack*/}
-
-React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
-
-Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
-
-## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript {/*a-dynamic-crazy-native-mobile-futurepowered-by-javascript*/}
-
-Clay Allsopp wrote a post about [all the crazy things you could do with a JavaScript engine that renders native views](https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987). What about native embeds, seamless native browser, native search engine or even app generation...
-
-## Random Tweet {/*random-tweet*/}
-
-We've spent a lot of efforts getting the onboarding as easy as possible and we're really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!
-
-<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience I’ve ever had with a new developer product.</p>&mdash; Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>

beta/src/content/blog/2015/04/17/react-native-v0.4.md

@@ -1,24 +0,0 @@
----
-title: 'React Native v0.4'
-author: [vjeux]
----
-
-It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
-
-I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests
-
-## Changelog {/*changelog*/}
-
-The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:
-
-- **Error messages and documentation**: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
-- **NPM modules compatibility**: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
-- **Infrastructure**: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
-- **Components**: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
-- **Tests**: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
-- **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).
-- **Per commit history**: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
-
-## Where are we going? {/*where-are-we-going*/}
-
-In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.

beta/src/content/blog/2015/04/18/react-v0.13.2.md

@@ -1,50 +0,0 @@
----
-title: 'React v0.13.2'
-author: [zpao]
----
-
-Yesterday the [React Native team shipped v0.4](/blog/2015/04/17/react-native-v0.4.html). Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.13.2.js  
-  Minified build for production: https://fb.me/react-0.13.2.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.13.2.js  
-  Minified build for production: https://fb.me/react-with-addons-0.13.2.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.13.2.js
-
-We've also published version `0.13.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### New Features {/*new-features*/}
-
-- Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
-- Added support for more DOM properties:
-  - `scoped` - for `<style>` elements
-  - `high`, `low`, `optimum` - for `<meter>` elements
-  - `unselectable` - IE-specific property to prevent user selection
-
-#### Bug Fixes {/*bug-fixes*/}
-
-- Fixed a case where re-rendering after rendering null didn't properly pass context
-- Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
-- Update `uglify` dependency to prevent a bug in IE8
-- Improved warnings
-
-### React with Add-Ons {/*react-with-add-ons*/}
-
-#### Bug Fixes {/*bug-fixes-1*/}
-
-- Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
-
-### React Tools {/*react-tools*/}
-
-- Improve documentation for new options

beta/src/content/blog/2015/05/01/graphql-introduction.md

@@ -1,101 +0,0 @@
----
-title: 'GraphQL Introduction'
-author: [schrockn]
----
-
-At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](/blog/2015/02/20/introducing-relay-and-graphql.html).
-
-Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a _declarative_ data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.
-
-GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.
-
-We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.
-
-## What is GraphQL? {/*what-is-graphql*/}
-
-A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:
-
-```js
-{
-  user(id: 3500401) {
-    id,
-    name,
-    isViewerFriend,
-    profilePicture(size: 50)  {
-      uri,
-      width,
-      height
-    }
-  }
-}
-```
-
-(Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)
-
-And here is the response to that query.
-
-```json
-{
-  "user": {
-    "id": 3500401,
-    "name": "Jing Chen",
-    "isViewerFriend": true,
-    "profilePicture": {
-      "uri": "http://someurl.cdn/pic.jpg",
-      "width": 50,
-      "height": 50
-    }
-  }
-}
-```
-
-We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:
-
-- **Hierarchical:** Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
-- **Product-centric:** GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
-- **Client-specified queries:** In GraphQL, the specification for queries are encoded in the _client_ rather than the _server_. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
-- **Backwards Compatible:** In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for _at least_ two years. This means there are at a _minimum_ 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
-- **Structured, Arbitrary Code:** Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by _arbitrary code_. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
-- **Application-Layer Protocol:** GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
-- **Strongly-typed:** GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
-- **Introspective:** GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
-
-## Why invent something new? {/*why-invent-something-new*/}
-
-Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and _ad hoc_ endpoints.
-
-### REST {/*rest*/}
-
-REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that _self-identify_ as REST, rather than systems which are formally REST.
-
-Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.
-
-We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:
-
-- Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
-- Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
-- REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
-- Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
-
-Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all _internal_ REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
-
-Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building _ad hoc_ endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to _ad hoc_ endpoints.
-
-### Ad Hoc Endpoints {/*ad-hoc-endpoints*/}
-
-Many applications have no formalized client-server contract. Product developers access server capabilities through _ad hoc_ endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
-
-- These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
-- Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
-- Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
-- Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of _ad hoc_ endpoints remain.
-
-We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.
-
-This is a liberating platform for product developers. With GraphQL, no more contending with _ad hoc_ endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from _ad hoc_ endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.
-
-Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.
-
-## What's next? {/*whats-next*/}
-
-Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.

beta/src/content/blog/2015/05/08/react-v0.13.3.md

@@ -1,42 +0,0 @@
----
-title: 'React v0.13.3'
-author: [zpao]
----
-
-Today we're sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: `context`. We also improved developer ergonomics just a little bit, making some warnings better.
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.13.3.js  
-  Minified build for production: https://fb.me/react-0.13.3.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.13.3.js  
-  Minified build for production: https://fb.me/react-with-addons-0.13.3.min.js
-- **In-Browser JSX transformer**  
-  https://fb.me/JSXTransformer-0.13.3.js
-
-We've also published version `0.13.3` of the `react` and `react-tools` packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React Core {/*react-core*/}
-
-#### New Features {/*new-features*/}
-
-- Added `clipPath` element and attribute for SVG
-- Improved warnings for deprecated methods in plain JS classes
-
-#### Bug Fixes {/*bug-fixes*/}
-
-- Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
-- Fixed extraneous context warning with non-pure `getChildContext`
-- Ensure `replaceState(obj)` retains prototype of `obj`
-
-### React with Add-ons {/*react-with-add-ons*/}
-
-### Bug Fixes {/*bug-fixes-1*/}
-
-- Test Utils: Ensure that shallow rendering works when components define `contextTypes`

beta/src/content/blog/2015/05/22/react-native-release-process.md

@@ -1,22 +0,0 @@
----
-title: 'React Native Release Process'
-author: [vjeux]
----
-
-The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to _move fast with stable infra_, we are introducing a real release process with a two-week release schedule.
-
-To explain how it works, let me walk you through an example. Today, Friday, we took the current state of master and put it on the 0.5-stable branch. We [published 0.5.0-rc](https://github.com/facebook/react-native/releases/tag/v0.5.0-rc), an RC (Release Candidate) when we cut the branch. For two weeks, we're going to let it stabilize and only cherry-pick critical bug fixes from master.
-
-Friday in two weeks, we're going to publish the 0.5.0 release, create the 0.6-stable branch and publish 0.6.0-rc as well.
-
-The release process is synchronized with Facebook's mobile release process. This means that everything in the open source release is also being shipped as part of all the Facebook apps that use React Native!
-
-You now have three ways to get React Native. You should chose the one you want based on the amount of risk you tolerate:
-
-- **master**: You have updates as soon as they are committed. This is if you want to live on the bleeding edge or want to submit pull requests.
-- **rc**: If you don't want to update every day and deal with many instabilities but want to have recent updates, this is your best shot.
-- **release**: This is the most stable version we offer. The trade-off is that it contains commits that are up to a month old.
-
-If you want more details, I highly recommend this video that explains how Facebook mobile release process works and why it was setup this way.
-
-<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>

beta/src/content/blog/2015/06/12/deprecating-jstransform-and-react-tools.md

@@ -1,30 +0,0 @@
----
-title: 'Deprecating JSTransform and react-tools'
-author: [zpao]
----
-
-Today we're announcing the deprecation of react-tools and JSTransform.
-
-As many people have noticed already, React and React Native have both switched their respective build systems to make use of [Babel](http://babeljs.io/). This replaced [JSTransform](https://github.com/facebook/jstransform), the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We've faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).
-
-react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to [let it go](https://www.youtube.com/watch?v=moSFlvxnbgk). We won't ship a new version for v0.14.
-
-## Migrating to Babel {/*migrating-to-babel*/}
-
-Many people in the React and broader JavaScript community have already adopted Babel. It has [integrations with a number of tools](http://babeljs.io/docs/setup/). Depending on your tool, you'll want to read up on the instructions.
-
-We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.
-
-## Other Deprecations {/*other-deprecations*/}
-
-### esprima-fb {/*esprima-fb*/}
-
-As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork ([esprima-fb](https://github.com/facebook/esprima/)). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parser, we encourage you to look into using one of those.
-
-Alternatively, if you need to parse JSX, take a look at [acorn](https://github.com/marijnh/acorn) parser in combination with [acorn-jsx](https://github.com/RReverser/acorn-jsx) plugin which is used inside of Babel and thus always supports the latest syntax.
-
-### JSXTransformer {/*jsxtransformer*/}
-
-JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for `<script>` tags with `type="text/jsx"` and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with [a nearly identical tool](https://babeljs.io/docs/usage/browser/), which has already been integrated into [JS Bin](https://jsbin.com/).
-
-We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.

beta/src/content/blog/2015/07/03/react-v0.14-beta-1.md

@@ -1,75 +0,0 @@
----
-title: React v0.14 Beta 1
-author: [sophiebits]
----
-
-This week, many people in the React community are at [ReactEurope](https://www.react-europe.org/) in the beautiful (and very warm) city of Paris, the second React conference that's been held to date. At our last conference, we released the first beta of React 0.13, and we figured we'd do the same today with our first beta of React 0.14, giving you something to play with if you're not at the conference or you're looking for something to do on the way home.
-
-With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.
-
-You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
-
-## Two Packages {/*two-packages*/}
-
-As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
-
-We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React. As one example, DOM diffing currently enables us to build React for the browser and make it fast enough to be useful, but if the DOM didn't have a stateful, imperative API, we might not need diffing at all.
-
-To make this more clear and to make it easier to build more environments that React can render to, we're splitting the main `react` package into two: `react` and `react-dom`.
-
-The `react` package contains `React.createElement`, `React.createClass` and `React.Component`, `React.PropTypes`, `React.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
-
-The `react-dom` package contains `ReactDOM.render`, `ReactDOM.unmountComponentAtNode`, and `ReactDOM.findDOMNode`, and in `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `ReactDOMServer.renderToStaticMarkup`.
-
-```js
-var React = require('react');
-var ReactDOM = require('react-dom');
-
-var MyComponent = React.createClass({
-  render: function () {
-    return <div>Hello World</div>;
-  },
-});
-
-ReactDOM.render(<MyComponent />, node);
-```
-
-We anticipate that most components will need to depend only on the `react` package, which is lightweight and doesn't include any of the actual rendering logic. To start, we expect people to render DOM-based components with our `react-dom` package, but there's nothing stopping someone from diving deep on performance and writing a `awesome-faster-react-dom` package which can render _the exact same DOM-based components_. By decoupling the component definitions from the rendering, this becomes possible.
-
-More importantly, this paves the way to writing components that can be shared between the web version of React and React Native. This isn't yet easily possible, but we intend to make this easy in a future version so you can share React code between your website and native apps.
-
-The addons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
-
-For now, please use the same version of `react` and `react-dom` in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the `react` package with a deprecation warning, but they'll be removed completely in 0.15.)
-
-## DOM node refs {/*dom-node-refs*/}
-
-The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node.
-
-Refs to custom component classes work exactly as before.
-
-```js
-var Zoo = React.createClass({
-  render: function () {
-    return (
-      <div>
-        Giraffe's name: <input ref="giraffe" />
-      </div>
-    );
-  },
-
-  showName: function () {
-    // Previously:
-    // var input = this.refs.giraffe.getDOMNode();
-    var input = this.refs.giraffe;
-
-    alert(input.value);
-  },
-});
-```
-
-This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components (eg. `<MyFancyMenu>` or `<MyContextProvider>`), which remain unaffected by this change.
-
-Along with this change, we're also replacing `component.getDOMNode()` with `ReactDOM.findDOMNode(component)`. The `findDOMNode` method drills down to find which DOM node was rendered by a component, but it returns its argument when passed a DOM node so it's safe to call on a DOM component too. We introduced this function quietly in the last release, but now we're deprecating `.getDOMNode()` completely: it should be easy to change all existing calls in your code to be `ReactDOM.findDOMNode`. We also have an [automated codemod script](https://www.npmjs.com/package/react-codemod) to help you with this transition. Note that the `findDOMNode` calls are unnecessary when you already have a DOM component ref (as in the example above), so you can (and should) skip them in most cases going forward.
-
-We hope you're as excited about this release as we are! Let us know what you think of it.

beta/src/content/blog/2015/08/03/new-react-devtools-beta.md

@@ -1,92 +0,0 @@
----
-title: 'New React Devtools Beta'
-author: [jaredly]
----
-
-We've made an entirely new version of the devtools, and we want you to try it
-out!
-
-![The full devtools gif](/images/blog/devtools-full.gif)
-
-## Why entirely new? {/*why-entirely-new*/}
-
-Perhaps the biggest reason was to create a defined API for dealing with
-internals, so that other tools could benefit as well and not have to depend on
-implementation details. This gives us more freedom to refactor things
-internally without worrying about breaking tooling.
-
-The current version of the devtools is a fork of Blink's "Elements" pane, and
-is imperative, mutation-driven, and tightly integrated with Chrome-specific
-APIs. The new devtools are much less coupled to Chrome, and easier to reason
-about thanks to React.
-
-## What are the benefits? {/*what-are-the-benefits*/}
-
-- 100% React
-- Firefox compatible
-- React Native compatible
-- more extensible & hackable
-
-## Are there any new features? {/*are-there-any-new-features*/}
-
-Yeah!
-
-### The Tree View {/*the-tree-view*/}
-
-![The new tree view of the devtools](/images/blog/devtools-tree-view.png)
-
-- Much richer view of your props, including the contents of objects and arrays
-- Custom components are emphasized, native components are de-emphasized
-- Stateful components have a red collapser
-- Improved keyboard navigation (hjkl or arrow keys)
-- Selected component is available in the console as `$r`
-- Props that change highlight in green
-- Right-click menu
-
-  - Scroll node into view
-  - Show the source for a component in the "Sources" pane
-  - Show the element in the "Elements" pane
-
-### Searching {/*searching*/}
-
-Select the search bar (or press "/"), and start searching for a component by
-name.
-
-![](/images/blog/devtools-search.gif)
-
-### The Side Pane {/*the-side-pane*/}
-
-- Now shows the `context` for a component
-- Right-click to store a prop/state value as a global variable
-
-![](/images/blog/devtools-side-pane.gif)
-
-## How do I install it? {/*how-do-i-install-it*/}
-
-First, disable the Chrome web store version, or it will break things. Then
-[download the .crx](https://github.com/facebook/react-devtools/releases) and
-drag it into your `chrome://extensions` page. If it's not working to drag it
-from the downloads bar, try opening your downloads folder and drag it from
-there.
-
-Once we've determined that there aren't any major regressions, we'll update
-the official web store version, and everyone will be automatically upgraded.
-
-### Also Firefox! {/*also-firefox*/}
-
-We also have an initial version of the devtools for Firefox, which you can
-download from the same [release page](https://github.com/facebook/react-devtools/releases).
-
-## Feedback welcome {/*feedback-welcome*/}
-
-Let us know what issues you run into
-[on GitHub](https://github.com/facebook/react-devtools/issues), and check out
-[the README](https://github.com/facebook/react-devtools/tree/devtools-next)
-for more info.
-
-## Update {/*update*/}
-
-_August 12, 2015_
-
-A second beta is out, with a number of bugfixes. It is also listed on the
-[releases page](https://github.com/facebook/react-devtools/releases).

beta/src/content/blog/2015/08/11/relay-technical-preview.md

@@ -1,35 +0,0 @@
----
-title: 'Relay Technical Preview'
-author: [josephsavona]
----
-
-# Relay {/*relay*/}
-
-Today we're excited to share an update on Relay - the technical preview is now open-source and [available on GitHub](http://github.com/facebook/relay).
-
-## Why Relay {/*why-relay*/}
-
-While React simplified the process of developing complex user-interfaces, it left open the question of how to interact with data on the server. It turns out that this was a significant source of friction for our developers; fragile coupling between client and server caused data-related bugs and made iteration harder. Furthermore, developers were forced to constantly re-implement complex async logic instead of focusing on their apps. Relay addresses these concerns by borrowing important lessons from React: it provides _declarative, component-oriented data fetching for React applications_.
-
-Declarative data-fetching means that Relay applications specify _what_ data they need, not _how_ to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
-
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
-
-Relay is in use at Facebook in production apps, and we're using it more and more because _Relay lets developers focus on their products and move fast_. It's working for us and we'd like to share it with the community.
-
-## What's Included {/*whats-included*/}
-
-We're open-sourcing a technical preview of Relay - the core framework that we use internally, with some modifications for use outside Facebook. As this is the first release, it's good to keep in mind that there may be some incomplete or missing features. We'll continue to develop Relay and are working closely with the GraphQL community to ensure that Relay tracks updates during GraphQL's RFC period. But we couldn't wait any longer to get this in your hands, and we're looking forward to your feedback and contributions.
-
-Relay is available on [GitHub](http://github.com/facebook/relay) and [npm](https://www.npmjs.com/package/react-relay).
-
-## What's Next {/*whats-next*/}
-
-The team is super excited to be releasing Relay - and just as excited about what's next. Here are some of the things we'll be focusing on:
-
-- Offline support. This will allow applications to fulfill queries and enqueue updates without connectivity.
-- Real-time updates. In collaboration with the GraphQL community, we're working to define a specification for subscriptions and provide support for them in Relay.
-- A generic Relay. Just as the power of React was never about the virtual DOM, Relay is much more than a GraphQL client. We're working to extend Relay to provide a unified interface for interacting not only with server data, but also in-memory and native device data (and, even better, a mix of all three).
-- Finally, it's all too easy as developers to focus on those people with the newest devices and fastest internet connections. We're working to make it easier to build applications that are robust in the face of slow or intermittent connectivity.
-
-Thanks!

beta/src/content/blog/2015/08/13/reacteurope-roundup.md

@@ -1,61 +0,0 @@
----
-title: 'ReactEurope Round-up'
-author: [matthewjohnston4]
----
-
-Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn't have been possible without the help and support of the React community.
-
-[Christopher Chedeau](https://github.com/vjeux) gave the opening keynote to the conference:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
-
-[Spencer Ahrens](https://github.com/sahrens) walks through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
-
-[Lee Byron](https://github.com/leebyron) explores GraphQL, its core principles, how it works, and what makes it a powerful tool:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
-
-[Joseph Savona](https://github.com/josephsavona) explores the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. There are examples of how Relay powers applications as complex as the Facebook News Feed:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
-
-[Nick Schrock](https://github.com/schrockn) and [Dan Schafer](https://github.com/dschafer) take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
-
-[Sebastian Markbåge](https://github.com/sebmarkbage) talks about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
-
-[Sebastian McKenzie](https://github.com/sebmck) goes over how existing JSX build pipeline infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
-
-[Cheng Lou](https://github.com/chenglou) gives a talk on the past, the present and the future of animation, and the place React can potentially take in this:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
-
-And there was a Q&A session with the whole team covering a range of React topics:
-
-<iframe width="650" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
-
-And there were lots of great talks from the React community:
-
-- [Michael Chan](https://www.youtube.com/watch?v=ERB1TJBn32c&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=2) looks at how to solve problems like CSS theming and media queries with contexts and plain old JavaScript. He also looks at the role of container-components and when it's better to "just use CSS.".
-- [Elie Rotenberg](https://www.youtube.com/watch?v=JSjhhUvB9DY&index=3&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) talks about Flux over the Wire, building isomorphic, real-time React apps using a novel interpretation of Flux.
-- [Ryan Florence](https://www.youtube.com/watch?v=BF58ZJ1ZQxY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=6) says “Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!”.
-- [Dan Abramov](https://www.youtube.com/watch?v=xsSnOQynTHs&index=7&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) demonstrates how React can be used together with webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.
-- [Mikhail Davydov](https://www.youtube.com/watch?v=ee_U2t-8L48&index=10&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) shows you how to ask the browser layout engine for help, how to avoid slavery of DSL, and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.
-- [Kevin Robinson](https://www.youtube.com/watch?v=EOz4D_714R8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=3) shares how user experience choices are a primary influence on how Twitter design the data layer, especially for teams developing new products with full-stack capabilities.
-- [Jed Watson](https://www.youtube.com/watch?v=ctwmd5L1U_Q&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=4) shares what Thinkmill have learned about React and mobile app development, and how they've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of their development process and framework.
-- [Michael Jackson](https://www.youtube.com/watch?v=Q6Kczrgw6ic&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=5) discusses how your users can benefit from the many tools that React Router provides including server-side rendering, real URLs on native devices, and much, much more.
-- [Michael Ridgway](https://www.youtube.com/watch?v=MrozpFEBEBE&index=7&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) walks you through an isomorphic Flux architecture to give you the holy grail of frontend development.
-- [Aria Buckles](https://www.youtube.com/watch?v=2Qu-Ulrsfl8&index=8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) covers Khan Academy's techniques and patterns to make dealing with large pure components simpler, as well as current open questions.
-- [Evan Morikawa and Ben Gotow](https://www.youtube.com/watch?v=Uu4Yz2HmCgE&index=9&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of.
-- [Zalando](https://www.youtube.com/watch?v=3EQhkquvVmY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=9), [Rangle.io](https://www.youtube.com/watch?v=nAWKR1bBDsU&index=12&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Automattic](https://www.youtube.com/watch?v=hjhyrBbDp6U&index=13&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Thinkmill](https://www.youtube.com/watch?v=ApoCktYaRxk&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=14), and [Red Badger](https://www.youtube.com/watch?v=hdKidiwR8DM&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=15) provided lots of insight into how larger companies are using React.
-
-There was also a [great series of Lightning talks](https://www.youtube.com/playlist?list=PLCC436JpVnK3xnOZ727t0vd3nbb5ZqCyo) from [Joshua Sierles](https://github.com/jsierles), [Ovidiu Cherecheș](https://github.com/skidding), [Mike Grabowski](https://github.com/grabbou), [Dave Brotherstone](https://github.com/bruderstein), [Sunil Pai](https://github.com/threepointone), [Andreas Savvides](https://github.com/AnSavvides), and [Petr Bela](https://github.com/petrbela).
-
-You can view the full list of talks on [the ReactEurope YouTube channel](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A).

beta/src/content/blog/2015/09/02/new-react-developer-tools.md

@@ -1,26 +0,0 @@
----
-title: 'New React Developer Tools'
-author: [sophiebits]
----
-
-A month ago, we [posted a beta](/blog/2015/08/03/new-react-devtools-beta.html) of the new React developer tools. Today, we're releasing the first stable version of the new devtools. We're calling it version 0.14, but it's a full rewrite so we think of it more like a 2.0 release.
-
-![Video/screenshot of new devtools](/images/blog/devtools-full.gif)
-
-It contains a handful of new features, including:
-
-- Built entirely with React, making it easier to develop and extend
-- Firefox support
-- Selected component instance is available as `$r` from the console
-- More detail is shown in props in the component tree
-- Right-click any node and choose "Show Source" to jump to the `render` method in the Sources panel
-- Right-click any props or state value to make it available as `$tmp` from the console
-- Full React Native support
-
-## Installation {/*installation*/}
-
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox, and [Microsoft Edge Addons](https://microsoftedge.microsoft.com/addons/detail/gpphkfbcpidddadnkolkpfckpihlkkil) for Edge. If you're developing using React, we highly recommend installing these devtools.
-
-If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
-
-If you run into any issues, please post them on the [React GitHub repo](https://github.com/facebook/react).

beta/src/content/blog/2015/09/10/react-v0.14-rc1.md

@@ -1,178 +0,0 @@
----
-title: 'React v0.14 Release Candidate'
-author: [sophiebits]
----
-
-We’re happy to announce our first release candidate for React 0.14! We gave you a [sneak peek in July](/blog/2015/07/03/react-v0.14-beta-1.html) at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.
-
-Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
-
-## Installation {/*installation*/}
-
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single package:
-
-- `npm install --save react@0.14.0-rc1`
-- `npm install --save react-dom@0.14.0-rc1`
-
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
-
-If you can’t use `npm` yet, we also provide pre-built browser builds for your convenience:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.0-rc1.js  
-  Minified build for production: https://fb.me/react-0.14.0-rc1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.0-rc1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.0-rc1.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.0-rc1.js  
-  Minified build for production: https://fb.me/react-dom-0.14.0-rc1.min.js
-
-These builds are also available in the `react` package on bower.
-
-## Changelog {/*changelog*/}
-
-### Major changes {/*major-changes*/}
-
-- #### Two Packages: React and React DOM
-
-  As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
-
-  To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
-
-  The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
-
-  The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
-
-  ```js
-  var React = require('react');
-  var ReactDOM = require('react-dom');
-
-  var MyComponent = React.createClass({
-    render: function () {
-      return <div>Hello World</div>;
-    },
-  });
-
-  ReactDOM.render(<MyComponent />, node);
-  ```
-
-  We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
-
-  The add-ons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
-
-  For now, please use matching versions of `react` and `react-dom` in your apps to avoid versioning problems.
-
-- #### DOM node refs
-
-  The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
-
-  ```js
-  var Zoo = React.createClass({
-    render: function () {
-      return (
-        <div>
-          Giraffe name: <input ref="giraffe" />
-        </div>
-      );
-    },
-    showName: function () {
-      // Previously: var input = this.refs.giraffe.getDOMNode();
-      var input = this.refs.giraffe;
-      alert(input.value);
-    },
-  });
-  ```
-
-  This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components. With these changes, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below).
-
-- #### Stateless function components
-
-  In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
-
-  ```js
-  // Using an ES2015 (ES6) arrow function:
-  var Aquarium = (props) => {
-    var fish = getFish(props.species);
-    return <Tank>{fish}</Tank>;
-  };
-
-  // Or with destructuring and an implicit return, simply:
-  var Aquarium = ({species}) => <Tank>{getFish(species)}</Tank>;
-
-  // Then use: <Aquarium species="rainbowfish" />
-  ```
-
-  This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
-
-- #### Deprecation of react-tools
-
-  The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
-
-- #### Compiler optimizations
-
-  React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
-
-  **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
-
-  **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
-
-### Breaking changes {/*breaking-changes*/}
-
-As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.
-
-These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
-
-- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
-- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
-- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
-
-And these two changes did not warn in 0.13 but should be easy to find and clean up:
-
-- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
-- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
-
-### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
-
-- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
-
-  If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
-
-- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
-- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
-- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
-- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
-- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
-
-### Notable enhancements {/*notable-enhancements*/}
-
-- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
-- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
-- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
-- When possible, React DOM now generates XHTML-compatible markup.
-- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
-- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
-- The `image` SVG tag is now supported by React DOM.
-- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
-- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
-- Many small performance improvements have been made.
-- Many warnings show more context than before.
-- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
-- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
-
-### New helpful warnings {/*new-helpful-warnings*/}
-
-- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
-- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
-- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
-
-### Notable bug fixes {/*notable-bug-fixes*/}
-
-- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
-- SVG elements are created with the correct namespace in more cases.
-- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
-- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
-- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
-- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
-- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
-- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.

beta/src/content/blog/2015/09/14/community-roundup-27.md

@@ -1,75 +0,0 @@
----
-title: 'Community Round-up #27 – Relay Edition'
-author: [steveluscher]
----
-
-In the weeks following the [open-source release](/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
-
-## Teaching servers to speak GraphQL {/*teaching-servers-to-speak-graphql*/}
-
-Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.
-
-Bryan Goldstein ([brysgo](https://github.com/brysgo)) has built a tool to help you define a GraphQL schema that wraps a set of [Bookshelf.JS](http://bookshelfjs.org/) models. Check out [graphql-bookshelf](https://github.com/brysgo/graphql-bookshelf).
-
-RisingStack ([risingstack](https://github.com/risingstack)) created a GraphQL ORM called [graffiti](https://github.com/RisingStack/graffiti) that you can plug into [mongoose](http://mongoosejs.com/) and serve using Express, Hapi, or Koa.
-
-David Mongeau-Petitpas ([dmongeau](https://github.com/dmongeau)) is working on a way to vend your Laravel models through a GraphQL endpoint, [laravel-graphql](https://github.com/Folkloreatelier/laravel-graphql).
-
-Gerald Monaco ([devknoll](https://github.com/devknoll)) created [graphql-schema](https://github.com/devknoll/graphql-schema) to allow the creation of JavaScript GraphQL schemas using a fluent/chainable interface.
-
-Jason Dusek ([solidsnack](https://github.com/solidsnack)) dove deep into PostgreSQL to teach it how to respond to GraphQL query strings as though they were SQL queries. Check out [GraphpostgresQL](https://github.com/solidsnack/GraphpostgresQL).
-
-Espen Hovlandsdal ([rexxars](https://github.com/rexxars)) built a [sql-to-graphql](https://github.com/vaffel/sql-to-graphql) tool that can perform introspection on the tables of a MySQL or PostgreSQL database, and produce a queryable HTTP GraphQL endpoint out of it.
-
-Mick Hansen ([mickhansen](https://github.com/mickhansen)) offers a set of [schema-building helpers](https://github.com/mickhansen/graphql-sequelize) for use with the [Sequelize ORM](http://docs.sequelizejs.com/en/latest/) for MySQL, PostgreSQL, SQLite, and MSSQL.
-
-## GraphQL beyond JavaScript {/*graphql-beyond-javascript*/}
-
-Robert Mosolgo ([rmosolgo](https://github.com/rmosolgo)) brought the full set of schema-building and query execution tools to Ruby, in the form of [graphql-ruby](https://github.com/rmosolgo/graphql-ruby) and [graphql-relay-ruby](https://github.com/rmosolgo/graphql-relay-ruby). Check out his [Rails-based demo](https://github.com/rmosolgo/graphql-ruby-demo).
-
-Andreas Marek ([andimarek](https://github.com/andimarek)) has brewed up a Java implementation of GraphQL, [graphql-java](https://github.com/andimarek/graphql-java).
-
-[vladar](https://github.com/vladar) is hard at work on a PHP port of the GraphQL reference implementation, [graphql-php](https://github.com/webonyx/graphql-php).
-
-Taeho Kim ([dittos](https://github.com/dittos)) is bringing GraphQL to Python, with [graphql-py](https://github.com/dittos/graphql-py).
-
-Oleg Ilyenko ([OlegIlyenko](https://github.com/OlegIlyenko)) made a beautiful and [delicious-looking website](http://sangria-graphql.org/) for a Scala implementation of GraphQL, [sangria](https://github.com/sangria-graphql/sangria).
-
-Joe McBride ([joemcbride](https://github.com/joemcbride)) has an up-and-running example of GraphQL for .NET, [graphql-dotnet](https://github.com/joemcbride/graphql-dotnet).
-
-## Show me, don't tell me {/*show-me-dont-tell-me*/}
-
-Interact with this [visual tour of Relay's architecture](http://sgwilym.github.io/relay-visual-learners/) by Sam Gwilym ([sgwilym](https://github.com/sgwilym)).
-
-<a href="http://sgwilym.github.io/relay-visual-learners/">
-  <img src="/images/blog/relay-visual-architecture-tour.png" alt="Relay for visual learners"  />
-</a>
-
-Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations &ndash; all atop a Ruby GraphQL server: [new.comique.co](http://new.comique.co/)
-
-## Skeletons in the closet {/*skeletons-in-the-closet*/}
-
-Joseph Rollins ([fortruce](https://github.com/fortruce)) created a hot-reloading, auto schema-regenerating, [Relay skeleton](https://github.com/fortruce/relay-skeleton) that you can use to get up and running quickly.
-
-Michael Hart ([mhart](https://mhart)) built a [simple-relay-starter](https://github.com/mhart/simple-relay-starter) kit using Browserify.
-
-## Routing around {/*routing-around*/}
-
-Jimmy Jia ([taion](@taion)) and Gerald Monaco ([devknoll](@devknoll)) have been helping lost URLs find their way to Relay apps through their work on [react-router-relay](relay-tools/react-router-relay). Check out Christoph Nakazawa's ([cpojer](@cpojer)) [blog post](medium.com/@cpojer/relay-and-routing-36b5439bad9) on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at [taion/relay-todomvc](taion/relay-todomvc).
-
-Chen Hung-Tu ([transedward](https://github.com/transedward)) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at [transedward/relay-chat](https://github.com/transedward/relay-chat).
-
-## In your words {/*in-your-words*/}
-
-<div class="skinny-row">
-  <div class="skinny-col">
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Relay making good on its promise to be the &quot;React.js of data fetching&quot;. Rebuilding small app with it. Spectacular how fast/easy building is.</p>&mdash; Kyle Mathews (@kylemathews) <a href="https://twitter.com/kylemathews/status/640289107122368513">September 5, 2015</a></blockquote>
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/RainySundayHackathon?src=hash">#RainySundayHackathon</a> exploring <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> <a href="http://t.co/Mm3HlqMejJ">pic.twitter.com/Mm3HlqMejJ</a></p>&mdash; Bastian Kistner (@passionkind) <a href="https://twitter.com/passionkind/status/632846601447411712">August 16, 2015</a></blockquote>
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Friday. Time to GraphQL a MySQL database. <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> <a href="https://twitter.com/hashtag/webapp?src=hash">#webapp</a></p>&mdash; xador (@xadorfr) <a href="https://twitter.com/xadorfr/status/632108552765751296">August 14, 2015</a></blockquote>
-  </div>
-  <div class="skinny-col">
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Started a new <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> and <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> meet up group! <a href="http://t.co/Vt6Cv4nNH4">http://t.co/Vt6Cv4nNH4</a> If you&#39;re in the Bay Area, I&#39;d love to have you join! <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a></p>&mdash; Gerald Monaco (@devknoll) <a href="https://twitter.com/devknoll/status/636723716123000832">August 27, 2015</a></blockquote>
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/reactjs">@reactjs</a> <a href="https://twitter.com/laneykuenzel">@laneykuenzel</a> <a href="https://twitter.com/BhuwanKhattar">@BhuwanKhattar</a> these <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> mutations. they&#39;re mind-blowingly awesome. they make so much damn sense. thank you!</p>&mdash; Jimmy Jia (@jimmy_jia) <a href="https://twitter.com/jimmy_jia/status/634204563709526016">August 20, 2015</a></blockquote>
-    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">REST is dead, long live REST! <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a></p>&mdash; Syrus Akbary (@syrusakbary) <a href="https://twitter.com/syrusakbary/status/631531666113060864">August 12, 2015</a></blockquote>
-  </div>
-</div>

beta/src/content/blog/2015/10/01/react-render-and-top-level-api.md

@@ -1,131 +0,0 @@
----
-title: 'ReactDOM.render and the Top Level React API'
-author: ['jimfb', 'sebmarkbage']
----
-
-When you're in React's world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.
-
-The primary API for rendering into the DOM looks like this:
-
-```js
-ReactDOM.render(reactElement, domContainerNode);
-```
-
-To update the properties of an existing component, you call render again with a new element.
-
-If you are rendering React components within a single-page app, you may need to plug into the app's view lifecycle to ensure your app will invoke unmountComponentAtNode at the appropriate time. React will not automatically clean up a tree. You need to manually call:
-
-```js
-ReactDOM.unmountComponentAtNode(domContainerNode);
-```
-
-This is important and often forgotten. Forgetting to call `unmountComponentAtNode` will cause your app to leak memory. There is no way for us to automatically detect when it is appropriate to do this work. Every system is different.
-
-It is not unique to the DOM. If you want to insert a React Native view in the middle of an existing iOS app you will hit similar issues.
-
-## Helpers {/*helpers*/}
-
-If you have multiple React roots, or a single root that gets deleted over time, we recommend that you always create your own wrapper API. These will all look slightly different depending on what your outer system looks like. For example, at Facebook we have a system that automatically ties into our page transition router to automatically call `unmountComponentAtNode`.
-
-Rather than calling `ReactDOM.render()` directly everywhere, consider writing/using a library that will manage mounting and unmounting within your application.
-
-In your environment you may want to always configure internationalization, routers, user data etc. If you have many different React roots it can be a pain to set up configuration nodes all over the place. By creating your own wrapper you can unify that configuration into one place.
-
-## Object Oriented Updates {/*object-oriented-updates*/}
-
-If you call `ReactDOM.render` a second time to update properties, all your props are completely replaced.
-
-```js
-ReactDOM.render(<App locale="en-US" userID={1} />, container);
-// props.userID == 1
-// props.locale == "en-US"
-ReactDOM.render(<App userID={2} />, container);
-// props.userID == 2
-// props.locale == undefined ??!?
-```
-
-In object-oriented programming, all state lives on each object instance and you apply changes incrementally by mutating that state, one piece at a time. If you are using React within an app that expects an object oriented API (for instance, if you are building a custom web component using React), it might be surprising/confusing to a user that setting a single property would wipe out all the other properties on your component.
-
-We used to have a helper function called `setProps` which allowed you to update only a few properties at a time. Unfortunately this API lived on a component instance, required React to keep this state internally and wasn't very natural anyway. Therefore, we're deprecating it and suggest that you build it into your own wrapper instead.
-
-Here's some boilerplate to get you started. It is a 0.14 migration path for codebases using `setProps` and `replaceProps`.
-
-```js
-class ReactComponentRenderer {
-  constructor(klass, container) {
-    this.klass = klass;
-    this.container = container;
-    this.props = {};
-    this.component = null;
-  }
-
-  replaceProps(props, callback) {
-    this.props = {};
-    this.setProps(props, callback);
-  }
-
-  setProps(partialProps, callback) {
-    if (this.klass == null) {
-      console.warn(
-        'setProps(...): Can only update a mounted or ' +
-          'mounting component. This usually means you called setProps() on ' +
-          'an unmounted component. This is a no-op.'
-      );
-      return;
-    }
-    Object.assign(this.props, partialProps);
-    var element = React.createElement(this.klass, this.props);
-    this.component = ReactDOM.render(element, this.container, callback);
-  }
-
-  unmount() {
-    ReactDOM.unmountComponentAtNode(this.container);
-    this.klass = null;
-  }
-}
-```
-
-Object-oriented APIs don't look like that though. They use setters and methods. I think we can do better. If you know more about the component API that you're rendering, you can create a more natural object-oriented API around your React component.
-
-```js
-class ReactVideoPlayer {
-  constructor(url, container) {
-    this._container = container;
-    this._url = url;
-    this._isPlaying = false;
-    this._render();
-  }
-
-  _render() {
-    ReactDOM.render(
-      <VideoPlayer url={this._url} playing={this._isPlaying} />,
-      this._container
-    );
-  }
-
-  get url() {
-    return this._url;
-  }
-
-  set url(value) {
-    this._url = value;
-    this._render();
-  }
-
-  play() {
-    this._isPlaying = true;
-    this._render();
-  }
-
-  pause() {
-    this._isPlaying = false;
-    this._render();
-  }
-
-  destroy() {
-    ReactDOM.unmountComponentAtNode(this._container);
-  }
-}
-```
-
-This example shows how to provide an imperative API on top of a declarative one. Similarly, the reverse can be done, and a declarative wrapper can be used when exposing a Web Component as a React component.

beta/src/content/blog/2015/10/07/react-v0.14.md

@@ -1,203 +0,0 @@
----
-title: 'React v0.14'
-author: [sophiebits]
----
-
-We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.
-
-If you tried the release candidate, thank you – your support is invaluable and we've fixed a few bugs that you reported.
-
-As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.
-
-## Upgrade Guide {/*upgrade-guide*/}
-
-Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
-
-If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
-
-For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
-
-See the changelog below for more details.
-
-## Installation {/*installation*/}
-
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
-
-- `npm install --save react react-dom`
-
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
-
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.0.js  
-  Minified build for production: https://fb.me/react-0.14.0.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.0.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.0.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.0.js  
-  Minified build for production: https://fb.me/react-dom-0.14.0.min.js
-
-## Changelog {/*changelog*/}
-
-### Major changes {/*major-changes*/}
-
-- #### Two Packages: React and React DOM
-
-  As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
-
-  To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
-
-  The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
-
-  The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
-
-  ```js
-  var React = require('react');
-  var ReactDOM = require('react-dom');
-
-  var MyComponent = React.createClass({
-    render: function () {
-      return <div>Hello World</div>;
-    },
-  });
-
-  ReactDOM.render(<MyComponent />, node);
-  ```
-
-  The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
-
-  The add-ons have moved to separate packages as well:
-
-  - `react-addons-clone-with-props`
-  - `react-addons-create-fragment`
-  - `react-addons-css-transition-group`
-  - `react-addons-linked-state-mixin`
-  - `react-addons-perf`
-  - `react-addons-pure-render-mixin`
-  - `react-addons-shallow-compare`
-  - `react-addons-test-utils`
-  - `react-addons-transition-group`
-  - `react-addons-update`
-  - `ReactDOM.unstable_batchedUpdates` in `react-dom`.
-
-  For now, please use matching versions of `react` and `react-dom` (and the add-ons, if you use them) in your apps to avoid versioning problems.
-
-- #### DOM node refs
-
-  The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. Starting with this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
-
-  ```js
-  var Zoo = React.createClass({
-    render: function () {
-      return (
-        <div>
-          Giraffe name: <input ref="giraffe" />
-        </div>
-      );
-    },
-    showName: function () {
-      // Previously: var input = this.refs.giraffe.getDOMNode();
-      var input = this.refs.giraffe;
-      alert(input.value);
-    },
-  });
-  ```
-
-  This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components.
-
-  With this change, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below). If your components are currently using `.getDOMNode()`, they will continue to work with a warning until 0.15.
-
-- #### Stateless function components
-
-  In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
-
-  ```js
-  // A function component using an ES2015 (ES6) arrow function:
-  var Aquarium = (props) => {
-    var fish = getFish(props.species);
-    return <Tank>{fish}</Tank>;
-  };
-
-  // Or with destructuring and an implicit return, simply:
-  var Aquarium = ({species}) => <Tank>{getFish(species)}</Tank>;
-
-  // Then use: <Aquarium species="rainbowfish" />
-  ```
-
-  These components behave just like a React class with only a `render` method defined. Since no component instance is created for a function component, any `ref` added to one will evaluate to `null`. Function components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function.
-
-  This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
-
-- #### Deprecation of react-tools
-
-  The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
-
-- #### Compiler optimizations
-
-  React now supports two compiler optimizations that can be enabled in Babel 5.8.24 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
-
-  **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
-
-  **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
-
-### Breaking changes {/*breaking-changes*/}
-
-In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:
-
-- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
-- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
-
-These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
-
-- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
-- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
-- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
-
-### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
-
-Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.
-
-- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
-
-  With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
-
-- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
-- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
-- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
-- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
-- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
-
-### Notable enhancements {/*notable-enhancements*/}
-
-- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
-- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
-- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
-- When possible, React DOM now generates XHTML-compatible markup.
-- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
-- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
-- The `image` SVG tag is now supported by React DOM.
-- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
-- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
-- Many small performance improvements have been made.
-- Many warnings show more context than before.
-- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
-- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
-
-### New helpful warnings {/*new-helpful-warnings*/}
-
-- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
-- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
-- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
-
-### Notable bug fixes {/*notable-bug-fixes*/}
-
-- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
-- SVG elements are created with the correct namespace in more cases.
-- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
-- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
-- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
-- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
-- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
-- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.

beta/src/content/blog/2015/10/19/reactiflux-is-moving-to-discord.md

@@ -1,86 +0,0 @@
----
-title: 'Reactiflux is moving to Discord'
-author: [benigeri]
----
-
-TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
-
-## What happened with Slack? {/*what-happened-with-slack*/}
-
-A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
-
-We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
-
-## So… why Discord? {/*so-why-discord*/}
-
-After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
-
-### Easiest to join {/*easiest-to-join*/}
-
-Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
-
-This is critically useful for us, and will make Reactiflux even more open and accessible.
-
-### Great apps {/*great-apps*/}
-
-Out of all of the services we’ve tried, Discord’s apps are by far the most polished. They are well designed, easy to use, and surprisingly fast. In addition to the web app, they have mobile apps on both iOS and Android as well as desktop apps for OS X and Windows, with Linux support coming soon.
-
-Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
-
-### Moderation tools {/*moderation-tools*/}
-
-So far, we’ve been fortunate not to have to deal with spammers and trolls. As our community continues to grow, that might change. Unsurprisingly, Discord is the only app we’ve seen with legitimate moderation tools. It was built for gaming communities, after all.
-
-### Great multiple Server support {/*great-multiple-server-support*/}
-
-Your Discord account works with every Discord server, which is the equivalent of a Slack team. You don’t need to create a new account every time you join a new team. You can join new servers in one click, and it’s very easy to switch between them. Discord messages also work across servers, so your personal conversations are not scoped to a single server.
-
-Instead of having one huge, crowded Reactiflux server, we can branch off closely related channels into sub-servers. Communities will start overlapping, and it will be easy to interact with non-Reactiflux channels.
-
-### It’s hosted {/*its-hosted*/}
-
-Self-hosted apps require maintenance. We’re all busy, and we can barely find the time to keep our landing page up to date and running smoothly. More than anything, we need a stable platform, and we don’t have the resources to guarantee that right now.
-
-It’s a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
-
-### We like the team {/*we-like-the-team*/}
-
-And they seem to like us back. They are excited for us to join them, and they’ve been very responsive to our feedback and suggestions.
-
-They implemented code syntax highlighting just a few days after we told them we needed it.
-
-Discord’s team has already built a solid suite of apps, and they have shown us how much they care about their users. We’re excited to see how they will continue to improve their product.
-
-## And what’s the catch? {/*and-whats-the-catch*/}
-
-Choosing the best chat service is subjective. There are a million reasons why Discord _might be_ a terrible idea. Here are the ones that we’re most worried about:
-
-### Difficult channel management {/*difficult-channel-management*/}
-
-Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
-
-As the number of channels grow, it will be challenging to keep things in order. Branching off sub-servers will help, and we will keep an easily accessible directory of channels across our main server and all of the sub-servers.
-
-We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
-
-### No Search {/*no-search*/}
-
-Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
-
-### Firewall {/*firewall*/}
-
-A couple of users aren’t able to access Discord at work since other corporate filters classify it as a gaming application. This sucks, but it seems to be a rare case. So far, it seems only to affect 0.6% of our current community (3/500).
-
-We hope that these users can get Discord's domains whitelisted, and we’ll try to find a solution if this is a widespread issue. The Discord team is aware of the issue as well.
-
-## Is Discord going to disappear tomorrow? {/*is-discord-going-to-disappear-tomorrow*/}
-
-Probably not tomorrow. They have 14 people [full time](https://discordapp.com/company), and they’ve raised money from some of the best investors in Silicon Valley, including [Benchmark](http://www.benchmark.com/) and [Accel](http://www.accel.com/companies/).
-
-By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
-
-## Join us! {/*join-us*/}
-
-More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
-
-_Note: Jordan Hawker’s thorough [research](http://jhawk.co/team-chat-comparison) made our decision a lot easier._

beta/src/content/blog/2015/10/28/react-v0.14.1.md

@@ -1,44 +0,0 @@
----
-title: 'React v0.14.1'
-author: [zpao]
----
-
-After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.1.js  
-  Minified build for production: https://fb.me/react-0.14.1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.1.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.1.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.1.js  
-  Minified build for production: https://fb.me/react-dom-0.14.1.min.js
-
-We've also published version `0.14.1` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React DOM {/*react-dom*/}
-
-- Fixed bug where events wouldn't fire in old browsers when using React in development mode
-- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
-- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
-- Added support for `color` attribute
-- Ensured legacy `.props` access on DOM nodes is updated on re-renders
-
-### React TestUtils Add-on {/*react-testutils-add-on*/}
-
-- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
-
-### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
-
-- Fix bug preventing `0` to be used as a timeout value
-
-### React on Bower {/*react-on-bower*/}
-
-- Added `react-dom.js` to `main` to improve compatibility with tooling

beta/src/content/blog/2015/11/02/react-v0.14.2.md

@@ -1,32 +0,0 @@
----
-title: 'React v0.14.2'
-author: [zpao]
----
-
-We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.2.js  
-  Minified build for production: https://fb.me/react-0.14.2.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.2.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.2.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.2.js  
-  Minified build for production: https://fb.me/react-dom-0.14.2.min.js
-
-We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React DOM {/*react-dom*/}
-
-- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
-- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
-- Added support for `integrity` attribute
-- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
-- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages

beta/src/content/blog/2015/11/18/react-v0.14.3.md

@@ -1,44 +0,0 @@
----
-title: 'React v0.14.3'
-author: [zpao]
----
-
-It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.3.js  
-  Minified build for production: https://fb.me/react-0.14.3.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.3.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.3.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.3.js  
-  Minified build for production: https://fb.me/react-dom-0.14.3.min.js
-- **React DOM Server** (include React in the page before React DOM Server)  
-  Dev build with warnings: https://fb.me/react-dom-server-0.14.3.js  
-  Minified build for production: https://fb.me/react-dom-server-0.14.3.min.js
-
-We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React DOM {/*react-dom*/}
-
-- Added support for `nonce` attribute for `<script>` and `<style>` elements
-- Added support for `reversed` attribute for `<ol>` elements
-
-### React TestUtils Add-on {/*react-testutils-add-on*/}
-
-- Fixed bug with shallow rendering and function refs
-
-### React CSSTransitionGroup Add-on {/*react-csstransitiongroup-add-on*/}
-
-- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
-
-### React on Bower {/*react-on-bower*/}
-
-- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser

beta/src/content/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.md

@@ -1,44 +0,0 @@
----
-title: React.js Conf 2016 Diversity Scholarship
-author: [zpao]
----
-
-I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
-
-When we ran this program last year, we had _over 200_ people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
-
-This year we're excited to bring back the scholarship, but we've set aside **40 tickets** because we really believe that it's important to do our best to make sure we have an even more diverse audience.
-
-This is something I'm personally really excited to be a part of. I know the rest of the team is as well. We're really proud to have everyone at Facebook providing support and funding for this.
-
-The details of the scholarship are provided below (or you can [go directly to the application](http://goo.gl/forms/PEmKj8oUp4)). I encourage you to apply! If you don't feel like you are eligible yourself, you can still help – send this along to friends, family, coworkers, acquaintances, or anybody who might be interested. And even if you haven't spoken before, please consider [submitting a proposal for a talk](http://conf.reactjs.com/) (either 30 minutes or just 5 minutes) - we're hoping to have a very diverse group of speakers in addition to attendees.
-
----
-
-Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
-
-Beginning today, those studying or working in computer science or a related field can apply for a partial scholarship to attend the React.js Conf in San Francisco, CA on February 22 & 23, 2016.
-
-React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. React Native makes is easy to use the same concepts and technologies to build native mobile experiences on iOS and Android. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see [the website](http://conf.reactjs.com/).
-
-At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
-
-To apply for the scholarship, please visit the application page: **http://goo.gl/forms/PEmKj8oUp4**
-
-## Award Includes {/*award-includes*/}
-
-- Paid registration fee for the React.js Conf February 22 & 23 in downtown San Francisco, CA
-- Paid lodging expenses for February 21, 22, 23
-
-## Important Dates {/*important-dates*/}
-
-- Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
-- Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
-- Monday & Tuesday, February 22 & 23, 2016: React.js Conf
-
-## Eligibility {/*eligibility*/}
-
-- Must currently be studying or working in Computer Science or a related field
-- International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
-- You must be able to provide your own transportation to San Francisco
-- You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA

beta/src/content/blog/2015/12/16/ismounted-antipattern.md

@@ -1,79 +0,0 @@
----
-title: 'isMounted is an Antipattern'
-author: [jimfb]
----
-
-As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
-
-The primary use case for `isMounted()` is to avoid calling `setState()` after a component has unmounted, because calling `setState()` after a component has unmounted will emit a warning. The “setState warning” exists to help you catch bugs, because calling `setState()` on an unmounted component is an indication that your app/component has somehow failed to clean up properly. Specifically, calling `setState()` in an unmounted component means that your app is still holding a reference to the component after the component has been unmounted - which often indicates a memory leak!
-
-To avoid the error message, people often add lines like this:
-
-```js
-if (this.isMounted()) { // This is bad.
-  this.setState({...});
-}
-```
-
-Checking `isMounted` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning, since now you will never get the warning (even when you should!)
-
-Other uses of `isMounted()` are similarly erroneous; using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
-
-An easy migration strategy for anyone upgrading their code to avoid `isMounted()` is to track the mounted status yourself. Just set a `_isMounted` property to true in `componentDidMount` and set it to false in `componentWillUnmount`, and use this variable to check your component's status.
-
-An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount`, prior to unmounting.
-
-For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
-
-```javascript{9}
-class MyComponent extends React.Component {
-  componentDidMount() {
-    mydatastore.subscribe(this);
-  }
-  render() {
-    ...
-  }
-  componentWillUnmount() {
-    mydatastore.unsubscribe(this);
-  }
-}
-```
-
-If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
-
-```js
-const cancelablePromise = makeCancelable(
-  new Promise(r => component.setState({...}))
-);
-
-cancelablePromise
-  .promise
-  .then(() => console.log('resolved'))
-  .catch((reason) => console.log('isCanceled', reason.isCanceled));
-
-cancelablePromise.cancel(); // Cancel the promise
-```
-
-Where `makeCancelable` was originally [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
-
-```js
-const makeCancelable = (promise) => {
-  let hasCanceled_ = false;
-
-  const wrappedPromise = new Promise((resolve, reject) => {
-    promise.then(
-      (val) => (hasCanceled_ ? reject({isCanceled: true}) : resolve(val)),
-      (error) => (hasCanceled_ ? reject({isCanceled: true}) : reject(error))
-    );
-  });
-
-  return {
-    promise: wrappedPromise,
-    cancel() {
-      hasCanceled_ = true;
-    },
-  };
-};
-```
-
-As an added bonus for getting your code cleaned up early, getting rid of `isMounted()` makes it one step easier for you to upgrade to ES6 classes, where using `isMounted()` is already prohibited. Happy coding!

beta/src/content/blog/2015/12/18/react-components-elements-and-instances.md

@@ -1,386 +0,0 @@
----
-title: 'React Components, Elements, and Instances'
-author: [gaearon]
----
-
-The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
-
-## Managing the Instances {/*managing-the-instances*/}
-
-If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` _component_ by creating a class. When the app is running, you may have several _instances_ of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce _elements_?
-
-In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
-
-```js
-class Form extends TraditionalObjectOrientedView {
-  render() {
-    // Read some data passed to the view
-    const {isSubmitted, buttonText} = this.attrs;
-
-    if (!isSubmitted && !this.button) {
-      // Form is not yet submitted. Create the button!
-      this.button = new Button({
-        children: buttonText,
-        color: 'blue',
-      });
-      this.el.appendChild(this.button.el);
-    }
-
-    if (this.button) {
-      // The button is visible. Update its text!
-      this.button.attrs.children = buttonText;
-      this.button.render();
-    }
-
-    if (isSubmitted && this.button) {
-      // Form was submitted. Destroy the button!
-      this.el.removeChild(this.button.el);
-      this.button.destroy();
-    }
-
-    if (isSubmitted && !this.message) {
-      // Form was submitted. Show the success message!
-      this.message = new Message({text: 'Success!'});
-      this.el.appendChild(this.message.el);
-    }
-  }
-}
-```
-
-This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
-
-Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
-
-So how is React different?
-
-## Elements Describe the Tree {/*elements-describe-the-tree*/}
-
-In React, this is where the _elements_ come to rescue. **An element is a plain object _describing_ a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
-
-An element is not an actual instance. Rather, it is a way to tell React what you _want_ to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
-
-### DOM Elements {/*dom-elements*/}
-
-When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
-
-```js
-{
-  type: 'button',
-  props: {
-    className: 'button button-blue',
-    children: {
-      type: 'b',
-      props: {
-        children: 'OK!'
-      }
-    }
-  }
-}
-```
-
-This element is just a way to represent the following HTML as a plain object:
-
-```html
-<button class="button button-blue">
-  <b>
-    OK!
-  </b>
-</button>
-```
-
-Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
-
-What’s important is that both child and parent elements are _just descriptions and not the actual instances_. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.
-
-React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
-
-### Component Elements {/*component-elements*/}
-
-However, the `type` of an element can also be a function or a class corresponding to a React component:
-
-```js
-{
-  type: Button,
-  props: {
-    color: 'blue',
-    children: 'OK!'
-  }
-}
-```
-
-This is the core idea of React.
-
-**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
-
-This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
-
-```js
-const DangerButton = ({children}) => ({
-  type: Button,
-  props: {
-    color: 'red',
-    children: children,
-  },
-});
-```
-
-You can mix and match DOM and component elements in a single element tree:
-
-```js
-const DeleteAccount = () => ({
-  type: 'div',
-  props: {
-    children: [{
-      type: 'p',
-      props: {
-        children: 'Are you sure?'
-      }
-    }, {
-      type: DangerButton,
-      props: {
-        children: 'Yep'
-      }
-    }, {
-      type: Button,
-      props: {
-        color: 'blue',
-        children: 'Cancel'
-      }
-   }]
-});
-```
-
-Or, if you prefer JSX:
-
-```js
-const DeleteAccount = () => (
-  <div>
-    <p>Are you sure?</p>
-    <DangerButton>Yep</DangerButton>
-    <Button color="blue">Cancel</Button>
-  </div>
-);
-```
-
-This mix and matching helps keep components decoupled from each other, as they can express both _is-a_ and _has-a_ relationships exclusively through composition:
-
-- `Button` is a DOM `<button>` with specific properties.
-- `DangerButton` is a `Button` with specific properties.
-- `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
-
-### Components Encapsulate Element Trees {/*components-encapsulate-element-trees*/}
-
-When React sees an element with a function or class `type`, it knows to ask _that_ component what element it renders to, given the corresponding `props`.
-
-When it sees this element:
-
-```js
-{
-  type: Button,
-  props: {
-    color: 'blue',
-    children: 'OK!'
-  }
-}
-```
-
-React will ask `Button` what it renders to. The `Button` will return this element:
-
-```js
-{
-  type: 'button',
-  props: {
-    className: 'button button-blue',
-    children: {
-      type: 'b',
-      props: {
-        children: 'OK!'
-      }
-    }
-  }
-}
-```
-
-React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
-
-React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
-
-Remember the `Form` example above? It can be written in React as follows[^1]:
-
-```js
-const Form = ({isSubmitted, buttonText}) => {
-  if (isSubmitted) {
-    // Form submitted! Return a message element.
-    return {
-      type: Message,
-      props: {
-        text: 'Success!',
-      },
-    };
-  }
-
-  // Form is still visible! Return a button element.
-  return {
-    type: Button,
-    props: {
-      children: buttonText,
-      color: 'blue',
-    },
-  };
-};
-```
-
-That’s it! For a React component, props are the input, and an element tree is the output.
-
-**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
-
-We let React create, update, and destroy instances. We _describe_ them with elements we return from the components, and React takes care of managing the instances.
-
-### Components Can Be Classes or Functions {/*components-can-be-classes-or-functions*/}
-
-In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
-
-```js
-// 1) As a function of props
-const Button = ({children, color}) => ({
-  type: 'button',
-  props: {
-    className: 'button button-' + color,
-    children: {
-      type: 'b',
-      props: {
-        children: children,
-      },
-    },
-  },
-});
-
-// 2) Using the React.createClass() factory
-const Button = React.createClass({
-  render() {
-    const {children, color} = this.props;
-    return {
-      type: 'button',
-      props: {
-        className: 'button button-' + color,
-        children: {
-          type: 'b',
-          props: {
-            children: children,
-          },
-        },
-      },
-    };
-  },
-});
-
-// 3) As an ES6 class descending from React.Component
-class Button extends React.Component {
-  render() {
-    const {children, color} = this.props;
-    return {
-      type: 'button',
-      props: {
-        className: 'button button-' + color,
-        children: {
-          type: 'b',
-          props: {
-            children: children,
-          },
-        },
-      },
-    };
-  }
-}
-```
-
-When a component is defined as a class, it is a little bit more powerful than a function component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
-
-A function component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use function components instead.
-
-**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
-
-### Top-Down Reconciliation {/*top-down-reconciliation*/}
-
-When you call:
-
-```js
-ReactDOM.render(
-  {
-    type: Form,
-    props: {
-      isSubmitted: false,
-      buttonText: 'OK!',
-    },
-  },
-  document.getElementById('root')
-);
-```
-
-React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
-
-```js
-// React: You told me this...
-{
-  type: Form,
-  props: {
-    isSubmitted: false,
-    buttonText: 'OK!'
-  }
-}
-
-// React: ...And Form told me this...
-{
-  type: Button,
-  props: {
-    children: 'OK!',
-    color: 'blue'
-  }
-}
-
-// React: ...and Button told me this! I guess I'm done.
-{
-  type: 'button',
-  props: {
-    className: 'button button-blue',
-    children: {
-      type: 'b',
-      props: {
-        children: 'OK!'
-      }
-    }
-  }
-}
-```
-
-This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the resulting DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
-
-This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
-
-You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
-
-Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
-
-React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
-
-## Summary {/*summary*/}
-
-An _element_ is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
-
-A _component_ can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
-
-When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
-
-An _instance_ is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/docs/component-api.html).
-
-Function components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
-
-Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
-
-## Further Reading {/*further-reading*/}
-
-- [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
-- [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)
-- [React (Virtual) DOM Terminology](/docs/glossary.html)
-
-[^1]: All React elements require an additional `$$typeof: Symbol.for('react.element')` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.

beta/src/content/blog/2015/12/29/react-v0.14.4.md

@@ -1,40 +0,0 @@
----
-title: 'React v0.14.4'
-author: [sophiebits]
----
-
-Happy December! We have a minor point release today. It has just a few small bug fixes.
-
-The release is now available for download:
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-0.14.4.js  
-  Minified build for production: https://fb.me/react-0.14.4.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-0.14.4.js  
-  Minified build for production: https://fb.me/react-with-addons-0.14.4.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-0.14.4.js  
-  Minified build for production: https://fb.me/react-dom-0.14.4.min.js
-- **React DOM Server** (include React in the page before React DOM Server)  
-  Dev build with warnings: https://fb.me/react-dom-server-0.14.4.js  
-  Minified build for production: https://fb.me/react-dom-server-0.14.4.min.js
-
-We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
-
----
-
-## Changelog {/*changelog*/}
-
-### React {/*react*/}
-
-- Minor internal changes for better compatibility with React Native
-
-### React DOM {/*react-dom*/}
-
-- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
-- Fixed bug with controlled `<select>` elements not handling updates properly
-
-### React Perf Add-on {/*react-perf-add-on*/}
-
-- Some DOM operation names have been updated for clarity in the output of `.printDOM()`

beta/src/content/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.md

@@ -1,57 +0,0 @@
----
-title: '(A => B) !=> (B => A)'
-author: [jimfb]
----
-
-The documentation for `componentWillReceiveProps` states that `componentWillReceiveProps` will be invoked when the props change as the result of a rerender. Some people assume this means "if `componentWillReceiveProps` is called, then the props must have changed", but that conclusion is logically incorrect.
-
-The guiding principle is one of my favorites from formal logic/mathematics:
-
-> A implies B does not imply B implies A
-
-Example: "If I eat moldy food, then I will get sick" does not imply "if I am sick, then I must have eaten moldy food". There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that `componentWillReceiveProps` might get called, even if the props didn’t change.
-
-If you don’t believe me, call `ReactDOM.render()` three times with the exact same props, and try to predict the number of times `componentWillReceiveProps` will get called:
-
-```js
-class Component extends React.Component {
-  componentWillReceiveProps(nextProps) {
-    console.log('componentWillReceiveProps', nextProps.data.bar);
-  }
-  render() {
-    return <div>Bar {this.props.data.bar}!</div>;
-  }
-}
-
-var container = document.getElementById('container');
-
-var mydata = {bar: 'drinks'};
-ReactDOM.render(<Component data={mydata} />, container);
-ReactDOM.render(<Component data={mydata} />, container);
-ReactDOM.render(<Component data={mydata} />, container);
-```
-
-In this case, the answer is "2". React calls `componentWillReceiveProps` twice (once for each of the two updates). Both times, the value of "drinks" is printed (ie. the props didn’t change).
-
-To understand why, we need to think about what _could_ have happened. The data _could_ have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:
-
-```js
-var mydata = {bar: 'drinks'};
-ReactDOM.render(<Component data={mydata} />, container);
-mydata.bar = 'food';
-ReactDOM.render(<Component data={mydata} />, container);
-mydata.bar = 'noise';
-ReactDOM.render(<Component data={mydata} />, container);
-```
-
-React has no way of knowing that the data didn’t change. Therefore, React needs to call `componentWillReceiveProps`, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).
-
-You might think that React could just use smarter checks for equality, but there are some issues with this idea:
-
-- The old `mydata` and the new `mydata` are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).
-- The `mydata` object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.
-- The `mydata` object might contain references to objects which are re-instantiated during the parent's render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.
-
-Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call `componentWillReceiveProps` (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.
-
-As a result, your implementation of `componentWillReceiveProps` MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your `componentWillReceiveProps` code needs to check to see if the props actually changed.

beta/src/content/blog/2016/01/12/discontinuing-ie8-support.md

@@ -1,10 +0,0 @@
----
-title: 'Discontinuing IE 8 Support in React DOM'
-author: [sophiebits]
----
-
-Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn't have to worry about most browser bugs.
-
-Today, Microsoft [discontinued support for older versions of IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). Starting with React v15, we're discontinuing React DOM's support for IE 8. We've heard that most React DOM apps already don't support old versions of Internet Explorer, so this shouldn't affect many people. This change will help us develop faster and make React DOM even better. (We won't actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)
-
-React DOM will continue to support IE 9 and above for the foreseeable future.

beta/src/content/blog/2016/02/19/new-versioning-scheme.md

@@ -1,60 +0,0 @@
----
-title: 'New Versioning Scheme'
-author: [sebmarkbage]
----
-
-Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: **15.0.0**
-
-This change shouldn't materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won't have to wait as long to take advantage of improvements to React. Plus, if you're a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don't need to leave anyone behind.
-
-The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
-
-## Bring Everyone Along {/*bring-everyone-along*/}
-
-React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
-
-<img src="/images/blog/versioning-1.png" width={403} />
-
-Therefore it is important that we don't just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.
-
-<img src="/images/blog/versioning-poll.png" width={596} />
-
-## Introducing Minor Releases {/*introducing-minor-releases*/}
-
-Ideally everyone could just depend on the latest version of React all the time.
-
-<img src="/images/blog/versioning-2.png" width={463} />
-
-We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.
-
-<img src="/images/blog/versioning-3.png" width={503} />
-
-That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
-
-## What Happened to 1.0.0? {/*what-happened-to-100*/}
-
-Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
-
-## Breaking Changes {/*breaking-changes*/}
-
-Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
-
-We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) for common patterns to make automatic upgrades of your codebase easier.
-
-Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
-
-## Avoiding The Major Cliff {/*avoiding-the-major-cliff*/}
-
-If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
-
-<img src="/images/blog/versioning-4.png" width={498} />
-
-Worst case, you revert back to 15.1.0 for your application. Since you'll want to use your component, you might also revert that one.
-
-<img src="/images/blog/versioning-5.png" width={493} />
-
-Of course, Ryan and Jed think the same way. If we're not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.
-
-Therefore, we're committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.
-
-<img src="/images/blog/versioning-6.png" width={493} />

beta/src/content/blog/2016/03/07/react-v15-rc1.md

@@ -1,91 +0,0 @@
----
-title: 'React v15.0 Release Candidate'
-author: [zpao]
----
-
-Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!
-
-But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
-
-Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
-
-## Upgrade Guide {/*upgrade-guide*/}
-
-Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
-
-If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases.
-
-See the changelog below for more details.
-
-## Installation {/*installation*/}
-
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
-
-- `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1`
-
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
-
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
-
-- **React**  
-  Dev build with warnings: https://fb.me/react-15.0.0-rc.1.js  
-  Minified build for production: https://fb.me/react-15.0.0-rc.1.min.js
-- **React with Add-Ons**  
-  Dev build with warnings: https://fb.me/react-with-addons-15.0.0-rc.1.js  
-  Minified build for production: https://fb.me/react-with-addons-15.0.0-rc.1.min.js
-- **React DOM** (include React in the page before React DOM)  
-  Dev build with warnings: https://fb.me/react-dom-15.0.0-rc.1.js  
-  Minified build for production: https://fb.me/react-dom-15.0.0-rc.1.min.js
-
-## Changelog {/*changelog*/}
-
-### Major changes {/*major-changes*/}
-
-- #### `document.createElement` is in and `data-reactid` is out
-
-  There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
-
-- #### No more extra `<span>`s
-
-  Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. Eg, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
-
-- #### Rendering `null` now uses comment nodes
-
-  We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there's a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
-
-- #### Improved SVG support
-
-  All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
-
-### Breaking changes {/*breaking-changes*/}
-
-It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
-
-These deprecations were introduced in v0.14 with a warning and the APIs are now removed.
-
-- Deprecated APIs removed from `React`, specifically `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`.
-- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
-- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
-
-### New deprecations, introduced with a warning {/*new-deprecations-introduced-with-a-warning*/}
-
-Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
-
-- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
-
-### New helpful warnings {/*new-helpful-warnings*/}
-
-- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
-- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{width: '300'}}`. (Unitless _number_ values like `width: 300` are unchanged.)
-- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
-- Elements will now warn when attempting to read `ref` and `key` from the props.
-- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
-
-### Notable bug fixes {/*notable-bug-fixes*/}
-
-- Fixed multiple small memory leaks
-- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
-- React DOM now supports the `cite` and `profile` HTML attributes.
-- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
-- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
-- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.