We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
+
+
+
React Hackathon Winner
+
Alex Swan implemented 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 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.
+
Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:
+
+
+
Build components, not templates
+
Re-render the whole app on every update
+
Virtual DOM
+
+
+
The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:
+
+
+
Pump - Clojure bindings for React
+
Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
Ross Allen working at Mesosphere combined 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
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.
+
+
+
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.
We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
+
+
+
React Hackathon Winner
+
Alex Swan implemented 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 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.
+
Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:
+
+
+
Build components, not templates
+
Re-render the whole app on every update
+
Virtual DOM
+
+
+
The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:
+
+
+
Pump - Clojure bindings for React
+
Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
Ross Allen working at Mesosphere combined 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
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.
+
+
+
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.
Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.
-
-
This gem has 2 primary purposes:
-
-
-
To package react.js in a way that's easy to use and easy to update.
-
To allow you to write JSX without an external build step to transform that into JS.
-
-
Packaging react.js
-
To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:
-
# config/environments/development.rb
-
-MyApp::Application.configuredo
- config.react.variant=:development
- # use :production in production.rb
-end
-
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.
react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
-
Installation
-
Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.
Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.
+
+
This gem has 2 primary purposes:
+
+
+
To package react.js in a way that's easy to use and easy to update.
+
To allow you to write JSX without an external build step to transform that into JS.
+
+
Packaging react.js
+
To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:
+
# config/environments/development.rb
+
+MyApp::Application.configuredo
+ config.react.variant=:development
+ # use :production in production.rb
+end
+
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.
react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
+
Installation
+
Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.
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!!!"
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.
-
-
-
React Snippets
-
Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.
JSFiddle: 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.
Gist: 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: This example is doing everything -- including the IO -- inside of a single React component.
-
Gist: 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.
JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
-
-
-
Introduction to React Screencast
-
Pete Hunt recorded himself implementing a simple <Blink> tag in React.
-
-
-
Snake in React
-
Tom Occhino implemented Snake in 150 lines with 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!!!"
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.
+
+
+
React Snippets
+
Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.
JSFiddle: 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.
Gist: 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: This example is doing everything -- including the IO -- inside of a single React component.
+
Gist: 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.
JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
+
+
+
Introduction to React Screencast
+
Pete Hunt recorded himself implementing a simple <Blink> tag in React.
+
+
+
Snake in React
+
Tom Occhino implemented Snake in 150 lines with React.
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
-
It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his 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:
-
Pimp my Backbone.View (by replacing it with React)
-
Paul Seiffert 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.
Mario Mueller 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.
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.
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
+
It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his 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:
+
Pimp my Backbone.View (by replacing it with React)
+
Paul Seiffert 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.
Mario Mueller 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.
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.
diff --git a/docs/OUTLINE.html b/docs/OUTLINE.html
index cb70387baf..0d35e617ff 100644
--- a/docs/OUTLINE.html
+++ b/docs/OUTLINE.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/component-api.html b/docs/component-api.html
index d58f7b69c3..ccf6ec7a40 100644
--- a/docs/component-api.html
+++ b/docs/component-api.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/component-specs.html b/docs/component-specs.html
index a80c9d916b..058763e7d1 100644
--- a/docs/component-specs.html
+++ b/docs/component-specs.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/displaying-data.html b/docs/displaying-data.html
index 79e5b3310f..08aebeb8e3 100644
--- a/docs/displaying-data.html
+++ b/docs/displaying-data.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/dom-differences.html b/docs/dom-differences.html
index f7b3ebae7b..7dccf0f7b7 100644
--- a/docs/dom-differences.html
+++ b/docs/dom-differences.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/events.html b/docs/events.html
index 25ec9d2b7d..1ae1717dea 100644
--- a/docs/events.html
+++ b/docs/events.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/examples.html b/docs/examples.html
index a717e7e5cc..5a0e1e6dd1 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/forms.html b/docs/forms.html
index 39b5604fdf..f54e80450d 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 7f758a155e..8e1f3e5b06 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html
index bdfd22c233..9bbedf902d 100644
--- a/docs/interactivity-and-dynamic-uis.html
+++ b/docs/interactivity-and-dynamic-uis.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/jsx-gotchas.html b/docs/jsx-gotchas.html
index 47b05ac956..637a0aed3a 100644
--- a/docs/jsx-gotchas.html
+++ b/docs/jsx-gotchas.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html
index 0f85dcb826..09ba02546e 100644
--- a/docs/jsx-in-depth.html
+++ b/docs/jsx-in-depth.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/more-about-refs.html b/docs/more-about-refs.html
index f2e919e533..d06756daa2 100644
--- a/docs/more-about-refs.html
+++ b/docs/more-about-refs.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/multiple-components.html b/docs/multiple-components.html
index 5531931bf9..e97944035b 100644
--- a/docs/multiple-components.html
+++ b/docs/multiple-components.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/reusable-components.html b/docs/reusable-components.html
index 90cfe94e8d..3ecee62079 100644
--- a/docs/reusable-components.html
+++ b/docs/reusable-components.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/tags-and-attributes.html b/docs/tags-and-attributes.html
index 6d66f0d96f..b3a9022293 100644
--- a/docs/tags-and-attributes.html
+++ b/docs/tags-and-attributes.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html
index f3400e4541..f25e8a8c97 100644
--- a/docs/tooling-integration.html
+++ b/docs/tooling-integration.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/top-level-api.html b/docs/top-level-api.html
index 46b28a3f4a..8acc8e0d2b 100644
--- a/docs/top-level-api.html
+++ b/docs/top-level-api.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 520e6446e2..97c8309554 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/why-react.html b/docs/why-react.html
index ab554efe5a..b6932ad3ba 100644
--- a/docs/why-react.html
+++ b/docs/why-react.html
@@ -10,6 +10,7 @@
+
diff --git a/docs/working-with-the-browser.html b/docs/working-with-the-browser.html
index c7ee4613e6..52bce54fc0 100644
--- a/docs/working-with-the-browser.html
+++ b/docs/working-with-the-browser.html
@@ -10,6 +10,7 @@
+
diff --git a/downloads.html b/downloads.html
index a0e4135654..c163cb4a74 100644
--- a/downloads.html
+++ b/downloads.html
@@ -10,6 +10,7 @@
+
diff --git a/downloads/react-0.5.0-alpha.zip b/downloads/react-0.5.0-alpha.zip
new file mode 100644
index 0000000000..ea3a38e400
Binary files /dev/null and b/downloads/react-0.5.0-alpha.zip differ
diff --git a/feed.xml b/feed.xml
index 2159a3a946..995ace9bb0 100644
--- a/feed.xml
+++ b/feed.xml
@@ -6,6 +6,91 @@
http://facebook.github.io/react
+
+ Community Round-up #9
+ <p>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.</p>
+
+<p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
+<h2 id="react-hackathon-winner">React Hackathon Winner</h2>
+<p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
+
+<blockquote>
+<p>The game itself is pretty simple. People join the "room" by going to <a href="(http://qu.izti.me/">http://qu.izti.me</a> 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.</p>
+
+<p>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="/react/img/blog/quiztime.png" alt=""></a></figure></p>
+
+<p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
+</blockquote>
+<h2 id="jsconf-eu-talk-rethinking-best-practices">JSConf EU Talk: Rethinking Best Practices</h2>
+<p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
+
+<ol>
+<li>Build <strong>components</strong>, not templates</li>
+<li>Re-render the whole app on every update</li>
+<li>Virtual DOM</li>
+</ol>
+
+<p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete's slides:</p>
+
+<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
+<h2 id="pump---clojure-bindings-for-react">Pump - Clojure bindings for React</h2>
+<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.</p>
+<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
+ <span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
+ <span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
+
+<span class="p">(</span><span class="n">defr</span> <span class="no">Component</span>
+ <span class="ss">:get</span><span class="o">-</span><span class="n">initial</span><span class="o">-</span><span class="n">state</span> <span class="c1">#(identity {:some-value ""})</span>
+
+ <span class="o">[</span><span class="n">component</span> <span class="n">props</span> <span class="n">state</span><span class="o">]</span>
+
+ <span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">"test"</span><span class="p">}</span> <span class="s2">"hello"</span><span class="o">]</span><span class="p">)</span>
+</code></pre></div>
+<p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
+<h2 id="jsxhint">JSXHint</h2>
+<p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Condé Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
+
+<blockquote>
+<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
+<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g jsxhint
+</code></pre></div>
+<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
+</blockquote>
+<h2 id="turbo-react">Turbo React</h2>
+<p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
+
+<blockquote>
+<p>"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.</p>
+
+<p>The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.</p>
+
+<p>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="/react/img/blog/turboreact.png" alt=""></a></figure></p>
+
+<p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
+</blockquote>
+<h2 id="reactive-table">Reactive Table</h2>
+<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
+
+<blockquote>
+<p>React is all about components. So let's build one.</p>
+
+<p>Let's call it Table (to avoid any confusion what the component is about).</p>
+<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
+ <span class="cm">/*stuff goeth here*/</span>
+<span class="p">});</span>
+</code></pre></div>
+<p>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.</p>
+
+<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
+</blockquote>
+
+ 2013-10-03T00:00:00-07:00
+ http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html
+ http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html
+
+
Community Round-up #8<p>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.</p>
@@ -507,73 +592,5 @@ If you were using React without JSX previously, your code should still work.<
http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
-
- Community Round-up #4
- <p>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.</p>
-<h2 id="khan-academy">Khan Academy</h2>
-<p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p>
-
-<blockquote>
-<p>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.</p>
-
-<p>"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!!!"</p>
-
-<p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p>
-</blockquote>
-
-<p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p>
-
-<blockquote>
-<p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
-<figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p>
-</blockquote>
-<h2 id="react-snippets">React Snippets</h2>
-<p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/reusable-components.html">Mixins</a> and <a href="/react/docs/working-with-the-browser.html">Lifecycle Methods</a>.</p>
-
-<blockquote>
-<p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p>
-
-<ul>
-<li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: 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.</li>
-</ul>
-
-<p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p>
-
-<ul>
-<li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li>
-<li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li>
-</ul>
-
-<p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p>
-
-<ul>
-<li><a href="https://gist.github.com/zpao/5686416">Gist</a>: 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.</li>
-<li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li>
-<li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: 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.</li>
-</ul>
-
-<p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p>
-
-<ul>
-<li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: 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().</li>
-</ul>
-</blockquote>
-<h2 id="introduction-to-react-screencast">Introduction to React Screencast</h2>
-<p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p>
-
-<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
-<h2 id="snake-in-react">Snake in React</h2>
-<p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p>
-
-<blockquote>
-<p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a>
-<figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p>
-</blockquote>
-
- 2013-07-03T00:00:00-07:00
- http://facebook.github.io/react/blog/2013/07/03/community-roundup-4.html
- http://facebook.github.io/react/blog/2013/07/03/community-roundup-4.html
-
-
diff --git a/img/blog/quiztime.png b/img/blog/quiztime.png
new file mode 100644
index 0000000000..fcb7d576f2
Binary files /dev/null and b/img/blog/quiztime.png differ
diff --git a/img/blog/react-hackathon.jpg b/img/blog/react-hackathon.jpg
new file mode 100644
index 0000000000..3c3326611f
Binary files /dev/null and b/img/blog/react-hackathon.jpg differ
diff --git a/img/blog/turboreact.png b/img/blog/turboreact.png
new file mode 100644
index 0000000000..56cc61fde6
Binary files /dev/null and b/img/blog/turboreact.png differ
diff --git a/index.html b/index.html
index 76858e4f5e..14b6c78438 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
+
diff --git a/jsx-compiler.html b/jsx-compiler.html
index 331d4e162f..6a42bc9446 100644
--- a/jsx-compiler.html
+++ b/jsx-compiler.html
@@ -10,6 +10,7 @@
+
diff --git a/support.html b/support.html
index 5c2f61c747..aef0140a71 100644
--- a/support.html
+++ b/support.html
@@ -10,6 +10,7 @@
+
+ React
+ 
