From 37843c470690abc66d01eaa468f02800a8df5a9b Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Fri, 12 Sep 2014 11:37:40 -0700 Subject: [PATCH] roundup 22 --- 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 | 4 +- blog/2014/02/05/community-roundup-15.html | 4 +- blog/2014/02/15/community-roundup-16.html | 4 +- blog/2014/02/16/react-v0.9-rc1.html | 4 +- blog/2014/02/20/react-v0.9.html | 4 +- blog/2014/02/24/community-roundup-17.html | 4 +- blog/2014/03/14/community-roundup-18.html | 4 +- blog/2014/03/19/react-v0.10-rc1.html | 4 +- blog/2014/03/21/react-v0.10.html | 4 +- blog/2014/03/28/the-road-to-1.0.html | 4 +- blog/2014/04/04/reactnet.html | 4 +- blog/2014/05/06/flux.html | 4 +- .../05/29/one-year-of-open-source-react.html | 4 +- blog/2014/06/27/community-roundup-19.html | 4 +- blog/2014/07/13/react-v0.11-rc1.html | 4 +- blog/2014/07/17/react-v0.11.html | 4 +- blog/2014/07/25/react-v0.11.1.html | 4 +- blog/2014/07/28/community-roundup-20.html | 4 +- .../30/flux-actions-and-the-dispatcher.html | 4 +- blog/2014/08/03/community-roundup-21.html | 4 +- .../03/introducing-the-jsx-specification.html | 4 +- blog/2014/09/12/community-round-up-22.html | 216 ++++++++++++++++++ blog/all.html | 2 + blog/index.html | 141 ++++++++---- blog/page10/index.html | 28 ++- blog/page2/index.html | 71 ++++-- blog/page3/index.html | 107 ++------- blog/page4/index.html | 199 +++++++--------- blog/page5/index.html | 166 +++++++++----- blog/page6/index.html | 75 ++++-- blog/page7/index.html | 67 ++---- blog/page8/index.html | 87 +++---- blog/page9/index.html | 69 +++--- feed.xml | 108 +++++++-- img/blog/react-browserify-gulp.jpg | Bin 0 -> 25618 bytes img/blog/weather.png | Bin 0 -> 14239 bytes 64 files changed, 955 insertions(+), 577 deletions(-) create mode 100644 blog/2014/09/12/community-round-up-22.html create mode 100644 img/blog/react-browserify-gulp.jpg create mode 100644 img/blog/weather.png diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index 14c103b187..179e96d5e2 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 36eb3c4fb9..a6ba2dc966 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 4eded5d99a..0d0c7fcf2b 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 e9123769c4..84dd078f2f 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 6a10648510..02c6728b06 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 ffab118fda..fe144a485b 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 51d6228999..e75b7b4917 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 2c67ae1516..12fc6942fe 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 6f6299a863..97b32d73dc 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 8b0d312ba7..9c1de3b0b0 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 9cdefcee00..d06c9da52b 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 63ee2b5abf..9e46627450 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 2fe14cd123..559f21fed9 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 c15bff398f..ff1f91b555 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 7b0a468a5b..9e5689d240 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 ad5f857ded..79f3f85bda 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 0a2f6527fb..9ff6c8e113 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 70b6768701..38e227f680 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 e9b1f59dd0..2755455393 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 ba22af17de..935c2b9450 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 e7c3fee710..0cde1a9c3a 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 b4bc8ba65b..f6d17e783e 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 c4236d7468..16d61ab00d 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 7f7c472717..ae6ed98878 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 db38584fcd..fcea52a0ed 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 f54bc99bd1..c6420d316c 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 0017713525..95748b0361 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 a710309f02..b1e1f4d87b 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 de600b6ef9..4c652ce2a3 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

diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html index fa9d45d09a..09131012be 100644 --- a/blog/2014/02/05/community-roundup-15.html +++ b/blog/2014/02/05/community-roundup-15.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/02/15/community-roundup-16.html b/blog/2014/02/15/community-roundup-16.html index 31d104cd93..a56a44c4e2 100644 --- a/blog/2014/02/15/community-roundup-16.html +++ b/blog/2014/02/15/community-roundup-16.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/02/16/react-v0.9-rc1.html b/blog/2014/02/16/react-v0.9-rc1.html index 5cfc52e98d..43d2391d9f 100644 --- a/blog/2014/02/16/react-v0.9-rc1.html +++ b/blog/2014/02/16/react-v0.9-rc1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/02/20/react-v0.9.html b/blog/2014/02/20/react-v0.9.html index e809ea8160..5c8a11d397 100644 --- a/blog/2014/02/20/react-v0.9.html +++ b/blog/2014/02/20/react-v0.9.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/02/24/community-roundup-17.html b/blog/2014/02/24/community-roundup-17.html index cc2583fe4d..714702959f 100644 --- a/blog/2014/02/24/community-roundup-17.html +++ b/blog/2014/02/24/community-roundup-17.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/03/14/community-roundup-18.html b/blog/2014/03/14/community-roundup-18.html index 9ba9b16740..cc10665cde 100644 --- a/blog/2014/03/14/community-roundup-18.html +++ b/blog/2014/03/14/community-roundup-18.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/03/19/react-v0.10-rc1.html b/blog/2014/03/19/react-v0.10-rc1.html index c085f26cca..fd80144766 100644 --- a/blog/2014/03/19/react-v0.10-rc1.html +++ b/blog/2014/03/19/react-v0.10-rc1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/03/21/react-v0.10.html b/blog/2014/03/21/react-v0.10.html index 81741a8cb1..1ad4fe0416 100644 --- a/blog/2014/03/21/react-v0.10.html +++ b/blog/2014/03/21/react-v0.10.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/03/28/the-road-to-1.0.html b/blog/2014/03/28/the-road-to-1.0.html index 5f97507e66..39bc6a0e2d 100644 --- a/blog/2014/03/28/the-road-to-1.0.html +++ b/blog/2014/03/28/the-road-to-1.0.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/04/04/reactnet.html b/blog/2014/04/04/reactnet.html index e450b8240a..1064144e16 100644 --- a/blog/2014/04/04/reactnet.html +++ b/blog/2014/04/04/reactnet.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/05/06/flux.html b/blog/2014/05/06/flux.html index 7209ea74ee..323b2dfda7 100644 --- a/blog/2014/05/06/flux.html +++ b/blog/2014/05/06/flux.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/05/29/one-year-of-open-source-react.html b/blog/2014/05/29/one-year-of-open-source-react.html index 3fbeb69dae..9b84292a6f 100644 --- a/blog/2014/05/29/one-year-of-open-source-react.html +++ b/blog/2014/05/29/one-year-of-open-source-react.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/06/27/community-roundup-19.html b/blog/2014/06/27/community-roundup-19.html index 4c9de7b8c5..f9fbea2302 100644 --- a/blog/2014/06/27/community-roundup-19.html +++ b/blog/2014/06/27/community-roundup-19.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/07/13/react-v0.11-rc1.html b/blog/2014/07/13/react-v0.11-rc1.html index 83bc7b3775..9834767385 100644 --- a/blog/2014/07/13/react-v0.11-rc1.html +++ b/blog/2014/07/13/react-v0.11-rc1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/07/17/react-v0.11.html b/blog/2014/07/17/react-v0.11.html index 974579d7d0..571164f309 100644 --- a/blog/2014/07/17/react-v0.11.html +++ b/blog/2014/07/17/react-v0.11.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/07/25/react-v0.11.1.html b/blog/2014/07/25/react-v0.11.1.html index 3b300d6878..c9a36c7f8e 100644 --- a/blog/2014/07/25/react-v0.11.1.html +++ b/blog/2014/07/25/react-v0.11.1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/07/28/community-roundup-20.html b/blog/2014/07/28/community-roundup-20.html index f430774a9b..4887921736 100644 --- a/blog/2014/07/28/community-roundup-20.html +++ b/blog/2014/07/28/community-roundup-20.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/07/30/flux-actions-and-the-dispatcher.html b/blog/2014/07/30/flux-actions-and-the-dispatcher.html index 9f9ca84013..321188d21f 100644 --- a/blog/2014/07/30/flux-actions-and-the-dispatcher.html +++ b/blog/2014/07/30/flux-actions-and-the-dispatcher.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/08/03/community-roundup-21.html b/blog/2014/08/03/community-roundup-21.html index aef2bf7572..50985f62be 100644 --- a/blog/2014/08/03/community-roundup-21.html +++ b/blog/2014/08/03/community-roundup-21.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/09/03/introducing-the-jsx-specification.html b/blog/2014/09/03/introducing-the-jsx-specification.html index d710f36320..0fcba587fd 100644 --- a/blog/2014/09/03/introducing-the-jsx-specification.html +++ b/blog/2014/09/03/introducing-the-jsx-specification.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/09/12/community-round-up-22.html b/blog/2014/09/12/community-round-up-22.html new file mode 100644 index 0000000000..598311997e --- /dev/null +++ b/blog/2014/09/12/community-round-up-22.html @@ -0,0 +1,216 @@ + + + + + + + Community Round-up #22 | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + +
+
+ + + +
+
+
+

Recent posts

+ +
+
+ +
+

Community Round-up #22

+

September 12, 2014 by Lou Husson

+ +
+ +
+

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

+ +
+ + + +
+ + + +
+

React's Architecture #

+

Vjeux, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the annotated slides or Chris Dawson's notes titled JavaScript’s History and How it Led To React.

+ + +

v8 optimizations #

+

Jakob Kummerow landed two optimizations to V8 specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!

+

Reusable Components by Khan Academy #

+

Khan Academy released many high quality standalone components they are using. This is a good opportunity to see what React code used in production look like.

+
var TeX = require('react-components/js/tex.jsx');
+React.renderComponent(<TeX>\nabla \cdot E = 4 \pi \rho</TeX>, domNode);
+
+var translated = (
+  <$_ first="Motoko" last="Kusanagi">
+    Hello, %(first)s %(last)s!
+  </$_>
+);
+

React + Browserify + Gulp #

+

Trường wrote a little guide to help your getting started using React, Browserify and Gulp.

+ +
+

React Style #

+

After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: IntegratedCSS. It seems weird at first but this is the direction where React is heading.

+
var Button = React.createClass({
+  normalStyle: ReactStyle(function() {
+    return { backgroundColor: vars.orange };
+  }),
+  activeStyle: ReactStyle(function() {
+    if (this.state.active) {
+      return { color: 'yellow', padding: '10px' };
+    }
+  }),
+  render: function() {
+    return (
+      <div styles={[this.normalStyle(), this.activeStyle()]}>
+        Hello, I'm styled
+      </div>
+    );
+  }
+});
+

Virtual DOM in Elm #

+

Evan Czaplicki explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.

+ +
+

Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.

+ +

Read the full article

+
+

Components Tutorial #

+

If you are getting started with React, Joe Maddalone made a good tutorial on how to build your first component.

+ + +

Saving time & staying sane? #

+

When Kent William Innholt who works at M>Path summed up his experience using React in an article.

+ +
+

We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.

+ +
    +
  • Big win: Tighter coupling of markup and behavior
    • +
  • Jury's still out: CSS lives outside React.js
    • +
  • Big win: Cascading updates and functional thinking
    • +
  • Jury's still out: Verbose propagation
    • +
+ +

Read the article...

+
+

Weather #

+

To finish this round-up, Andrew Gleave made a page that displays the Weather. It's great to see that React is also used for small prototypes.

+ +
+ +
+ +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
© 2014 Facebook Inc.
+
+
+
+ + + + diff --git a/blog/all.html b/blog/all.html index aae9f11650..3328b8eb0d 100644 --- a/blog/all.html +++ b/blog/all.html @@ -61,6 +61,8 @@

All Posts

+

Community Round-up #22 on September 12, 2014 by Lou Husson

+

Introducing the JSX Specification on September 3, 2014 by Sebastian Markbåge

Community Round-up #21 on August 3, 2014 by Lou Husson

diff --git a/blog/index.html b/blog/index.html index 01866805d8..4b89b80e48 100644 --- a/blog/index.html +++ b/blog/index.html @@ -63,6 +63,8 @@

Recent posts

@@ -90,6 +90,96 @@
+
+

Community Round-up #22

+

September 12, 2014 by Lou Husson

+
+
+

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

+ +
+ + + +
+ + + +
+

React's Architecture #

+

Vjeux, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the annotated slides or Chris Dawson's notes titled JavaScript’s History and How it Led To React.

+ + +

v8 optimizations #

+

Jakob Kummerow landed two optimizations to V8 specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!

+

Reusable Components by Khan Academy #

+

Khan Academy released many high quality standalone components they are using. This is a good opportunity to see what React code used in production look like.

+
var TeX = require('react-components/js/tex.jsx');
+React.renderComponent(<TeX>\nabla \cdot E = 4 \pi \rho</TeX>, domNode);
+
+var translated = (
+  <$_ first="Motoko" last="Kusanagi">
+    Hello, %(first)s %(last)s!
+  </$_>
+);
+

React + Browserify + Gulp #

+

Trường wrote a little guide to help your getting started using React, Browserify and Gulp.

+ +
+

React Style #

+

After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: IntegratedCSS. It seems weird at first but this is the direction where React is heading.

+
var Button = React.createClass({
+  normalStyle: ReactStyle(function() {
+    return { backgroundColor: vars.orange };
+  }),
+  activeStyle: ReactStyle(function() {
+    if (this.state.active) {
+      return { color: 'yellow', padding: '10px' };
+    }
+  }),
+  render: function() {
+    return (
+      <div styles={[this.normalStyle(), this.activeStyle()]}>
+        Hello, I'm styled
+      </div>
+    );
+  }
+});
+

Virtual DOM in Elm #

+

Evan Czaplicki explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.

+ +
+

Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.

+ +

Read the full article

+
+

Components Tutorial #

+

If you are getting started with React, Joe Maddalone made a good tutorial on how to build your first component.

+ + +

Saving time & staying sane? #

+

When Kent William Innholt who works at M>Path summed up his experience using React in an article.

+ +
+

We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.

+ +
    +
  • Big win: Tighter coupling of markup and behavior
    • +
  • Jury's still out: CSS lives outside React.js
    • +
  • Big win: Cascading updates and functional thinking
    • +
  • Jury's still out: Verbose propagation
    • +
+ +

Read the article...

+
+

Weather #

+

To finish this round-up, Andrew Gleave made a page that displays the Weather. It's great to see that React is also used for small prototypes.

+ +
+ +
+
+

Introducing the JSX Specification

September 3, 2014 by Sebastian Markbåge

@@ -314,53 +404,6 @@ This is not the intended way to use React but can be useful as last resort if yo
-
-

React v0.11.1

-

July 25, 2014 by Paul O’Shannessy

-
-
-

Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.

- -

The first of these is the most major and resulted in a regression with the use of setState inside componentWillMount when using React on the server. These setState calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as document is not defined.

- -

There are several fixes we're including in v0.11.1 that are focused around the newly supported event.getModifierState() function. We made some adjustments to improve this cross-browser standardization.

- -

The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.

- -

We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around Descriptors and Prop Type Validation.

- -

The release is available for download from the CDN:

- - - -

We've also published version 0.11.1 of the react and react-tools packages on npm and the react package on bower.

- -

Please try these builds out and file an issue on GitHub if you see anything awry.

-

Changelog #

React Core #

Bug Fixes #

-
    -
  • setState can be called inside componentWillMount in non-DOM environments
    • -
  • SyntheticMouseEvent.getEventModifierState correctly renamed to getModifierState
    • -
  • getModifierState correctly returns a boolean
    • -
  • getModifierState is now correctly case sensitive
    • -
  • Empty Text node used in IE8 innerHTML workaround is now removed, fixing rerendering in certain cases
    • -
-

JSXTransformer #

-
    -
  • Fix duplicate variable declaration (caused issues in some browsers)
    • -
- -
-
- @@ -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/blog/page2/index.html b/blog/page2/index.html index db1faa3a93..dfa368a331 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -63,6 +63,8 @@

Recent posts

@@ -90,6 +90,53 @@
+
+

React v0.11.1

+

July 25, 2014 by Paul O’Shannessy

+
+
+

Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.

+ +

The first of these is the most major and resulted in a regression with the use of setState inside componentWillMount when using React on the server. These setState calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as document is not defined.

+ +

There are several fixes we're including in v0.11.1 that are focused around the newly supported event.getModifierState() function. We made some adjustments to improve this cross-browser standardization.

+ +

The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.

+ +

We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around Descriptors and Prop Type Validation.

+ +

The release is available for download from the CDN:

+ + + +

We've also published version 0.11.1 of the react and react-tools packages on npm and the react package on bower.

+ +

Please try these builds out and file an issue on GitHub if you see anything awry.

+

Changelog #

React Core #

Bug Fixes #

+
    +
  • setState can be called inside componentWillMount in non-DOM environments
    • +
  • SyntheticMouseEvent.getEventModifierState correctly renamed to getModifierState
    • +
  • getModifierState correctly returns a boolean
    • +
  • getModifierState is now correctly case sensitive
    • +
  • Empty Text node used in IE8 innerHTML workaround is now removed, fixing rerendering in certain cases
    • +
+

JSXTransformer #

+
    +
  • Fix duplicate variable declaration (caused issues in some browsers)
    • +
+ +
+
+

React v0.11

July 17, 2014 by Paul O’Shannessy

@@ -444,26 +491,6 @@ Minified build for production: -

Flux: An Application Architecture for React

-

May 6, 2014 by Bill Fisher and Jing Chen

-
-
-

We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

- -
- -

To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.

- -

In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.

- -

When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.

- -

Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An example of this architecture is available, along with more detailed documentation and a tutorial. Look for more examples to come in the future.

- -
-
- @@ -90,6 +90,26 @@
+
+

Flux: An Application Architecture for React

+

May 6, 2014 by Bill Fisher and Jing Chen

+
+
+

We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

+ +
+ +

To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.

+ +

In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.

+ +

When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.

+ +

Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An example of this architecture is available, along with more detailed documentation and a tutorial. Look for more examples to come in the future.

+ +
+
+

Use React and JSX in ASP.NET MVC

April 4, 2014 by Daniel Lo Nigro

@@ -316,89 +336,6 @@ Minified build for production: -

Community Round-up #18

-

March 14, 2014 by Jonas Gebhardt

-
-
-

In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.

-

"Little framework BIG splash" #

-

Let's start with yet another refreshing introduction to React: Craig Savolainen (@maedhr) walks through some first steps, demonstrating how to build a Google Maps component using React.

-

Architecting your app with react #

-

Brandon Konkle (@bkonkle) -Architecting your app with react -We're looking forward to part 2!

- -
-

React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.

- -

Read the full article...

-
-

React vs. async DOM manipulation #

-

Eliseu Monar (@eliseumds)'s post "ReactJS vs async concurrent rendering" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.

-

React, Scala and the Play Framework #

-

Matthias Nehlsen wrote a detailed introductory piece on React and the Play Framework, including a helpful architectural diagram of a typical React app.

- -

Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.

- -

In another article, he walks us through the process of using React with scala.js to implement app-wide undo functionality.

- -

Also check out his talk at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.

-

React and Backbone #

-

The folks over at Venmo are using React in conjunction with Backbone. -Thomas Boyt (@thomasaboyt) wrote this detailed piece about why React and Backbone are "a fantastic pairing".

-

React vs. Ember #

-

Eric Berry (@coderberry) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: "Facebook React vs. Ember".

-

React and plain old HTML #

-

Daniel Lo Nigro (@Daniel15) created React-Magic, which leverages React to ajaxify plain old html pages and even allows CSS transitions between pageloads.

- -
-

React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.

- -

Check out the project on GitHub...

-
- -

On a related note, Reactize by Ross Allen (@ssorallen) is a similarly awesome project: A wrapper for Rails' Turbolinks, which seems to have inspired John Lynch (@johnrlynch) to then create a server-rendered version using the JSX transformer in Rails middleware.

-

React and Object.observe #

-

Check out François de Campredon's implementation of TodoMVC based on React and ES6's Object.observe.

-

React and Angular #

-

Ian Bicking (@ianbicking) of Mozilla Labs explains why he "decided to go with React instead of Angular.js".

-

ng-React Update #

-

David Chang works through some performance improvements of his ngReact project. His post "ng-React Update - React 0.9 and Angular Track By" includes some helpful advice on boosting render performance for Angular components.

- -
-

Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.

- -

That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.

- -

Read the full post...

-
- -

React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:

- - -

React and Web Components #

-

Jonathan Krause (@jonykrause) offers his thoughts regarding parallels between React and Web Components, highlighting the value of React's ability to render pages on the server practically for free.

-

Immutable React #

-

Peter Hausel shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to mori), really taking advantage of the framework's one-way reactive data binding:

- -
-

Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.

- -

Read the full post

-
-

D3 and React #

-

Ben Smith built some great SVG-based charting components using a little less of D3 and a little more of React: D3 and React - the future of charting components?

-

Om and React #

-

Josh Haberman (@joshhaberman) discusses performance differences between React, Om and traditional MVC frameworks in "A closer look at OM vs React performance".

- -

Speaking of Om: Omchaya by Sean Grove (@sgrove) is a neat Cljs/Om example project.

-

Random Tweets #

-
- -
-
- @@ -90,6 +90,89 @@
+
+

Community Round-up #18

+

March 14, 2014 by Jonas Gebhardt

+
+
+

In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.

+

"Little framework BIG splash" #

+

Let's start with yet another refreshing introduction to React: Craig Savolainen (@maedhr) walks through some first steps, demonstrating how to build a Google Maps component using React.

+

Architecting your app with react #

+

Brandon Konkle (@bkonkle) +Architecting your app with react +We're looking forward to part 2!

+ +
+

React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.

+ +

Read the full article...

+
+

React vs. async DOM manipulation #

+

Eliseu Monar (@eliseumds)'s post "ReactJS vs async concurrent rendering" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.

+

React, Scala and the Play Framework #

+

Matthias Nehlsen wrote a detailed introductory piece on React and the Play Framework, including a helpful architectural diagram of a typical React app.

+ +

Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.

+ +

In another article, he walks us through the process of using React with scala.js to implement app-wide undo functionality.

+ +

Also check out his talk at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.

+

React and Backbone #

+

The folks over at Venmo are using React in conjunction with Backbone. +Thomas Boyt (@thomasaboyt) wrote this detailed piece about why React and Backbone are "a fantastic pairing".

+

React vs. Ember #

+

Eric Berry (@coderberry) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: "Facebook React vs. Ember".

+

React and plain old HTML #

+

Daniel Lo Nigro (@Daniel15) created React-Magic, which leverages React to ajaxify plain old html pages and even allows CSS transitions between pageloads.

+ +
+

React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.

+ +

Check out the project on GitHub...

+
+ +

On a related note, Reactize by Ross Allen (@ssorallen) is a similarly awesome project: A wrapper for Rails' Turbolinks, which seems to have inspired John Lynch (@johnrlynch) to then create a server-rendered version using the JSX transformer in Rails middleware.

+

React and Object.observe #

+

Check out François de Campredon's implementation of TodoMVC based on React and ES6's Object.observe.

+

React and Angular #

+

Ian Bicking (@ianbicking) of Mozilla Labs explains why he "decided to go with React instead of Angular.js".

+

ng-React Update #

+

David Chang works through some performance improvements of his ngReact project. His post "ng-React Update - React 0.9 and Angular Track By" includes some helpful advice on boosting render performance for Angular components.

+ +
+

Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.

+ +

That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.

+ +

Read the full post...

+
+ +

React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:

+ + +

React and Web Components #

+

Jonathan Krause (@jonykrause) offers his thoughts regarding parallels between React and Web Components, highlighting the value of React's ability to render pages on the server practically for free.

+

Immutable React #

+

Peter Hausel shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to mori), really taking advantage of the framework's one-way reactive data binding:

+ +
+

Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.

+ +

Read the full post

+
+

D3 and React #

+

Ben Smith built some great SVG-based charting components using a little less of D3 and a little more of React: D3 and React - the future of charting components?

+

Om and React #

+

Josh Haberman (@joshhaberman) discusses performance differences between React, Om and traditional MVC frameworks in "A closer look at OM vs React performance".

+ +

Speaking of Om: Omchaya by Sean Grove (@sgrove) is a neat Cljs/Om example project.

+

Random Tweets #

+
+ +
+
+

Community Round-up #17

February 24, 2014 by Jonas Gebhardt

@@ -473,118 +556,6 @@ Minified build for production: -

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 #

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

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