From f414b96c033fce2afea728cf670a7ba4bb5d05b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 5 Feb 2014 16:09:46 -0800 Subject: [PATCH] Community roundup 15 --- blog/2013/06/02/jsfiddle-integration.html | 4 +- blog/2013/06/05/why-react.html | 4 +- blog/2013/06/12/community-roundup.html | 4 +- blog/2013/06/19/community-roundup-2.html | 4 +- blog/2013/06/21/react-v0-3-3.html | 4 +- blog/2013/06/27/community-roundup-3.html | 4 +- .../07/02/react-v0-4-autobind-by-default.html | 4 +- blog/2013/07/03/community-roundup-4.html | 4 +- ...-4-prop-validation-and-default-values.html | 4 +- blog/2013/07/17/react-v0-4-0.html | 4 +- blog/2013/07/23/community-roundup-5.html | 4 +- blog/2013/07/26/react-v0-4-1.html | 4 +- .../use-react-and-jsx-in-ruby-on-rails.html | 4 +- blog/2013/08/05/community-roundup-6.html | 4 +- ...-react-and-jsx-in-python-applications.html | 4 +- blog/2013/08/26/community-roundup-7.html | 4 +- blog/2013/09/24/community-roundup-8.html | 4 +- blog/2013/10/03/community-roundup-9.html | 4 +- blog/2013/10/16/react-v0.5.0.html | 4 +- blog/2013/10/29/react-v0-5-1.html | 4 +- blog/2013/11/05/thinking-in-react.html | 4 +- blog/2013/11/06/community-roundup-10.html | 4 +- blog/2013/11/18/community-roundup-11.html | 4 +- blog/2013/12/18/react-v0.5.2-v0.4.2.html | 4 +- blog/2013/12/19/react-v0.8.0.html | 4 +- blog/2013/12/23/community-roundup-12.html | 4 +- blog/2013/12/30/community-roundup-13.html | 4 +- .../01/02/react-chrome-developer-tools.html | 4 +- blog/2014/01/06/community-roundup-14.html | 6 +- blog/2014/02/05/community-roundup-15.html | 236 +++ blog/all.html | 2 + blog/index.html | 168 +- blog/page2/index.html | 75 +- blog/page3/index.html | 67 +- blog/page4/index.html | 87 +- blog/page5/index.html | 69 +- blog/page6/index.html | 28 +- css/react.css | 2 +- docs/reusable-components.html | 8 +- feed.xml | 135 +- js/es5-sham.js | 446 ------ js/es5-shim.js | 1360 ----------------- support.html | 2 +- 43 files changed, 719 insertions(+), 2084 deletions(-) create mode 100644 blog/2014/02/05/community-roundup-15.html delete mode 100644 js/es5-sham.js delete mode 100644 js/es5-shim.js diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index cf70c564ab..6136e20474 100644 --- a/blog/2013/06/02/jsfiddle-integration.html +++ b/blog/2013/06/02/jsfiddle-integration.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/06/05/why-react.html b/blog/2013/06/05/why-react.html index ed92265615..a45b875b3a 100644 --- a/blog/2013/06/05/why-react.html +++ b/blog/2013/06/05/why-react.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/06/12/community-roundup.html b/blog/2013/06/12/community-roundup.html index 3eeb9e0145..12cf4a42ae 100644 --- a/blog/2013/06/12/community-roundup.html +++ b/blog/2013/06/12/community-roundup.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/06/19/community-roundup-2.html b/blog/2013/06/19/community-roundup-2.html index df0b934c9f..1cc53239a7 100644 --- a/blog/2013/06/19/community-roundup-2.html +++ b/blog/2013/06/19/community-roundup-2.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/06/21/react-v0-3-3.html b/blog/2013/06/21/react-v0-3-3.html index fe206bfc56..892689eabb 100644 --- a/blog/2013/06/21/react-v0-3-3.html +++ b/blog/2013/06/21/react-v0-3-3.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index 2985d849c9..35be9275c5 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/02/react-v0-4-autobind-by-default.html b/blog/2013/07/02/react-v0-4-autobind-by-default.html index 6988609e90..b6004b5894 100644 --- a/blog/2013/07/02/react-v0-4-autobind-by-default.html +++ b/blog/2013/07/02/react-v0-4-autobind-by-default.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/03/community-roundup-4.html b/blog/2013/07/03/community-roundup-4.html index a2b7a5b65e..bd4fba3130 100644 --- a/blog/2013/07/03/community-roundup-4.html +++ b/blog/2013/07/03/community-roundup-4.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html index 89e0277e2e..c7e5e68d7d 100644 --- a/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html +++ b/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/17/react-v0-4-0.html b/blog/2013/07/17/react-v0-4-0.html index 974c5bc7f8..9cebd48b2c 100644 --- a/blog/2013/07/17/react-v0-4-0.html +++ b/blog/2013/07/17/react-v0-4-0.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html index 27a30846c8..e670402d3e 100644 --- a/blog/2013/07/23/community-roundup-5.html +++ b/blog/2013/07/23/community-roundup-5.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/26/react-v0-4-1.html b/blog/2013/07/26/react-v0-4-1.html index 345c305f4c..7063baadf4 100644 --- a/blog/2013/07/26/react-v0-4-1.html +++ b/blog/2013/07/26/react-v0-4-1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html index 783391a831..545687d0ea 100644 --- a/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html +++ b/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html index ce7c7bcb5f..8927a72ab8 100644 --- a/blog/2013/08/05/community-roundup-6.html +++ b/blog/2013/08/05/community-roundup-6.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html index 8de4446fbc..45e8a06879 100644 --- a/blog/2013/08/19/use-react-and-jsx-in-python-applications.html +++ b/blog/2013/08/19/use-react-and-jsx-in-python-applications.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html index ede3293e54..75bd6dceea 100644 --- a/blog/2013/08/26/community-roundup-7.html +++ b/blog/2013/08/26/community-roundup-7.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/09/24/community-roundup-8.html b/blog/2013/09/24/community-roundup-8.html index e1f4ffc44e..cc9efb6dee 100644 --- a/blog/2013/09/24/community-roundup-8.html +++ b/blog/2013/09/24/community-roundup-8.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html index c8e9821591..29488bcb7d 100644 --- a/blog/2013/10/03/community-roundup-9.html +++ b/blog/2013/10/03/community-roundup-9.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/10/16/react-v0.5.0.html b/blog/2013/10/16/react-v0.5.0.html index a9b4f3bcbf..29714f6255 100644 --- a/blog/2013/10/16/react-v0.5.0.html +++ b/blog/2013/10/16/react-v0.5.0.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/10/29/react-v0-5-1.html b/blog/2013/10/29/react-v0-5-1.html index 0e9f12912f..4540c0171c 100644 --- a/blog/2013/10/29/react-v0-5-1.html +++ b/blog/2013/10/29/react-v0-5-1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/11/05/thinking-in-react.html b/blog/2013/11/05/thinking-in-react.html index b15e3f8bb8..9239f605a2 100644 --- a/blog/2013/11/05/thinking-in-react.html +++ b/blog/2013/11/05/thinking-in-react.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html index 951ed74d10..e5361d6871 100644 --- a/blog/2013/11/06/community-roundup-10.html +++ b/blog/2013/11/06/community-roundup-10.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/11/18/community-roundup-11.html b/blog/2013/11/18/community-roundup-11.html index 20dfca7e13..b48d129de3 100644 --- a/blog/2013/11/18/community-roundup-11.html +++ b/blog/2013/11/18/community-roundup-11.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/12/18/react-v0.5.2-v0.4.2.html b/blog/2013/12/18/react-v0.5.2-v0.4.2.html index 81b37864d6..9a6f7faa85 100644 --- a/blog/2013/12/18/react-v0.5.2-v0.4.2.html +++ b/blog/2013/12/18/react-v0.5.2-v0.4.2.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/12/19/react-v0.8.0.html b/blog/2013/12/19/react-v0.8.0.html index 76e1e2770b..ab11bf42d5 100644 --- a/blog/2013/12/19/react-v0.8.0.html +++ b/blog/2013/12/19/react-v0.8.0.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/12/23/community-roundup-12.html b/blog/2013/12/23/community-roundup-12.html index f552f1399e..2536b80e8c 100644 --- a/blog/2013/12/23/community-roundup-12.html +++ b/blog/2013/12/23/community-roundup-12.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2013/12/30/community-roundup-13.html b/blog/2013/12/30/community-roundup-13.html index 23e36149ce..379cde1614 100644 --- a/blog/2013/12/30/community-roundup-13.html +++ b/blog/2013/12/30/community-roundup-13.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/01/02/react-chrome-developer-tools.html b/blog/2014/01/02/react-chrome-developer-tools.html index 5153942da2..85621da246 100644 --- a/blog/2014/01/02/react-chrome-developer-tools.html +++ b/blog/2014/01/02/react-chrome-developer-tools.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/01/06/community-roundup-14.html b/blog/2014/01/06/community-roundup-14.html index fe511e8062..8b157b6957 100644 --- a/blog/2014/01/06/community-roundup-14.html +++ b/blog/2014/01/06/community-roundup-14.html @@ -63,6 +63,8 @@

Recent posts

@@ -159,7 +159,7 @@ rails s

Read the full post...

Random Tweet #

-
+
diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html new file mode 100644 index 0000000000..7bfde071b2 --- /dev/null +++ b/blog/2014/02/05/community-roundup-15.html @@ -0,0 +1,236 @@ + + + + + + + React | Community Round-up #15 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + +
+
+ + + +
+
+
+

Recent posts

+ +
+
+ +
+

Community Round-up #15

+

February 5, 2014 by Jonas Gebhardt

+ +
+ +
+

Interest in React seems to have surged ever since David Nolen (@swannodette)'s introduction of Om in his post "The Future of Javascript MVC Frameworks".

+ +

In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.

+

"React: Another Level of Indirection" #

+

To start things off, Eric Normand (@ericnormand) of LispCast makes the case for React from a general functional programming standpoint 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...

+
+

Reagent: Minimalistic React for ClojureScript #

+

Dan Holmsand (@holmsand) created 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...

+
+

Functional DOM programming #

+

React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt (@floydophone) explores how one would go about writing web apps in a functional manner. 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...

+
+ +

Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):

+ + +

Kioo: Separating markup and logic #

+

Creighton Kirkendall created 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:

+
<!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>
+
...
+
+(defn my-nav-item [[caption func]]
+  (kioo/component "main.html" [:.nav-item]
+    {[:a] (do-> (content caption)
+                (set-attr :onClick func))}))
+
+(defn my-header [heading nav-elms]
+  (kioo/component "main.html" [:header]
+    {[:h1] (content heading)
+     [:ul] (content (map my-nav-item nav-elms))}))
+
+(defn my-page [data]
+  (kioo/component "main.html"
+    {[:header] (substitute (my-header (:heading data)
+                                      (:navigation data)))
+     [:.content] (content (:content data))}))
+
+(def app-state (atom {:heading    "main"
+                      :content    "Hello World"
+                      :navigation [["home" #(js/alert %)]
+                                   ["next" #(js/alert %)]]}))
+
+(om/root app-state my-page (.-body js/document))
+

Om #

+

In an interview with David Nolen, Tom Coupland (@tcoupland) of InfoQ provides a nice summary of recent developments around Om ("Om: Enhancing Facebook's React with Immutability").

+ +
+

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...

+
+

A slice of React, ClojureScript and Om #

+

Fredrik Dyrkell (@lexicallyscoped) rewrote part of the React tutorial in both ClojureScript and Om, 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...

+
+ +

In a separate post, Dyrkell breaks down how to build a binary clock component in Om.

+ +

[Demo] [Code]

+

Time Travel: Implementing undo in Om #

+

David Nolen shows how to leverage immutable data structures to add global undo functionality to an app – using just 13 lines of ClojureScript.

+

A Step-by-Step Om Walkthrough #

+

Josh Lehman took the time to create an extensive step-by-step walkthrough of the React tutorial in Om. The well-documented source is on github.

+

Omkara #

+

brendanyounger created omkara, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.

+

Om Experience Report #

+

Adam Solove (@asolove) dives a little deeper into Om, React and ClojureScript. He shares some helpful tips he gathered while building his CartoCrayon prototype.

+

Not-so-random Tweet #

+
+ +
+ +
+
+
+
+ + +
+
A Facebook & Instagram collaboration.
+
© 2014 Facebook Inc.
+
+
+
+ + + + diff --git a/blog/all.html b/blog/all.html index a9b99a6978..950fb83e8c 100644 --- a/blog/all.html +++ b/blog/all.html @@ -61,6 +61,8 @@

All Posts

+

Community Round-up #15 on February 5, 2014 by Jonas Gebhardt

+

Community Round-up #14 on January 6, 2014 by Vjeux

React Chrome Developer Tools on January 2, 2014 by Sebastian Markbåge

diff --git a/blog/index.html b/blog/index.html index 331562292c..551970c563 100644 --- a/blog/index.html +++ b/blog/index.html @@ -63,6 +63,8 @@

Recent posts

@@ -90,6 +90,118 @@
+
+

Community Round-up #15

+

February 5, 2014 by Jonas Gebhardt

+
+
+

Interest in React seems to have surged ever since David Nolen (@swannodette)'s introduction of Om in his post "The Future of Javascript MVC Frameworks".

+ +

In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.

+

"React: Another Level of Indirection" #

+

To start things off, Eric Normand (@ericnormand) of LispCast makes the case for React from a general functional programming standpoint 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...

+
+

Reagent: Minimalistic React for ClojureScript #

+

Dan Holmsand (@holmsand) created 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...

+
+

Functional DOM programming #

+

React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt (@floydophone) explores how one would go about writing web apps in a functional manner. 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...

+
+ +

Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):

+ + +

Kioo: Separating markup and logic #

+

Creighton Kirkendall created 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:

+
<!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>
+
...
+
+(defn my-nav-item [[caption func]]
+  (kioo/component "main.html" [:.nav-item]
+    {[:a] (do-> (content caption)
+                (set-attr :onClick func))}))
+
+(defn my-header [heading nav-elms]
+  (kioo/component "main.html" [:header]
+    {[:h1] (content heading)
+     [:ul] (content (map my-nav-item nav-elms))}))
+
+(defn my-page [data]
+  (kioo/component "main.html"
+    {[:header] (substitute (my-header (:heading data)
+                                      (:navigation data)))
+     [:.content] (content (:content data))}))
+
+(def app-state (atom {:heading    "main"
+                      :content    "Hello World"
+                      :navigation [["home" #(js/alert %)]
+                                   ["next" #(js/alert %)]]}))
+
+(om/root app-state my-page (.-body js/document))
+

Om #

+

In an interview with David Nolen, Tom Coupland (@tcoupland) of InfoQ provides a nice summary of recent developments around Om ("Om: Enhancing Facebook's React with Immutability").

+ +
+

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...

+
+

A slice of React, ClojureScript and Om #

+

Fredrik Dyrkell (@lexicallyscoped) rewrote part of the React tutorial in both ClojureScript and Om, 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...

+
+ +

In a separate post, Dyrkell breaks down how to build a binary clock component in Om.

+ +

[Demo] [Code]

+

Time Travel: Implementing undo in Om #

+

David Nolen shows how to leverage immutable data structures to add global undo functionality to an app – using just 13 lines of ClojureScript.

+

A Step-by-Step Om Walkthrough #

+

Josh Lehman took the time to create an extensive step-by-step walkthrough of the React tutorial in Om. The well-documented source is on github.

+

Omkara #

+

brendanyounger created omkara, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.

+

Om Experience Report #

+

Adam Solove (@asolove) dives a little deeper into Om, React and ClojureScript. He shares some helpful tips he gathered while building his CartoCrayon prototype.

+

Not-so-random Tweet #

+
+ +
+
+

Community Round-up #14

January 6, 2014 by Vjeux

@@ -159,7 +271,7 @@ rails s

Read the full post...

Random Tweet #

-
+
@@ -364,56 +476,6 @@ componentDidUpdate: function() { -
-

React v0.8

-

December 19, 2013 by Paul O'Shannessy

-
-
-

I'll start by answering the obvious question:

- -
-

What happened to 0.6 and 0.7?

-
- -

It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our react-tools module which includes React, but when browserifying that ends up packaging all of esprima and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.

- -

We talked with Jeff Barczewski 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 if you're writing a lot of asynchronous code. In order to not break all of react's current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our react module like you would use the previous package.

- -

In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.

- -

We hope that by releasing react on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!

-

Changelog #

React #

-
    -
  • Added support for more attributes: - -
      -
    • rows & cols for <textarea>
      • -
    • defer & async for <script>
      • -
    • loop for <audio> & <video>
      • -
    • autoCorrect for form fields (a non-standard attribute only supported by mobile WebKit)
      • -
    • -
  • Improved error messages
    • -
  • Fixed Selection events in IE11
    • -
  • Added onContextMenu events
    • -
-

React with Addons #

-
    -
  • Fixed bugs with TransitionGroup when children were undefined
    • -
  • Added support for onTransition
    • -
-

react-tools #

-
    -
  • Upgraded jstransform and esprima-fb
    • -
-

JSXTransformer #

-
    -
  • Added support for use in IE8
    • -
  • Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
    • -
- -
-
- @@ -90,6 +90,56 @@
+
+

React v0.8

+

December 19, 2013 by Paul O'Shannessy

+
+
+

I'll start by answering the obvious question:

+ +
+

What happened to 0.6 and 0.7?

+
+ +

It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our react-tools module which includes React, but when browserifying that ends up packaging all of esprima and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.

+ +

We talked with Jeff Barczewski 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 if you're writing a lot of asynchronous code. In order to not break all of react's current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our react module like you would use the previous package.

+ +

In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.

+ +

We hope that by releasing react on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!

+

Changelog #

React #

+
    +
  • Added support for more attributes: + +
      +
    • rows & cols for <textarea>
      • +
    • defer & async for <script>
      • +
    • loop for <audio> & <video>
      • +
    • autoCorrect for form fields (a non-standard attribute only supported by mobile WebKit)
      • +
    • +
  • Improved error messages
    • +
  • Fixed Selection events in IE11
    • +
  • Added onContextMenu events
    • +
+

React with Addons #

+
    +
  • Fixed bugs with TransitionGroup when children were undefined
    • +
  • Added support for onTransition
    • +
+

react-tools #

+
    +
  • Upgraded jstransform and esprima-fb
    • +
+

JSXTransformer #

+
    +
  • Added support for use in IE8
    • +
  • Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
    • +
+ +
+
+

React v0.5.2, v0.4.2

December 18, 2013 by Paul O'Shannessy

@@ -452,27 +502,6 @@ Is this some sort of template language? Specifically no. This might have been th
-
-

React v0.5.1

-

October 29, 2013 by Paul O'Shannessy

-
-
-

This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to Ben Alpert, Andrey Popp, and Laurence Rowe for their contributions!

-

Changelog #

React #

-
    -
  • Fixed bug with <input type="range"> and selection events.
    • -
  • Fixed bug with selection and focus.
    • -
  • Made it possible to unmount components from the document root.
    • -
  • Fixed bug for disabled attribute handling on non-<input> elements.
    • -
-

React with Addons #

-
    -
  • Fixed bug with transition and animation event detection.
    • -
- -
-
- @@ -90,6 +90,27 @@
+
+

React v0.5.1

+

October 29, 2013 by Paul O'Shannessy

+
+
+

This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to Ben Alpert, Andrey Popp, and Laurence Rowe for their contributions!

+

Changelog #

React #

+
    +
  • Fixed bug with <input type="range"> and selection events.
    • +
  • Fixed bug with selection and focus.
    • +
  • Made it possible to unmount components from the document root.
    • +
  • Fixed bug for disabled attribute handling on non-<input> elements.
    • +
+

React with Addons #

+
    +
  • Fixed bug with transition and animation event detection.
    • +
+ +
+
+

React v0.5

October 16, 2013 by Paul O'Shannessy

@@ -370,48 +391,6 @@
-
-

Use React and JSX in Python Applications

-

August 19, 2013 by Kunal Mehta

-
-
-

Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

-

Usage #

-

Transform your JSX files via the provided jsx module:

-
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:

-
from react import source
-
-# path_for raises IOError if the file doesn't exist.
-react_js = source.path_for('react.min.js')
-

Django #

-

PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:

-
PIPELINE_COMPILERS = (
-  'react.utils.pipeline.JSXCompiler',
-)
-

Installation #

-

PyReact is hosted on PyPI, and can be installed with pip:

-
$ pip install PyReact
-
-

Alternatively, add it into your requirements file:

-
PyReact==0.1.1
-
-

Dependencies: PyReact uses PyExecJS 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.

- -

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!

- -
-
- @@ -90,6 +90,48 @@
+
+

Use React and JSX in Python Applications

+

August 19, 2013 by Kunal Mehta

+
+
+

Today we're happy to announce the initial release of PyReact, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

+

Usage #

+

Transform your JSX files via the provided jsx module:

+
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:

+
from react import source
+
+# path_for raises IOError if the file doesn't exist.
+react_js = source.path_for('react.min.js')
+

Django #

+

PyReact includes a JSX compiler for django-pipeline. Add it to your project's pipeline settings like this:

+
PIPELINE_COMPILERS = (
+  'react.utils.pipeline.JSXCompiler',
+)
+

Installation #

+

PyReact is hosted on PyPI, and can be installed with pip:

+
$ pip install PyReact
+
+

Alternatively, add it into your requirements file:

+
PyReact==0.1.1
+
+

Dependencies: PyReact uses PyExecJS 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.

+ +

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!

+ +
+
+

Community Round-up #6

August 5, 2013 by Vjeux

@@ -322,47 +364,6 @@
-
-

React v0.4.0

-

July 17, 2013 by Paul O'Shannessy

-
-
-

Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!

- -

This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the Google Group, and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!

- -

React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.

- -

When you're ready, go download it!

-

React #

-
    -
  • 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...
    • -
  • Support for the key prop, which allows for finer control over reconciliation. Read the docs for details...
    • -
  • Removed React.autoBind. Read our blog post for details...
    • -
  • 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...
    • -
  • We've implemented an improved synthetic event system that conforms to the W3C spec.
    • -
  • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
    • -
-

JSX #

-
    -
  • Support for comment nodes <div>{/* this is a comment and won't be rendered */}</div>
    • -
  • Children are now transformed directly into arguments instead of being wrapped in an array -E.g. <div><Component1/><Component2/></div> is transformed into React.DOM.div(null, Component1(null), Component2(null)). -Previously this would be transformed into React.DOM.div(null, [Component1(null), Component2(null)]). -If you were using React without JSX previously, your code should still work.
    • -
-

react-tools #

-
    -
  • Fixed a number of bugs when transforming directories
    • -
  • No longer re-write require()s to be relative unless specified
    • -
- -
-
- @@ -90,6 +90,47 @@
+
+

React v0.4.0

+

July 17, 2013 by Paul O'Shannessy

+
+
+

Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!

+ +

This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the Google Group, and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!

+ +

React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.

+ +

When you're ready, go download it!

+

React #

+
    +
  • 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...
    • +
  • Support for the key prop, which allows for finer control over reconciliation. Read the docs for details...
    • +
  • Removed React.autoBind. Read our blog post for details...
    • +
  • 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...
    • +
  • We've implemented an improved synthetic event system that conforms to the W3C spec.
    • +
  • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
    • +
+

JSX #

+
    +
  • Support for comment nodes <div>{/* this is a comment and won't be rendered */}</div>
    • +
  • Children are now transformed directly into arguments instead of being wrapped in an array +E.g. <div><Component1/><Component2/></div> is transformed into React.DOM.div(null, Component1(null), Component2(null)). +Previously this would be transformed into React.DOM.div(null, [Component1(null), Component2(null)]). +If you were using React without JSX previously, your code should still work.
    • +
+

react-tools #

+
    +
  • Fixed a number of bugs when transforming directories
    • +
  • No longer re-write require()s to be relative unless specified
    • +
+ +
+
+

New in React v0.4: Prop Validation and Default Values

July 11, 2013 by Paul O'Shannessy

@@ -333,30 +374,6 @@
-
-

React v0.3.3

-

June 21, 2013 by Paul O'Shannessy

-
-
-

We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

-

react-tools #

-
    -
  • Upgrade Commoner so require statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of bin/jsx.
    • -
  • Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
    • -
  • Freeze our esprima dependency.
    • -
-

React #

-
    -
  • Allow reusing the same DOM node to render different components. e.g. React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode); will work now.
    • -
-

JSXTransformer #

-
    -
  • Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
    • -
- -
-
- @@ -90,6 +90,30 @@
+
+

React v0.3.3

+

June 21, 2013 by Paul O'Shannessy

+
+
+

We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

+

react-tools #

+
    +
  • Upgrade Commoner so require statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of bin/jsx.
    • +
  • Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
    • +
  • Freeze our esprima dependency.
    • +
+

React #

+
    +
  • Allow reusing the same DOM node to render different components. e.g. React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode); will work now.
    • +
+

JSXTransformer #

+
    +
  • Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
    • +
+ +
+
+

Community Round-up #2

June 19, 2013 by Vjeux

diff --git a/css/react.css b/css/react.css index e8c777066e..ce40b7fe2c 100644 --- a/css/react.css +++ b/css/react.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-left:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.jsxCompiler .playgroundError{padding:15px 20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right} +html{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:17px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#268bd2}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#637c84}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1;font-weight:bold}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{*zoom:1;background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:before,.nav-main:after{content:" ";display:table}.nav-main:after{clear:both}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px}.nav-main .nav-logo{background-image:url("../img/logo_small.png");vertical-align:middle}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-main .nav-logo{background-image:url("../img/logo_small@2x.png");background-size:38px 38px}}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin-left:20px}.nav-docs li{margin:0}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:400px}.marketing-row{*zoom:1;margin:50px 0}.marketing-row:before,.marketing-row:after{content:" ";display:table}.marketing-row:after{clear:both}.marketing-col{float:left;margin-left:40px;width:280px}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev{*zoom:1}.docs-nextprev:before,.docs-nextprev:after{content:" ";display:table}.docs-nextprev:after{clear:both}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{*zoom:1;padding-top:20px}.blogContent:before,.blogContent:after{content:" ";display:table}.blogContent:after{clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{*zoom:1;padding-top:20px}.documentationContent:before,.documentationContent:after{content:" ";display:table}.documentationContent:after{clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}.jsxCompiler .playgroundError{padding:15px 20px}.button{background:-webkit-linear-gradient( #9a9a9a,#646464);background:linear-gradient( #9a9a9a,#646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient( #77a3d2,#4783c2);background:linear-gradient( #77a3d2,#4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:650px}.nosidebar .inner-content{float:none;margin:0 auto}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, 'Courier New', Consolas, monospace;font-size:13px;line-height:20px}div.CodeMirror-linenumber:after{content:'.'}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}.cm-s-default span.cm-string-2{color:inherit}.playground{*zoom:1}.playground:before,.playground:after{content:" ";display:table}.playground:after{clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0}.highlight pre code{font-size:inherit}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id]{margin:auto;display:table} diff --git a/docs/reusable-components.html b/docs/reusable-components.html index 16f9fc5d15..578992bbe2 100644 --- a/docs/reusable-components.html +++ b/docs/reusable-components.html @@ -369,7 +369,7 @@

When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.

Prop Validation #

-

As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons propTypes is only checked in development mode. Here is an example documenting the different validators provided:

+

As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify propTypes. React.PropTypes exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, an error will be thrown. Here is an example documenting the different validators provided:

React.createClass({
   propTypes: {
     // You can declare that a prop is a specific JS primitive. By default, these
@@ -389,14 +389,14 @@
     // JS's instanceof operator.
     someClass: React.PropTypes.instanceOf(SomeClass),
 
-    // You can chain any of the above with isRequired to make sure a warning is
-    // shown if the prop isn't provided.
+    // You can chain any of the above with isRequired to make sure an error is
+    // thrown if the prop isn't provided.
     requiredFunc: React.PropTypes.func.isRequired
 
     // You can also specify a custom validator.
     customProp: function(props, propName, componentName) {
       if (!/matchme/.test(props[propName])) {
-        console.warn('Validation failed!');
+        throw new Error('Validation failed!')
       }
     }
   },
diff --git a/feed.xml b/feed.xml
index 2048a24fdc..fc60fe7e6c 100644
--- a/feed.xml
+++ b/feed.xml
@@ -6,6 +6,117 @@
 		http://facebook.github.io/react
 		
 		
+			
+				Community Round-up #15
+				<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)&#39;s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">&quot;The Future of Javascript MVC Frameworks&quot;</a>.</p>
+
+<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
+<h2><a class="anchor" name="react-another-level-of-indirection"></a>&quot;React: Another Level of Indirection&quot; <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
+<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React&#39;s &quot;Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript&quot;.</p>
+
+<blockquote>
+<p>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.</p>
+
+<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
+</blockquote>
+<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
+<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="http://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
+
+<blockquote>
+<p>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.</p>
+
+<p>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.</p>
+
+<p><a href="http://holmsand.github.io/reagent/">Check it out on Github...</a></p>
+</blockquote>
+<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
+<p>React&#39;s one-way data-binding naturally lends itself to a functional programming approach. Facebook&#39;s Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
+
+<blockquote>
+<p>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.</p>
+
+<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
+</blockquote>
+
+<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
+<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
+<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, 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.</p>
+
+<p>A basic example from github:</p>
+<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
+<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;body&gt;</span>
+    <span class="nt">&lt;header&gt;</span>
+      <span class="nt">&lt;h1&gt;</span>Header placeholder<span class="nt">&lt;/h1&gt;</span>
+      <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;navigation&quot;</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;nav-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Placeholder<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+      <span class="nt">&lt;/ul&gt;</span>
+    <span class="nt">&lt;/header&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</span>
+</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
+
+<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
+  <span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
+    <span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-&gt;</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
+                <span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
+
+<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
+  <span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
+    <span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
+     <span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
+
+<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
+  <span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span>
+    <span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
+                                      <span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
+     <span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
+
+<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span>    <span class="s">&quot;main&quot;</span>
+                      <span class="ss">:content</span>    <span class="s">&quot;Hello World&quot;</span>
+                      <span class="ss">:navigation</span> <span class="p">[[</span><span class="s">&quot;home&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
+                                   <span class="p">[</span><span class="s">&quot;next&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
+
+<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
+</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
+<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om (&quot;<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook&#39;s React with Immutability</a>&quot;).</p>
+
+<blockquote>
+<p>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.</p>
+
+<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
+</blockquote>
+<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
+<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
+
+<blockquote>
+<p>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.</p>
+
+<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
+</blockquote>
+
+<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
+
+<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
+<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
+<p>David Nolen shows how to leverage immutable data structures to <a href="http://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
+<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
+<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
+<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
+<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, 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.</p>
+<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
+<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
+<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
+<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>
+
+				2014-02-05T00:00:00-08:00
+				http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html
+				http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html
+			
+		
 			
 				Community Round-up #14
 				<p>The theme of this first round-up of 2014 is integration. I&#39;ve tried to assemble a list of articles and projects that use React in various environments.</p>
@@ -72,7 +183,7 @@ rails s
 <p><a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Read the full post...</a></p>
 </blockquote>
 <h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
-<figure><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></figure>
+<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>
 
 				2014-01-06T00:00:00-08:00
 				http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html
@@ -380,7 +491,7 @@ componentDidUpdate: function() {
 <h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
 <p><a href="https://github.com/brainkim">Brian Kim</a> 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>
 
-<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>
+<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>
 <h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
@@ -683,25 +794,5 @@ Is this some sort of template language? Specifically no. This might have been th
 				http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html
 			
 		
-			
-				React v0.5.1
-				<p>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 <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
-<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
-<ul>
-<li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
-<li>Fixed bug with selection and focus.</li>
-<li>Made it possible to unmount components from the document root.</li>
-<li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</li>
-</ul>
-<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
-<ul>
-<li>Fixed bug with transition and animation event detection.</li>
-</ul>
-
-				2013-10-29T00:00:00-07:00
-				http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html
-				http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html
-			
-		
 	
 
diff --git a/js/es5-sham.js b/js/es5-sham.js
deleted file mode 100644
index 20c9845975..0000000000
--- a/js/es5-sham.js
+++ /dev/null
@@ -1,446 +0,0 @@
-// Copyright 2009-2012 by contributors, MIT License
-// vim: ts=4 sts=4 sw=4 expandtab
-
-//Add semicolon to prevent IIFE from being passed as argument to concated code.
-;
-// Module systems magic dance
-(function (definition) {
-    // RequireJS
-    if (typeof define == "function") {
-        define(definition);
-    // YUI3
-    } else if (typeof YUI == "function") {
-        YUI.add("es5-sham", definition);
-    // CommonJS and