From 043584fc6c4da8e0ac3edaeb0d07c6897331fe87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Thu, 19 Mar 2015 13:07:03 -0700 Subject: [PATCH] Update for relay blog post --- 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 | 4 +- blog/2014/09/16/react-v0.11.2.html | 4 +- .../2014/09/24/testing-flux-applications.html | 4 +- .../10/14/introducing-react-elements.html | 4 +- blog/2014/10/16/react-v0.12-rc1.html | 4 +- blog/2014/10/17/community-roundup-23.html | 4 +- blog/2014/10/27/react-js-conf.html | 4 +- blog/2014/10/28/react-v0.12.html | 4 +- blog/2014/11/24/react-js-conf-updates.html | 4 +- blog/2014/11/25/community-roundup-24.html | 4 +- blog/2014/12/18/react-v0.12.2.html | 4 +- .../react-js-conf-diversity-scholarship.html | 4 +- blog/2015/01/27/react-v0.13.0-beta-1.html | 4 +- blog/2015/02/18/react-conf-roundup-2015.html | 4 +- .../02/20/introducing-relay-and-graphql.html | 4 +- blog/2015/02/24/react-v0.13-rc1.html | 4 +- .../02/24/streamlining-react-elements.html | 4 +- blog/2015/03/03/react-v0.13-rc2.html | 4 +- blog/2015/03/04/community-roundup-25.html | 4 +- blog/2015/03/10/react-v0.13.html | 4 +- blog/2015/03/16/react-v0.13.1.html | 4 +- ...ing-the-facebook-news-feed-with-relay.html | 322 ++++++++++++++++++ blog/all.html | 2 + blog/index.html | 270 +++++++++++---- blog/page10/index.html | 233 +++++-------- blog/page11/index.html | 233 ++++++++----- blog/page12/index.html | 184 +++++----- blog/page13/index.html | 185 +++++----- blog/page14/index.html | 105 +++++- blog/page15/index.html | 152 +++++++++ blog/page2/index.html | 118 ++++--- blog/page3/index.html | 63 ++-- blog/page4/index.html | 78 ++--- blog/page5/index.html | 147 ++++---- blog/page6/index.html | 109 ++++-- blog/page7/index.html | 96 ++---- blog/page8/index.html | 145 ++++---- blog/page9/index.html | 153 ++++----- css/react.css | 2 +- feed.xml | 232 ++++++++++--- .../relay-components/relay-architecture.png | Bin 0 -> 133970 bytes .../relay-containers-data-flow.png | Bin 0 -> 71044 bytes .../relay-components/relay-containers.png | Bin 0 -> 39057 bytes img/blog/relay-components/sample-newsfeed.png | Bin 0 -> 121401 bytes 93 files changed, 1960 insertions(+), 1149 deletions(-) create mode 100644 blog/2015/03/19/building-the-facebook-news-feed-with-relay.html create mode 100644 blog/page15/index.html create mode 100644 img/blog/relay-components/relay-architecture.png create mode 100644 img/blog/relay-components/relay-containers-data-flow.png create mode 100644 img/blog/relay-components/relay-containers.png create mode 100644 img/blog/relay-components/sample-newsfeed.png diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index 363b1f8b59..642ed4a7f5 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 97f80a644d..089d0b7f1b 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 75cb8d0d4d..1bd6ca5349 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 adbffa266f..a6f5463ec2 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 1979d27bdc..07ac7b485d 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 0dbe8e1f93..b6f1d70148 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 daa14d783e..421f5bf85e 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 523a191945..d522f48d54 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 a9a15df8b6..79775551af 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 5d2eca1c54..1000012034 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 6382a9af7b..c53ca2331b 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 a2129929d1..02dbba34fc 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 22e21bd7b4..333398f6ae 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 52481433f3..9dbccc63ad 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 53555aa479..0c33709c5c 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 d99ed3a58a..dfad72bf82 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 812132aed8..7a9dc22d37 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 bcfafcf1f5..94ea2a4f53 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 11fcb2e9cc..37dea14de4 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 95d9e68358..047cd701b9 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 b9c3360d64..3927973225 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 57ea402099..e992bfcfe9 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 b70e2433d7..8ea17cf53f 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 a935980bc3..aaf9eb953c 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 a52605e073..3febd6458c 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 6880fbc97f..94c9babf5f 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 ab721aa304..51897eba9a 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 4f3a56edfa..86ebcb7257 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 a5eff2a4da..92293faeed 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 05137957df..e9e153d5c2 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 be61921132..e7aed4de5f 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 159ff0d323..0d25d7edfb 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 fb45f6bd78..4a81089ada 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 e7891a2e56..cac11ebcdb 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 32dcaa8c9d..f2b2d71526 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 03eb4cf9ef..77bd124779 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 aa3b26170b..b399fb4f68 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 400725a43c..a3613b43a6 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 69e3211d7f..f3f5f2c955 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 918e37c57c..52eea22115 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 f057881a3c..e65cfd732e 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 e3ffff13fa..9875a14f1c 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 6d1a096697..b4ecf10014 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 a5785df0cf..77a49adf93 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 7f2138762f..9e0879a987 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 66a9dc672b..f078150fcb 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 61ca2fec82..3f9dec350a 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 f0971eab6a..4c07babde8 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 f43fadc20a..4e5b3e660b 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 index c16e09a4c4..b73010cdc4 100644 --- a/blog/2014/09/12/community-round-up-22.html +++ b/blog/2014/09/12/community-round-up-22.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/09/16/react-v0.11.2.html b/blog/2014/09/16/react-v0.11.2.html index b7529e2f08..7464412419 100644 --- a/blog/2014/09/16/react-v0.11.2.html +++ b/blog/2014/09/16/react-v0.11.2.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/09/24/testing-flux-applications.html b/blog/2014/09/24/testing-flux-applications.html index 8562e2b669..98e4732a28 100644 --- a/blog/2014/09/24/testing-flux-applications.html +++ b/blog/2014/09/24/testing-flux-applications.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/10/14/introducing-react-elements.html b/blog/2014/10/14/introducing-react-elements.html index 5fb847b508..288e49afb7 100644 --- a/blog/2014/10/14/introducing-react-elements.html +++ b/blog/2014/10/14/introducing-react-elements.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/10/16/react-v0.12-rc1.html b/blog/2014/10/16/react-v0.12-rc1.html index df674e0d99..fa10e686bd 100644 --- a/blog/2014/10/16/react-v0.12-rc1.html +++ b/blog/2014/10/16/react-v0.12-rc1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/10/17/community-roundup-23.html b/blog/2014/10/17/community-roundup-23.html index 867999c3aa..accaaf79db 100644 --- a/blog/2014/10/17/community-roundup-23.html +++ b/blog/2014/10/17/community-roundup-23.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/10/27/react-js-conf.html b/blog/2014/10/27/react-js-conf.html index 76844f8dbb..980ac61b0c 100644 --- a/blog/2014/10/27/react-js-conf.html +++ b/blog/2014/10/27/react-js-conf.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/10/28/react-v0.12.html b/blog/2014/10/28/react-v0.12.html index 76077846fd..2c5e790fe5 100644 --- a/blog/2014/10/28/react-v0.12.html +++ b/blog/2014/10/28/react-v0.12.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/11/24/react-js-conf-updates.html b/blog/2014/11/24/react-js-conf-updates.html index ddc0ec5f35..badc5a16d0 100644 --- a/blog/2014/11/24/react-js-conf-updates.html +++ b/blog/2014/11/24/react-js-conf-updates.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/11/25/community-roundup-24.html b/blog/2014/11/25/community-roundup-24.html index 3479491d60..c643c5a622 100644 --- a/blog/2014/11/25/community-roundup-24.html +++ b/blog/2014/11/25/community-roundup-24.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/12/18/react-v0.12.2.html b/blog/2014/12/18/react-v0.12.2.html index 9437eba1fe..578a345258 100644 --- a/blog/2014/12/18/react-v0.12.2.html +++ b/blog/2014/12/18/react-v0.12.2.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2014/12/19/react-js-conf-diversity-scholarship.html b/blog/2014/12/19/react-js-conf-diversity-scholarship.html index 3ccecafbfd..c7fb1a4d35 100644 --- a/blog/2014/12/19/react-js-conf-diversity-scholarship.html +++ b/blog/2014/12/19/react-js-conf-diversity-scholarship.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/01/27/react-v0.13.0-beta-1.html b/blog/2015/01/27/react-v0.13.0-beta-1.html index 01620e441a..002e0fa5dc 100644 --- a/blog/2015/01/27/react-v0.13.0-beta-1.html +++ b/blog/2015/01/27/react-v0.13.0-beta-1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/02/18/react-conf-roundup-2015.html b/blog/2015/02/18/react-conf-roundup-2015.html index d07a28add6..a14cbcfe98 100644 --- a/blog/2015/02/18/react-conf-roundup-2015.html +++ b/blog/2015/02/18/react-conf-roundup-2015.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/02/20/introducing-relay-and-graphql.html b/blog/2015/02/20/introducing-relay-and-graphql.html index 72962f7b60..06b4ccd097 100644 --- a/blog/2015/02/20/introducing-relay-and-graphql.html +++ b/blog/2015/02/20/introducing-relay-and-graphql.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/02/24/react-v0.13-rc1.html b/blog/2015/02/24/react-v0.13-rc1.html index 4ca957ce56..3ffe3799d9 100644 --- a/blog/2015/02/24/react-v0.13-rc1.html +++ b/blog/2015/02/24/react-v0.13-rc1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/02/24/streamlining-react-elements.html b/blog/2015/02/24/streamlining-react-elements.html index cf683c2d00..8b6c999556 100644 --- a/blog/2015/02/24/streamlining-react-elements.html +++ b/blog/2015/02/24/streamlining-react-elements.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/03/03/react-v0.13-rc2.html b/blog/2015/03/03/react-v0.13-rc2.html index 552592de60..6d69d473e5 100644 --- a/blog/2015/03/03/react-v0.13-rc2.html +++ b/blog/2015/03/03/react-v0.13-rc2.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/03/04/community-roundup-25.html b/blog/2015/03/04/community-roundup-25.html index 324530be98..13ab504211 100644 --- a/blog/2015/03/04/community-roundup-25.html +++ b/blog/2015/03/04/community-roundup-25.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/03/10/react-v0.13.html b/blog/2015/03/10/react-v0.13.html index 8b138792f7..3c68c947f8 100644 --- a/blog/2015/03/10/react-v0.13.html +++ b/blog/2015/03/10/react-v0.13.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/03/16/react-v0.13.1.html b/blog/2015/03/16/react-v0.13.1.html index 1bd4e1750b..16aac81804 100644 --- a/blog/2015/03/16/react-v0.13.1.html +++ b/blog/2015/03/16/react-v0.13.1.html @@ -63,6 +63,8 @@

Recent posts

diff --git a/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html b/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html new file mode 100644 index 0000000000..794cb74294 --- /dev/null +++ b/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html @@ -0,0 +1,322 @@ + + + + + + + Building The Facebook News Feed With Relay | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + +
+
+ + + +
+
+
+

Recent posts

+ +
+
+ +
+

Building The Facebook News Feed With Relay

+

March 19, 2015 by Joseph Savona

+ +
+ +
+

At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading our introductory blog post or watching the conference talk.

+ +

We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.

+ +


+

The Relay Architecture #

+

The diagram below shows the main parts of the Relay architecture on the client and the server:

+ +

Relay Architecture

+ +

The main pieces are as follows:

+ +
    +
  • Relay Components: React components annotated with declarative data descriptions.
    • +
  • Actions: Descriptions of how data should change in response to user actions.
    • +
  • Relay Store: A client-side data store that is fully managed by the framework.
    • +
  • Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
    • +
+ +

This post will focus on Relay components that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.

+ +


+

A Relay Application #

+

To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <NewsFeed> that renders a list of <Story> items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:

+ +

Sample News Feed

+ +


+

The <Story> Begins #

+

The first step is a React <Story> component that accepts a story prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.

+
// Story.react.js
+class Story extends React.Component {
+  render() {
+    var story = this.props.story;
+    return (
+      <View>
+        <Image uri={story.author.profile_picture.uri} />
+        <Text>{story.author.name}</Text>
+        <Text>{story.text}</Text>
+      </View>
+    );
+  }
+}
+
+module.exports = Story;
+
+


+

What's the <Story>? #

+

Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):

+
// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: /* TODO */
+  }
+});
+
+

Before adding the GraphQL query, let's look at the component hierarchy this creates:

+ +

React Container Data Flow

+ +

Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for story:

+
// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: graphql`
+      Story {
+        author {
+          name,
+          profile_picture {
+            uri
+          }
+        },
+        text
+      }
+    `
+  }
+});
+
+

Queries use ES6 template literals tagged with the graphql function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in <Story>'s render function.

+ +


+

<Story>s on Demand #

+

We can render a Relay component by providing Relay with the component (<Story>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then render() the component. The value of props.story will be a plain JavaScript object such as the following:

+
{
+  author: {
+    name: "Greg",
+    profile_picture: {
+      uri: "https://…"
+    }
+  },
+  text: "The first Relay blog post is up…"
+}
+
+

Relay guarantees that all data required to render a component will be available before it is rendered. This means that <Story> does not need to handle a loading state; the story is guaranteed to be available before render() is called. We have found that this invariant simplifies our application code and improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.

+ +

The diagram below shows how Relay containers make data available to our React components:

+ +

Relay Container Data Flow

+ +


+

<NewsFeed> Worthy #

+

Now that the <Story> is over we can continue with the <NewsFeed> component. Again, we'll start with a React version:

+
// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() {
+    var stories = this.props.viewer.stories; // `viewer` is the active user
+    return (
+      <View>
+        {stories.map(story => <Story story={story} />)}
+        <Button onClick={() => this.loadMore()}>Load More</Button>
+      </View>
+    );
+  }
+
+  loadMore() {
+    // TODO: fetch more stories
+  }
+}
+
+module.exports = NewsFeed;
+
+


+

All the News Fit to be Relayed #

+

<NewsFeed> has two new requirements: it composes <Story> and requests more data at runtime.

+ +

Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: ${Component.getQuery('prop')}. Pagination can be accomplished with a query parameter, specified with <param> (as in stories(first: <count>)):

+
// NewsFeed.react.js
+class NewsFeed extends React.Component { ... }
+
+module.exports = Relay.createContainer(NewsFeed, {
+  queryParams: {
+    count: 3                             /* default to 3 stories */
+  },
+  queries: {
+    viewer: graphql`
+      Viewer {
+        stories(first: <count>) {        /* fetch viewer's stories */
+          edges {                        /* traverse the graph */
+            node {
+              ${Story.getQuery('story')} /* compose child query */
+            }
+          }
+        }
+      }
+    `
+  }
+});
+
+

Whenever <NewsFeed> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the text and author data will be fetched for each of the 3 story nodes.

+ +

Query parameters are available to components as props.queryParams and can be modified with props.setQueryParams(nextParams). We can use these to implement pagination:

+
// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() { ... }
+
+  loadMore() {
+    // read current params
+    var count = this.props.queryParams.count;
+    // update params
+    this.props.setQueryParams({
+      count: count + 5
+    });
+  }
+}
+
+

Now when loadMore() is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in props.viewer.stories and the updated count reflected in props.queryParams.count.

+ +


+

In Conclusion #

+

These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:

+ +
    +
  • Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
    • +
  • Trivial pagination with automatic optimizations to fetch only the additional items.
    • +
  • View composition and reusability, so that <Story> can be used on its own or within <NewsFeed>, without any changes to either component.
    • +
  • Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
    • +
  • Exactly zero lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
    • +
+ +

But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.

+ +
+ +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2015 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + + diff --git a/blog/all.html b/blog/all.html index 38c8348bae..443470cb36 100644 --- a/blog/all.html +++ b/blog/all.html @@ -61,6 +61,8 @@

All Posts

+

Building The Facebook News Feed With Relay on March 19, 2015 by Joseph Savona

+

React v0.13.1 on March 16, 2015 by Paul O’Shannessy

React v0.13 on March 10, 2015 by Ben Alpert

diff --git a/blog/index.html b/blog/index.html index da03ce7b9b..812a59aeb2 100644 --- a/blog/index.html +++ b/blog/index.html @@ -63,6 +63,8 @@

Recent posts

@@ -90,6 +90,199 @@
+
+

Building The Facebook News Feed With Relay

+

March 19, 2015 by Joseph Savona

+
+
+

At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading our introductory blog post or watching the conference talk.

+ +

We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.

+ +


+

The Relay Architecture #

+

The diagram below shows the main parts of the Relay architecture on the client and the server:

+ +

Relay Architecture

+ +

The main pieces are as follows:

+ +
    +
  • Relay Components: React components annotated with declarative data descriptions.
    • +
  • Actions: Descriptions of how data should change in response to user actions.
    • +
  • Relay Store: A client-side data store that is fully managed by the framework.
    • +
  • Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
    • +
+ +

This post will focus on Relay components that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.

+ +


+

A Relay Application #

+

To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <NewsFeed> that renders a list of <Story> items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:

+ +

Sample News Feed

+ +


+

The <Story> Begins #

+

The first step is a React <Story> component that accepts a story prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.

+
// Story.react.js
+class Story extends React.Component {
+  render() {
+    var story = this.props.story;
+    return (
+      <View>
+        <Image uri={story.author.profile_picture.uri} />
+        <Text>{story.author.name}</Text>
+        <Text>{story.text}</Text>
+      </View>
+    );
+  }
+}
+
+module.exports = Story;
+
+


+

What's the <Story>? #

+

Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):

+
// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: /* TODO */
+  }
+});
+
+

Before adding the GraphQL query, let's look at the component hierarchy this creates:

+ +

React Container Data Flow

+ +

Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for story:

+
// Story.react.js
+class Story extends React.Component { ... }
+
+module.exports = Relay.createContainer(Story, {
+  queries: {
+    story: graphql`
+      Story {
+        author {
+          name,
+          profile_picture {
+            uri
+          }
+        },
+        text
+      }
+    `
+  }
+});
+
+

Queries use ES6 template literals tagged with the graphql function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in <Story>'s render function.

+ +


+

<Story>s on Demand #

+

We can render a Relay component by providing Relay with the component (<Story>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then render() the component. The value of props.story will be a plain JavaScript object such as the following:

+
{
+  author: {
+    name: "Greg",
+    profile_picture: {
+      uri: "https://…"
+    }
+  },
+  text: "The first Relay blog post is up…"
+}
+
+

Relay guarantees that all data required to render a component will be available before it is rendered. This means that <Story> does not need to handle a loading state; the story is guaranteed to be available before render() is called. We have found that this invariant simplifies our application code and improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.

+ +

The diagram below shows how Relay containers make data available to our React components:

+ +

Relay Container Data Flow

+ +


+

<NewsFeed> Worthy #

+

Now that the <Story> is over we can continue with the <NewsFeed> component. Again, we'll start with a React version:

+
// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() {
+    var stories = this.props.viewer.stories; // `viewer` is the active user
+    return (
+      <View>
+        {stories.map(story => <Story story={story} />)}
+        <Button onClick={() => this.loadMore()}>Load More</Button>
+      </View>
+    );
+  }
+
+  loadMore() {
+    // TODO: fetch more stories
+  }
+}
+
+module.exports = NewsFeed;
+
+


+

All the News Fit to be Relayed #

+

<NewsFeed> has two new requirements: it composes <Story> and requests more data at runtime.

+ +

Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: ${Component.getQuery('prop')}. Pagination can be accomplished with a query parameter, specified with <param> (as in stories(first: <count>)):

+
// NewsFeed.react.js
+class NewsFeed extends React.Component { ... }
+
+module.exports = Relay.createContainer(NewsFeed, {
+  queryParams: {
+    count: 3                             /* default to 3 stories */
+  },
+  queries: {
+    viewer: graphql`
+      Viewer {
+        stories(first: <count>) {        /* fetch viewer's stories */
+          edges {                        /* traverse the graph */
+            node {
+              ${Story.getQuery('story')} /* compose child query */
+            }
+          }
+        }
+      }
+    `
+  }
+});
+
+

Whenever <NewsFeed> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the text and author data will be fetched for each of the 3 story nodes.

+ +

Query parameters are available to components as props.queryParams and can be modified with props.setQueryParams(nextParams). We can use these to implement pagination:

+
// NewsFeed.react.js
+class NewsFeed extends React.Component {
+  render() { ... }
+
+  loadMore() {
+    // read current params
+    var count = this.props.queryParams.count;
+    // update params
+    this.props.setQueryParams({
+      count: count + 5
+    });
+  }
+}
+
+

Now when loadMore() is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in props.viewer.stories and the updated count reflected in props.queryParams.count.

+ +


+

In Conclusion #

+

These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:

+ +
    +
  • Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
    • +
  • Trivial pagination with automatic optimizations to fetch only the additional items.
    • +
  • View composition and reusability, so that <Story> can be used on its own or within <NewsFeed>, without any changes to either component.
    • +
  • Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
    • +
  • Exactly zero lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
    • +
+ +

But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.

+ +
+
+

React v0.13.1

March 16, 2015 by Paul O’Shannessy

@@ -335,79 +528,6 @@ Minified build for production: -

React v0.13 RC

-

February 24, 2015 by Paul O'Shannessy

-
-
-

Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!

- -

We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in our beta announcement. We're really excited about this! Sebastian also posted earlier this morning about some of the other changes coming focused around ReactElement. The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.

- -

The release candidate is available for download:

- - - -

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

- -
-

Changelog #

React Core #

Breaking Changes #

-
    -
  • Mutating props after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
    • -
  • Static methods (defined in statics) are no longer autobound to the component class
    • -
  • ref resolution order has changed slightly such that a ref to a component is available immediately after its componentDidMount method is called; this change should be observable only if your component calls a parent component's callback within your componentDidMount, which is an anti-pattern and should be avoided regardless
    • -
  • Calls to setState in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
    • -
  • setState and forceUpdate on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
    • -
  • Access to most internal properties has been completely removed, including this._pendingState and this._rootNodeID.
    • -
-

New Features #

-
    -
  • Support for using ES6 classes to build React components; see the v0.13.0 beta 1 notes for details
    • -
  • Added new top-level API React.findDOMNode(component), which should be used in place of component.getDOMNode(). The base class for ES6-based components will not have getDOMNode. This change will enable some more patterns moving forward.
    • -
  • New ref style, allowing a callback to be used in place of a name: <Photo ref={(c) => this._photo = c} /> allows you to reference the component with this._photo (as opposed to ref="photo" which gives this.refs.photo)
    • -
  • this.setState() can now take a function as the first argument for transactional state updates, such as this.setState((state, props) => ({count: state.count + 1})); -- this means that you no longer need to use this._pendingState, which is now gone.
    • -
  • Support for iterators and immutable-js sequences as children
    • -
-

Deprecations #

-
    -
  • ComponentClass.type is deprecated. Just use ComponentClass (usually as element.type === ComponentClass)
    • -
  • Some methods that are available on createClass-based components are removed or deprecated from ES6 classes (for example, getDOMNode, setProps, replaceState).
    • -
-

React with Add-Ons #

Deprecations #

-
    -
  • React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.
    • -
-

React Tools #

Breaking Changes #

-
    -
  • When transforming ES6 syntax, class methods are no longer enumerable by default, which requires Object.defineProperty; if you support browsers such as IE8, you can pass --target es3 to mirror the old behavior
    • -
-

New Features #

-
    -
  • --target option is available on the jsx command, allowing users to specify and ECMAScript version to target. - -
      -
    • es5 is the default.
      • -
    • es3 restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static will become this['static'] for IE8 compatibility).
      • -
    • -
  • The transform for the call spread operator has also been enabled.
    • -
-

JSX #

Breaking Changes #

-
    -
  • A change was made to how some JSX was parsed, specifically around the use of > or } when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.
    • -
- -
-
- @@ -90,6 +90,88 @@
+
+

Community Round-up #12

+

December 23, 2013 by Vjeux

+
+
+

React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

+

The Future of Javascript MVC #

+

David Nolen announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient shouldComponentUpdate and get huge performance improvements on some tasks.

+ +
+

We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.

+ +

Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?

+ +

A whole lot. +

+ +

Read the full article...

+
+

Scroll Position with React #

+

Managing the scroll position when new content is inserted is usually very tricky to get right. Vjeux discovered that componentWillUpdate and componentDidUpdate were triggered exactly at the right time to manage the scroll position.

+ +
+

We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate

+
componentWillUpdate: function() {
+  var node = this.getDOMNode();
+  this.shouldScrollBottom =
+    (node.scrollTop + node.offsetHeight) === node.scrollHeight;
+},
+componentDidUpdate: function() {
+  if (this.shouldScrollBottom) {
+    var node = this.getDOMNode();
+    node.scrollTop = node.scrollHeight
+  }
+},
+
+

Check out the blog article...

+
+

Lights Out #

+

React declarative approach is well suited to write games. Cheng Lou wrote the famous Lights Out game in React. It's a good example of use of TransitionGroup to implement animations. +

+ +

Try it out!

+

Reactive Table Bookmarklet #

+

Stoyan Stefanov wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json. +

+ +

Check out the blog post...

+

MontageJS Tutorial in React #

+

Ross Allen implemented MontageJS's Reddit tutorial in React. This is a good opportunity to compare the philosophies of the two libraries.

+ + + +

View the source on JSFiddle...

+

Writing Good React Components #

+

William Högman Rudenmalm wrote an article on how to write good React components. This is full of good advice.

+ +
+

The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.

+ +

The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.

+ +

You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.

+ +

Read the full article ...

+
+

Hoodie React TodoMVC #

+

Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.

+
hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
+
+

Check out on GitHub...

+

JSX Compiler #

+

Ever wanted to have a quick way to see what a JSX tag would be converted to? Tim Yung made a page for it. +

+ +

Try it out!

+

Random Tweet #

+

+ +
+
+

React v0.8

December 19, 2013 by Paul O'Shannessy

@@ -355,153 +437,6 @@ Is this some sort of template language? Specifically no. This might have been th
-
-

Thinking in React

-

November 5, 2013 by Pete Hunt

-
-
-

React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

- -

One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.

-

Start with a mock #

-

Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:

- -

Mockup

- -

Our JSON API returns some data that looks like this:

-
[
-  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
-  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
-  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
-  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
-  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
-  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
-];
-

Step 1: break the UI into a component hierarchy #

-

The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

- -

But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.

- -

Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same information architecture which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.

- -

Component diagram

- -

You'll see here that we have five components in our simple app. I've italicized the data each component represents.

- -
    -
  1. FilterableProductTable (orange): contains the entirety of the example
    2. -
  2. SearchBar (blue): receives all user input
    3. -
  3. ProductTable (green): displays and filters the data collection based on user input
    4. -
  4. ProductCategoryRow (turquoise): displays a heading for each category
    5. -
  5. ProductRow (red): displays a row for each product
    6. -
- -

If you look at ProductTable you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of ProductTable because it is part of rendering the data collection which is ProductTable's responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own ProductTableHeader component.

- -

Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:

- -
    -
  • FilterableProductTable - -
      -
    • SearchBar
      • -
    • ProductTable - -
        -
      • ProductCategoryRow
        • -
      • ProductRow
        • -
      • -
    • -
-

Step 2: Build a static version in React #

- - -

Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.

- -

To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you're familiar with the concept of state, don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.

- -

You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with FilterableProductTable) or with the ones lower in it (ProductRow). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.

- -

At the end of this step you'll have a library of reusable components that render your data model. The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop. If you make a change to your underlying data model and call renderComponent() again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's one-way data flow (also called one-way binding) keeps everything modular, easy to reason about, and fast.

- -

Simply refer to the React docs if you need help executing this step.

-

A brief interlude: props vs state #

-

There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim the official React docs if you aren't sure what the difference is.

-

Step 3: Identify the minimal (but complete) representation of UI state #

-

To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with state.

- -

To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don't Repeat Yourself. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.

- -

Think of all of the pieces of data in our example application. We have:

- -
    -
  • The original list of products
    • -
  • The search text the user has entered
    • -
  • The value of the checkbox
    • -
  • The filtered list of products
    • -
- -

Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:

- -
    -
  1. Is it passed in from a parent via props? If so, it probably isn't state.
    2. -
  2. Does it change over time? If not, it probably isn't state.
    3. -
  3. Can you compute it based on any other state or props in your component? If so, it's not state.
    4. -
- -

The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.

- -

So finally, our state is:

- -
    -
  • The search text the user has entered
    • -
  • The value of the checkbox
    • -
-

Step 4: Identify where your state should live #

- - -

OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or owns, this state.

- -

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:

- -

For each piece of state in your application:

- -
    -
  • Identify every component that renders something based on that state.
    • -
  • Find a common owner component (a single component above all the components that need the state in the hierarchy).
    • -
  • Either the common owner or another component higher up in the hierarchy should own the state.
    • -
  • If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
    • -
- -

Let's run through this strategy for our application:

- -
    -
  • ProductTable needs to filter the product list based on state and SearchBar needs to display the search text and checked state.
    • -
  • The common owner component is FilterableProductTable.
    • -
  • It conceptually makes sense for the filter text and checked value to live in FilterableProductTable
    • -
- -

Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

- -

You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see the data table is updated correctly.

-

Step 5: Add inverse data flow #

- - -

So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable.

- -

React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called ReactLink to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.

- -

If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the value prop of the input to always be equal to the state passed in from FilterableProductTable.

- -

Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, FilterableProductTable will pass a callback to SearchBar that will fire whenever the state should be updated. We can use the onChange event on the inputs to be notified of it. And the callback passed by FilterableProductTable will call setState() and the app will be updated.

- -

Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

-

And that's it #

-

Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

- -
-
- @@ -90,6 +90,153 @@
+
+

Thinking in React

+

November 5, 2013 by Pete Hunt

+
+
+

React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

+ +

One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.

+

Start with a mock #

+

Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:

+ +

Mockup

+ +

Our JSON API returns some data that looks like this:

+
[
+  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
+  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
+  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
+  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
+  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
+  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
+];
+

Step 1: break the UI into a component hierarchy #

+

The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!

+ +

But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.

+ +

Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same information architecture which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.

+ +

Component diagram

+ +

You'll see here that we have five components in our simple app. I've italicized the data each component represents.

+ +
    +
  1. FilterableProductTable (orange): contains the entirety of the example
    2. +
  2. SearchBar (blue): receives all user input
    3. +
  3. ProductTable (green): displays and filters the data collection based on user input
    4. +
  4. ProductCategoryRow (turquoise): displays a heading for each category
    5. +
  5. ProductRow (red): displays a row for each product
    6. +
+ +

If you look at ProductTable you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of ProductTable because it is part of rendering the data collection which is ProductTable's responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own ProductTableHeader component.

+ +

Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:

+ +
    +
  • FilterableProductTable + +
      +
    • SearchBar
      • +
    • ProductTable + +
        +
      • ProductCategoryRow
        • +
      • ProductRow
        • +
      • +
    • +
+

Step 2: Build a static version in React #

+ + +

Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.

+ +

To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you're familiar with the concept of state, don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.

+ +

You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with FilterableProductTable) or with the ones lower in it (ProductRow). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.

+ +

At the end of this step you'll have a library of reusable components that render your data model. The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop. If you make a change to your underlying data model and call renderComponent() again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's one-way data flow (also called one-way binding) keeps everything modular, easy to reason about, and fast.

+ +

Simply refer to the React docs if you need help executing this step.

+

A brief interlude: props vs state #

+

There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim the official React docs if you aren't sure what the difference is.

+

Step 3: Identify the minimal (but complete) representation of UI state #

+

To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with state.

+ +

To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: Don't Repeat Yourself. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.

+ +

Think of all of the pieces of data in our example application. We have:

+ +
    +
  • The original list of products
    • +
  • The search text the user has entered
    • +
  • The value of the checkbox
    • +
  • The filtered list of products
    • +
+ +

Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:

+ +
    +
  1. Is it passed in from a parent via props? If so, it probably isn't state.
    2. +
  2. Does it change over time? If not, it probably isn't state.
    3. +
  3. Can you compute it based on any other state or props in your component? If so, it's not state.
    4. +
+ +

The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.

+ +

So finally, our state is:

+ +
    +
  • The search text the user has entered
    • +
  • The value of the checkbox
    • +
+

Step 4: Identify where your state should live #

+ + +

OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or owns, this state.

+ +

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand, so follow these steps to figure it out:

+ +

For each piece of state in your application:

+ +
    +
  • Identify every component that renders something based on that state.
    • +
  • Find a common owner component (a single component above all the components that need the state in the hierarchy).
    • +
  • Either the common owner or another component higher up in the hierarchy should own the state.
    • +
  • If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
    • +
+ +

Let's run through this strategy for our application:

+ +
    +
  • ProductTable needs to filter the product list based on state and SearchBar needs to display the search text and checked state.
    • +
  • The common owner component is FilterableProductTable.
    • +
  • It conceptually makes sense for the filter text and checked value to live in FilterableProductTable
    • +
+ +

Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

+ +

You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see the data table is updated correctly.

+

Step 5: Add inverse data flow #

+ + +

So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in FilterableProductTable.

+ +

React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called ReactLink to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.

+ +

If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the value prop of the input to always be equal to the state passed in from FilterableProductTable.

+ +

Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, FilterableProductTable will pass a callback to SearchBar that will fire whenever the state should be updated. We can use the onChange event on the inputs to be notified of it. And the callback passed by FilterableProductTable will call setState() and the app will be updated.

+ +

Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.

+

And that's it #

+

Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

+ +
+
+

React v0.5.1

October 29, 2013 by Paul O'Shannessy

@@ -309,88 +456,6 @@
-
-

Community Round-up #7

-

August 26, 2013 by Vjeux

-
-
-

It's been three months since we open sourced React and it is going well. Some stats so far:

- - -

Wolfenstein Rendering Engine Ported to React #

-

Pete Hunt ported the render code of the web version of Wolfenstein 3D to React. Check out the demo and render.js file for the implementation. -

-

React & Meteor #

-

Ben Newman made a 13-lines wrapper to use React and Meteor together. Meteor handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

- -
-

This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.

- -

The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.

-
var MyComponent = React.createClass({
- mixins: [MeteorMixin],
-
- getMeteorState: function() {
-   return { foo: Session.get('foo') };
- },
-
- render: function() {
-   return <div>{this.state.foo}</div>;
- }
-});
-
-

Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.

- -

Read more ...

-
-

React Page #

-

Jordan Walke implemented a complete React project creator called react-page. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.

- -
-

Easy Application Development with React JavaScript -

- -

Why Server Rendering?

- -
    -
  • Faster initial page speed: - -
      -
    • Markup displayed before downloading large JavaScript.
      • -
    • Markup can be generated more quickly on a fast server than low power client devices.
      • -
    • -
  • Faster Development and Prototyping: - -
      -
    • Instantly refresh your app without waiting for any watch scripts or bundlers.
      • -
    • -
  • Easy deployment of static content pages/blogs: just archive using recursive wget.
    • -
  • SEO benefits of indexability and perf.
    • -
- -

How Does Server Rendering Work?

- -
    -
  • react-page computes page markup on the server, sends it to the client so the user can see it quickly.
    • -
  • The corresponding JavaScript is then packaged and sent.
    • -
  • The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
    • -
  • From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
    • -
- -

Try it out ...

-
- -
-
- @@ -90,6 +90,88 @@
+
+

Community Round-up #7

+

August 26, 2013 by Vjeux

+
+
+

It's been three months since we open sourced React and it is going well. Some stats so far:

+ + +

Wolfenstein Rendering Engine Ported to React #

+

Pete Hunt ported the render code of the web version of Wolfenstein 3D to React. Check out the demo and render.js file for the implementation. +

+

React & Meteor #

+

Ben Newman made a 13-lines wrapper to use React and Meteor together. Meteor handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

+ +
+

This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.

+ +

The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.

+
var MyComponent = React.createClass({
+ mixins: [MeteorMixin],
+
+ getMeteorState: function() {
+   return { foo: Session.get('foo') };
+ },
+
+ render: function() {
+   return <div>{this.state.foo}</div>;
+ }
+});
+
+

Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.

+ +

Read more ...

+
+

React Page #

+

Jordan Walke implemented a complete React project creator called react-page. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.

+ +
+

Easy Application Development with React JavaScript +

+ +

Why Server Rendering?

+ +
    +
  • Faster initial page speed: + +
      +
    • Markup displayed before downloading large JavaScript.
      • +
    • Markup can be generated more quickly on a fast server than low power client devices.
      • +
    • +
  • Faster Development and Prototyping: + +
      +
    • Instantly refresh your app without waiting for any watch scripts or bundlers.
      • +
    • +
  • Easy deployment of static content pages/blogs: just archive using recursive wget.
    • +
  • SEO benefits of indexability and perf.
    • +
+ +

How Does Server Rendering Work?

+ +
    +
  • react-page computes page markup on the server, sends it to the client so the user can see it quickly.
    • +
  • The corresponding JavaScript is then packaged and sent.
    • +
  • The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
    • +
  • From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
    • +
+ +

Try it out ...

+
+ +
+
+

Use React and JSX in Python Applications

August 19, 2013 by Kunal Mehta

@@ -266,104 +348,6 @@
-
-

Community Round-up #5

-

July 23, 2013 by Vjeux

-
-
-

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

-

Cross-browser onChange #

-

Ben Alpert from Khan Academy worked on a cross-browser implementation of onChange event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.

- -
-

First off, what is the input event? If you have an <input> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.

- -

Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using setTimeout(fn, 0) or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).

- -

Read the full post...

-
-

React Samples #

-

Learning a new library is always easier when you have working examples you can play with. jwh put many of them on his react-samples Github repo.

- -
-

Some simple examples with Facebook's React framework

- - -
-

React Chosen Wrapper #

-

Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

-
React.renderComponent(
-  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
-    <option value="Facebook">Facebook</option>
-    <option value="Harvest">Harvest</option>
-  </Chosen>
-, document.body);
-

JSX and ES6 Template Strings #

-

Domenic Denicola wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.

- -
-

React Presentation #

-

Tom Occhino and Jordan Walke, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.

- -
-

Docs #

-

Pete Hunt rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.

- -
-

Guides

- - -
- -
-
- @@ -90,6 +90,104 @@
+
+

Community Round-up #5

+

July 23, 2013 by Vjeux

+
+
+

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

+

Cross-browser onChange #

+

Ben Alpert from Khan Academy worked on a cross-browser implementation of onChange event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.

+ +
+

First off, what is the input event? If you have an <input> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.

+ +

Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using setTimeout(fn, 0) or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).

+ +

Read the full post...

+
+

React Samples #

+

Learning a new library is always easier when you have working examples you can play with. jwh put many of them on his react-samples Github repo.

+ +
+

Some simple examples with Facebook's React framework

+ + +
+

React Chosen Wrapper #

+

Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

+
React.renderComponent(
+  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
+    <option value="Facebook">Facebook</option>
+    <option value="Harvest">Harvest</option>
+  </Chosen>
+, document.body);
+

JSX and ES6 Template Strings #

+

Domenic Denicola wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.

+ +
+

React Presentation #

+

Tom Occhino and Jordan Walke, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.

+ +
+

Docs #

+

Pete Hunt rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.

+ +
+

Guides

+ + +
+ +
+
+

React v0.4.0

July 17, 2013 by Paul O'Shannessy

@@ -291,89 +389,6 @@ If you were using React without JSX previously, your code should still work.
-
-

Community Round-up #3

-

June 27, 2013 by Vjeux

-
-
-

The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

-

Moving From Backbone To React #

-

Clay Allsopp successfully ported Propeller, a fairly big, interaction-heavy JavaScript app, to React.

- -
-

Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.

- -

React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]

- -

We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.

- -

Read the full post...

-
-

Grunt Task for JSX #

-

Eric Clemmons wrote a task for Grunt that applies the JSX transformation to your Javascript files. It also works with Browserify if you want all your files to be concatenated and minified together.

- -
-

Grunt task for compiling Facebook React's .jsx templates into .js

-
grunt.initConfig({
-  react: {
-    app: {
-      options: { extension: 'js' },
-      files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
-
-

It also works great with grunt-browserify!

-
browserify: {
-  options: {
-    transform: [ require('grunt-react').browserify ]
-  },
-  app: {
-    src: 'path/to/source/main.js',
-    dest: 'path/to/target/output.js'
-
-

Check out the project ...

-
-

Backbone/Handlebars Nested Views #

-

Joel Burget wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.

- -
-

The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.

- -

What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).

- -

So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.

- -

Read the full post...

-
-

JSRomandie Meetup #

-

Renault John Lecoultre from BugBuster did a React introduction talk at a JS meetup called JS Romandie last week.

- - -

CoffeeScript integration #

-

Vjeux used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.

- -
-

Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.

-
{div, h3, textarea} = React.DOM
-(div {className: 'MarkdownEditor'}, [
-  (h3 {}, 'Input'),
-  (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
-    @state.value
-  )
-])
-
-

Read the full post...

-
-

Tutorial in Plain Javascript #

-

We've seen a lot of people comparing React with various frameworks. Ricardo Tomasi decided to re-implement the tutorial without any framework, just plain Javascript.

- -
-

Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.

- -

Read the full post...

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

Community Round-up #3

+

June 27, 2013 by Vjeux

+
+
+

The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.

+

Moving From Backbone To React #

+

Clay Allsopp successfully ported Propeller, a fairly big, interaction-heavy JavaScript app, to React.

+ +
+

Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.

+ +

React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]

+ +

We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.

+ +

Read the full post...

+
+

Grunt Task for JSX #

+

Eric Clemmons wrote a task for Grunt that applies the JSX transformation to your Javascript files. It also works with Browserify if you want all your files to be concatenated and minified together.

+ +
+

Grunt task for compiling Facebook React's .jsx templates into .js

+
grunt.initConfig({
+  react: {
+    app: {
+      options: { extension: 'js' },
+      files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
+
+

It also works great with grunt-browserify!

+
browserify: {
+  options: {
+    transform: [ require('grunt-react').browserify ]
+  },
+  app: {
+    src: 'path/to/source/main.js',
+    dest: 'path/to/target/output.js'
+
+

Check out the project ...

+
+

Backbone/Handlebars Nested Views #

+

Joel Burget wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.

+ +
+

The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.

+ +

What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).

+ +

So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.

+ +

Read the full post...

+
+

JSRomandie Meetup #

+

Renault John Lecoultre from BugBuster did a React introduction talk at a JS meetup called JS Romandie last week.

+ + +

CoffeeScript integration #

+

Vjeux used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.

+ +
+

Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.

+
{div, h3, textarea} = React.DOM
+(div {className: 'MarkdownEditor'}, [
+  (h3 {}, 'Input'),
+  (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
+    @state.value
+  )
+])
+
+

Read the full post...

+
+

Tutorial in Plain Javascript #

+

We've seen a lot of people comparing React with various frameworks. Ricardo Tomasi decided to re-implement the tutorial without any framework, just plain Javascript.

+ +
+

Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.

+ +

Read the full post...

+
+ +
+
+

React v0.3.3

June 21, 2013 by Paul O'Shannessy

@@ -329,20 +412,6 @@ but if you are interested in the nuts and bolts
-
-

JSFiddle Integration

-

June 2, 2013 by Christopher Chedeau

-
-
-

JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.

- - - - - -
-
-
diff --git a/blog/page15/index.html b/blog/page15/index.html new file mode 100644 index 0000000000..179062b9b6 --- /dev/null +++ b/blog/page15/index.html @@ -0,0 +1,152 @@ + + + + + + + Blog | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + +
+
+ + + +
+
+
+

Recent posts

+ +
+
+ +
+ +
+

JSFiddle Integration

+

June 2, 2013 by Christopher Chedeau

+
+
+

JSFiddle just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this base React JSFiddle, fork it and share it! A fiddle without JSX is also available.

+ + + + + +
+
+ + + +
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2015 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + + diff --git a/blog/page2/index.html b/blog/page2/index.html index 61c2752e93..0fc1ef26bb 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -63,6 +63,8 @@

Recent posts

@@ -90,6 +90,79 @@
+
+

React v0.13 RC

+

February 24, 2015 by Paul O'Shannessy

+
+
+

Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!

+ +

We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in our beta announcement. We're really excited about this! Sebastian also posted earlier this morning about some of the other changes coming focused around ReactElement. The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.

+ +

The release candidate is available for download:

+ + + +

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

+ +
+

Changelog #

React Core #

Breaking Changes #

+
    +
  • Mutating props after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
    • +
  • Static methods (defined in statics) are no longer autobound to the component class
    • +
  • ref resolution order has changed slightly such that a ref to a component is available immediately after its componentDidMount method is called; this change should be observable only if your component calls a parent component's callback within your componentDidMount, which is an anti-pattern and should be avoided regardless
    • +
  • Calls to setState in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
    • +
  • setState and forceUpdate on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
    • +
  • Access to most internal properties has been completely removed, including this._pendingState and this._rootNodeID.
    • +
+

New Features #

+
    +
  • Support for using ES6 classes to build React components; see the v0.13.0 beta 1 notes for details
    • +
  • Added new top-level API React.findDOMNode(component), which should be used in place of component.getDOMNode(). The base class for ES6-based components will not have getDOMNode. This change will enable some more patterns moving forward.
    • +
  • New ref style, allowing a callback to be used in place of a name: <Photo ref={(c) => this._photo = c} /> allows you to reference the component with this._photo (as opposed to ref="photo" which gives this.refs.photo)
    • +
  • this.setState() can now take a function as the first argument for transactional state updates, such as this.setState((state, props) => ({count: state.count + 1})); -- this means that you no longer need to use this._pendingState, which is now gone.
    • +
  • Support for iterators and immutable-js sequences as children
    • +
+

Deprecations #

+
    +
  • ComponentClass.type is deprecated. Just use ComponentClass (usually as element.type === ComponentClass)
    • +
  • Some methods that are available on createClass-based components are removed or deprecated from ES6 classes (for example, getDOMNode, setProps, replaceState).
    • +
+

React with Add-Ons #

Deprecations #

+
    +
  • React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.
    • +
+

React Tools #

Breaking Changes #

+
    +
  • When transforming ES6 syntax, class methods are no longer enumerable by default, which requires Object.defineProperty; if you support browsers such as IE8, you can pass --target es3 to mirror the old behavior
    • +
+

New Features #

+
    +
  • --target option is available on the jsx command, allowing users to specify and ECMAScript version to target. + +
      +
    • es5 is the default.
      • +
    • es3 restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static will become this['static'] for IE8 compatibility).
      • +
    • +
  • The transform for the call spread operator has also been enabled.
    • +
+

JSX #

Breaking Changes #

+
    +
  • A change was made to how some JSX was parsed, specifically around the use of > or } when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.
    • +
+ +
+
+

Streamlining React Elements

February 24, 2015 by Sebastian Markbåge

@@ -708,47 +781,6 @@
-
-

React.js Conf Diversity Scholarship

-

December 19, 2014 by Paul O’Shannessy

-
-
-

Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

- -

I'm really excited about this and I hope you are too! The full announcement is below:

- -
- -

The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!

- -

Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the website and previous updates on our blog.

- -

At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. -Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.

- -

To apply for the scholarship, please visit the Application Page: https://www.surveymonkey.com/s/XVJGK6R

-

Award Includes #

-
    -
  • Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
    • -
  • Paid travel and lodging expenses
    • -
  • Additional $200 meal stipend
    • -
-

Important Dates #

-
    -
  • Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
    • -
  • Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
    • -
  • Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
    • -
-

Eligibility #

-
    -
  • Must currently be studying or working in Computer Science or a related field
    • -
  • International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
    • -
  • You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park
    • -
- -
-
- @@ -90,6 +90,47 @@
+
+

React.js Conf Diversity Scholarship

+

December 19, 2014 by Paul O’Shannessy

+
+
+

Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.

+ +

I'm really excited about this and I hope you are too! The full announcement is below:

+ +
+ +

The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!

+ +

Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the website and previous updates on our blog.

+ +

At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. +Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.

+ +

To apply for the scholarship, please visit the Application Page: https://www.surveymonkey.com/s/XVJGK6R

+

Award Includes #

+
    +
  • Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
    • +
  • Paid travel and lodging expenses
    • +
  • Additional $200 meal stipend
    • +
+

Important Dates #

+
    +
  • Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
    • +
  • Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
    • +
  • Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
    • +
+

Eligibility #

+
    +
  • Must currently be studying or working in Computer Science or a related field
    • +
  • International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
    • +
  • You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park
    • +
+ +
+
+

React v0.12.2

December 18, 2014 by Paul O’Shannessy

@@ -377,24 +418,6 @@ Minified build for production: -

React.js Conf

-

October 27, 2014 by Vjeux

-
-
-

Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

- -

We're happy to announce React.js Conf! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.

- -

Before we open registration, we're looking for great talks. We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!

- -

Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...

- -

We look forward to seeing many of you in person in just a few short months!

- -
-
- @@ -90,6 +90,24 @@
+
+

React.js Conf

+

October 27, 2014 by Vjeux

+
+
+

Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

+ +

We're happy to announce React.js Conf! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.

+ +

Before we open registration, we're looking for great talks. We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!

+ +

Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...

+ +

We look forward to seeing many of you in person in just a few short months!

+ +
+
+

Community Round-up #23

October 17, 2014 by Lou Husson

@@ -747,62 +765,6 @@ Minified build for production: -

React v0.11.2

-

September 16, 2014 by Paul O’Shannessy

-
-
-

Today we're releasing React v0.11.2 to add a few small features.

- -

We're adding support for two more DOM elements, <dialog> and <picture>, as well as the associated attributes needed to use these elements: open, media, and sizes. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.

- -

We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing React.createDescriptor with React.createElement. createDescriptor will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.

- -

And lastly, on the heels of announcing Flow at @Scale yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the jsx transform. To use, simply use the --strip-types flag on the command line, or set stripTypes in the options object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.

- -

The release is available for download from the CDN:

- - - -

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

- -

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

-

React Core #

New Features #

-
    -
  • Added support for <dialog> element and associated open attribute
    • -
  • Added support for <picture> element and associated media and sizes attributes
    • -
  • Added React.createElement API in preparation for React v0.12 - -
      -
    • React.createDescriptor has been deprecated as a result
      • -
    • -
-

JSX #

-
    -
  • <picture> is now parsed into React.DOM.picture
    • -
-

React Tools #

-
    -
  • Update esprima and jstransform for correctness fixes
    • -
  • The jsx executable now exposes a --strip-types flag which can be used to remove TypeScript-like type annotations - -
      -
    • This option is also exposed to require('react-tools').transform as stripTypes
      • -
    • -
- -
-
- @@ -90,6 +90,62 @@
+
+

React v0.11.2

+

September 16, 2014 by Paul O’Shannessy

+
+
+

Today we're releasing React v0.11.2 to add a few small features.

+ +

We're adding support for two more DOM elements, <dialog> and <picture>, as well as the associated attributes needed to use these elements: open, media, and sizes. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.

+ +

We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing React.createDescriptor with React.createElement. createDescriptor will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.

+ +

And lastly, on the heels of announcing Flow at @Scale yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the jsx transform. To use, simply use the --strip-types flag on the command line, or set stripTypes in the options object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.

+ +

The release is available for download from the CDN:

+ + + +

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

+ +

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

+

React Core #

New Features #

+
    +
  • Added support for <dialog> element and associated open attribute
    • +
  • Added support for <picture> element and associated media and sizes attributes
    • +
  • Added React.createElement API in preparation for React v0.12 + +
      +
    • React.createDescriptor has been deprecated as a result
      • +
    • +
+

JSX #

+
    +
  • <picture> is now parsed into React.DOM.picture
    • +
+

React Tools #

+
    +
  • Update esprima and jstransform for correctness fixes
    • +
  • The jsx executable now exposes a --strip-types flag which can be used to remove TypeScript-like type annotations + +
      +
    • This option is also exposed to require('react-tools').transform as stripTypes
      • +
    • +
+ +
+
+

Community Round-up #22

September 12, 2014 by Lou Husson

@@ -317,93 +373,6 @@ This is not the intended way to use React but can be useful as last resort if yo
-
-

Community Round-up #20

-

July 28, 2014 by Lou Husson

-
-
-

It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)

-

Atom moves to React #

-

Atom, GitHub's code editor, is now using React to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.

- -

-

Why Does React Scale? #

-

At the last JSConf.us, Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the annotated slides.

- - -

Live Editing #

-

One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... Dan Abramov got hot code reloading working with webpack in order to live edit a React project!

- - -

ReactIntl Mixin by Yahoo #

-

There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an internationalization mixin. It's great to see them getting excited about React and contributing back to the community.

-
var MyComponent = React.createClass({
-  mixins: [ReactIntlMixin],
-  render: function() {
-    return (
-      <div>
-        <p>{this.intlDate(1390518044403, { hour: 'numeric', minute: 'numeric' })}</p>
-        <p>{this.intlNumber(400, { style: 'percent' })}</p>
-      </div>
-    );
-  }
-});
-
-React.renderComponent(
-  <MyComponent locales={['fr-FR']} />,
-  document.getElementById('example')
-);
-

Thinking and Learning React #

-

Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.

-

London React Meetup #

-

If you missed the last London React Meetup, the video is available, with lots of great content.

- -
    -
  • What's new in React 0.11 and how to improve performance by guaranteeing immutability
    • -
  • State handling in React with Morearty.JS
    • -
  • React on Rails - How to use React with Ruby on Rails to build isomorphic apps
    • -
  • Building an isomorphic, real-time to-do list with moped and node.js
    • -
- - - -

In related news, the next React SF Meetup will be from Prezi: “Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”. While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.

-

Using React and KendoUI Together #

-

One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write React component adapters for KendoUI.

- -
-

Acorn JSX #

-

Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a JSX parser that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!

-

ReactScriptLoader #

-

Yariv Sadan created ReactScriptLoader to make it easier to write components that require an external script.

-
var Foo = React.createClass({
-  mixins: [ReactScriptLoaderMixin],
-  getScriptURL: function() {
-    return 'http://d3js.org/d3.v3.min.js';
-  },
-  getInitialState: function() {
-    return { scriptLoading: true, scriptLoadError: false };
-  },
-  onScriptLoaded: function() {
-    this.setState({scriptLoading: false});
-  },
-  onScriptError: function() {
-    this.setState({scriptLoading: false, scriptLoadError: true});
-  },
-  render: function() {
-    var message =
-      this.state.scriptLoading ? 'Loading script...' :
-      this.state.scriptLoadError ? 'Loading failed' :
-      'Loading succeeded';
-    return <span>{message}</span>;
-  }
-});
-

Random Tweet #

- - -
-
- @@ -90,6 +90,93 @@
+
+

Community Round-up #20

+

July 28, 2014 by Lou Husson

+
+
+

It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)

+

Atom moves to React #

+

Atom, GitHub's code editor, is now using React to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.

+ +

+

Why Does React Scale? #

+

At the last JSConf.us, Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the annotated slides.

+ + +

Live Editing #

+

One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... Dan Abramov got hot code reloading working with webpack in order to live edit a React project!

+ + +

ReactIntl Mixin by Yahoo #

+

There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an internationalization mixin. It's great to see them getting excited about React and contributing back to the community.

+
var MyComponent = React.createClass({
+  mixins: [ReactIntlMixin],
+  render: function() {
+    return (
+      <div>
+        <p>{this.intlDate(1390518044403, { hour: 'numeric', minute: 'numeric' })}</p>
+        <p>{this.intlNumber(400, { style: 'percent' })}</p>
+      </div>
+    );
+  }
+});
+
+React.renderComponent(
+  <MyComponent locales={['fr-FR']} />,
+  document.getElementById('example')
+);
+

Thinking and Learning React #

+

Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post “Thinking and Learning React.js” to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.

+

London React Meetup #

+

If you missed the last London React Meetup, the video is available, with lots of great content.

+ +
    +
  • What's new in React 0.11 and how to improve performance by guaranteeing immutability
    • +
  • State handling in React with Morearty.JS
    • +
  • React on Rails - How to use React with Ruby on Rails to build isomorphic apps
    • +
  • Building an isomorphic, real-time to-do list with moped and node.js
    • +
+ + + +

In related news, the next React SF Meetup will be from Prezi: “Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”. While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.

+

Using React and KendoUI Together #

+

One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write React component adapters for KendoUI.

+ +
+

Acorn JSX #

+

Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a JSX parser that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!

+

ReactScriptLoader #

+

Yariv Sadan created ReactScriptLoader to make it easier to write components that require an external script.

+
var Foo = React.createClass({
+  mixins: [ReactScriptLoaderMixin],
+  getScriptURL: function() {
+    return 'http://d3js.org/d3.v3.min.js';
+  },
+  getInitialState: function() {
+    return { scriptLoading: true, scriptLoadError: false };
+  },
+  onScriptLoaded: function() {
+    this.setState({scriptLoading: false});
+  },
+  onScriptError: function() {
+    this.setState({scriptLoading: false, scriptLoadError: true});
+  },
+  render: function() {
+    var message =
+      this.state.scriptLoading ? 'Loading script...' :
+      this.state.scriptLoadError ? 'Loading failed' :
+      'Loading succeeded';
+    return <span>{message}</span>;
+  }
+});
+

Random Tweet #

+ + +
+
+

React v0.11.1

July 25, 2014 by Paul O’Shannessy

@@ -473,24 +560,6 @@ Minified build for production: -

One Year of Open-Source React

-

May 29, 2014 by Cheng Lou

-
-
-

Today marks the one-year open-source anniversary of React.

- -

It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The roadmap gives a glimpse into the future of the library; exciting stuff lies ahead!

- -

Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was similarly skeptical. It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. JSX, in particular, filtered out a huge chunk of potential early adopters.

- -

Fast forward one year, React has strongly grown in popularity. Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the individual contributors who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.

- -

Here’s to another year!

- -
-
- @@ -90,6 +90,24 @@
+
+

One Year of Open-Source React

+

May 29, 2014 by Cheng Lou

+
+
+

Today marks the one-year open-source anniversary of React.

+ +

It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The roadmap gives a glimpse into the future of the library; exciting stuff lies ahead!

+ +

Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was similarly skeptical. It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. JSX, in particular, filtered out a huge chunk of potential early adopters.

+ +

Fast forward one year, React has strongly grown in popularity. Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the individual contributors who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.

+ +

Here’s to another year!

+ +
+
+

Flux: An Application Architecture for React

May 6, 2014 by Bill Fisher and Jing Chen

@@ -239,80 +257,6 @@ Minified build for production: Read the docs for React.renderComponentToStaticMarkup
  • Added support for more attributes: -
      -
    • srcSet for <img> to specify images at different pixel ratios
      • -
    • textAnchor for SVG
      • -
    • - -

    Bug Fixes #

    -
      -
    • Ensure all void elements don’t insert a closing tag into the markup.
      • -
    • Ensure className={false} behaves consistently
      • -
    • Ensure this.refs is defined, even if no refs are specified.
      • -
    -

    Addons #

    - -

    react-tools #

    -
      -
    • Added an option argument to transform function. The only option supported is harmony, which behaves the same as jsx --harmony on the command line. This uses the ES6 transforms from jstransform.
      • -
    - -
    -
    - -
    -

    React v0.10 RC

    -

    March 19, 2014 by Paul O’Shannessy

    -
    -
    -

    v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.

    - -

    The release candidate is available for download from the CDN:

    - - - -

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

    - -

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

    -

    Clone On Mount #

    -

    The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (React.DOM.div(), MyComponent()) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.

    - -

    In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on this page. Most of the time you can solve your pattern by using refs.

    - -

    Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

    -
    // This is a common pattern. However instance here really refers to a
-// "descriptor", not necessarily the mounted instance.
-var instance = <MyComponent/>;
-React.renderComponent(instance);
-// ...
-instance.setProps(...);
-
-// The change here is very simple. The return value of renderComponent will be
-// the mounted instance.
-var instance = React.renderComponent(<MyComponent/>)
-// ...
-instance.setProps(...);
-
    -

    These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.

    - -

    The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of MyComponent() will fail hard.

    -

    Changelog #

    React Core #

    New Features #

    -
    @@ -90,6 +90,80 @@
    +
    +

    React v0.10 RC

    +

    March 19, 2014 by Paul O’Shannessy

    +
    +
    +

    v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.

    + +

    The release candidate is available for download from the CDN:

    + + + +

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

    + +

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

    +

    Clone On Mount #

    +

    The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (React.DOM.div(), MyComponent()) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.

    + +

    In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on this page. Most of the time you can solve your pattern by using refs.

    + +

    Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

    +
    // This is a common pattern. However instance here really refers to a
+// "descriptor", not necessarily the mounted instance.
+var instance = <MyComponent/>;
+React.renderComponent(instance);
+// ...
+instance.setProps(...);
+
+// The change here is very simple. The return value of renderComponent will be
+// the mounted instance.
+var instance = React.renderComponent(<MyComponent/>)
+// ...
+instance.setProps(...);
+
    +

    These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.

    + +

    The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of MyComponent() will fail hard.

    +

    Changelog #

    React Core #

    New Features #

    +
      +
    • Added warnings to help migrate towards descriptors
      • +
    • Made it possible to server render without React-related markup (data-reactid, data-react-checksum). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
      • +
    • Added support for more attributes: + +
        +
      • srcSet for <img> to specify images at different pixel ratios
        • +
      • textAnchor for SVG
        • +
      • +
    +

    Bug Fixes #

    +
      +
    • Ensure all void elements don’t insert a closing tag into the markup.
      • +
    • Ensure className={false} behaves consistently
      • +
    • Ensure this.refs is defined, even if no refs are specified.
      • +
    +

    Addons #

    + +

    react-tools #

    +
      +
    • Added an option argument to transform function. The only option supported is harmony, which behaves the same as jsx --harmony on the command line. This uses the ES6 transforms from jstransform.
      • +
    + +
    +
    +

    Community Round-up #18

    March 14, 2014 by Jonas Gebhardt

    @@ -489,73 +563,6 @@ Minified build for production: -

    Community Round-up #16

    -

    February 15, 2014 by Jonas Gebhardt

    -
    -
    -

    There have been many posts recently covering the why and how of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

    -

    React in a nutshell #

    -

    Got five minutes to pitch React to your coworkers? John Lynch (@johnrlynch) put together this excellent and refreshing slideshow:

    - - -

    React's diff algorithm #

    -

    React core team member Christopher Chedeau (@vjeux) explores the innards of React's tree diffing algorithm in this extensive and well-illustrated post.

    - -

    While we're talking about tree diffing: Matt Esch (@MatthewEsch) created this project, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.

    -

    Many, many new introductions to React! #

    -

    James Padosley wrote a short post on the basics (and merits) of React: What is React?

    - -
    -

    What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.

    - -

    Read the full post...

    -
    - -

    Taylor Lapeyre (@taylorlapeyre) wrote another nice introduction to React.

    - -
    -

    React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.

    - -

    Read the full post...

    -
    - -

    This "Deep explanation for newbies" by @ProJavaScript explains how to get started building a React game without using the optional JSX syntax.

    -

    React around the world #

    -

    It's great to see the React community expand internationally. This site features a React introduction in Russian.

    -

    React tutorial series #

    -

    Christopher Pitt explains React Components and React Properties. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the other posts in his React Tutorial series, e.g. on using React + Backbone Model and React + Backbone Router.

    -

    Beginner tutorial: Implementing the board game Go #

    -

    Chris LaRose walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his tutorial or go straight to the code.

    -

    Egghead.io video tutorials #

    -

    Joe Maddalone (@joemaddalone) of egghead.io created a series of React video tutorials, such as this introduction to React Components. [part 1], [part 2]

    -

    "React: Finally, a great server/client web stack" #

    -

    Eric Florenzano (@ericflo) sheds some light on what makes React perfect for server rendering:

    - -
    -

    [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]

    - -

    What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.

    - -

    Read the full post...

    -
    -

    Building a complex React component #

    -

    Matt Harrison walks through the process of creating an SVG-based Resistance Calculator using React.

    -

    Random Tweets #

    -
    - -
    - -
    - -
    - -
    - -
    -
    - @@ -90,6 +90,73 @@
    +
    +

    Community Round-up #16

    +

    February 15, 2014 by Jonas Gebhardt

    +
    +
    +

    There have been many posts recently covering the why and how of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

    +

    React in a nutshell #

    +

    Got five minutes to pitch React to your coworkers? John Lynch (@johnrlynch) put together this excellent and refreshing slideshow:

    + + +

    React's diff algorithm #

    +

    React core team member Christopher Chedeau (@vjeux) explores the innards of React's tree diffing algorithm in this extensive and well-illustrated post.

    + +

    While we're talking about tree diffing: Matt Esch (@MatthewEsch) created this project, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.

    +

    Many, many new introductions to React! #

    +

    James Padosley wrote a short post on the basics (and merits) of React: What is React?

    + +
    +

    What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.

    + +

    Read the full post...

    +
    + +

    Taylor Lapeyre (@taylorlapeyre) wrote another nice introduction to React.

    + +
    +

    React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.

    + +

    Read the full post...

    +
    + +

    This "Deep explanation for newbies" by @ProJavaScript explains how to get started building a React game without using the optional JSX syntax.

    +

    React around the world #

    +

    It's great to see the React community expand internationally. This site features a React introduction in Russian.

    +

    React tutorial series #

    +

    Christopher Pitt explains React Components and React Properties. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the other posts in his React Tutorial series, e.g. on using React + Backbone Model and React + Backbone Router.

    +

    Beginner tutorial: Implementing the board game Go #

    +

    Chris LaRose walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his tutorial or go straight to the code.

    +

    Egghead.io video tutorials #

    +

    Joe Maddalone (@joemaddalone) of egghead.io created a series of React video tutorials, such as this introduction to React Components. [part 1], [part 2]

    +

    "React: Finally, a great server/client web stack" #

    +

    Eric Florenzano (@ericflo) sheds some light on what makes React perfect for server rendering:

    + +
    +

    [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]

    + +

    What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.

    + +

    Read the full post...

    +
    +

    Building a complex React component #

    +

    Matt Harrison walks through the process of creating an SVG-based Resistance Calculator using React.

    +

    Random Tweets #

    +
    + +
    + +
    + +
    + +
    + +
    +
    +

    Community Round-up #15

    February 5, 2014 by Jonas Gebhardt

    @@ -394,88 +461,6 @@ rails s
    -
    -

    Community Round-up #12

    -

    December 23, 2013 by Vjeux

    -
    -
    -

    React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

    -

    The Future of Javascript MVC #

    -

    David Nolen announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient shouldComponentUpdate and get huge performance improvements on some tasks.

    - -
    -

    We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.

    - -

    Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?

    - -

    A whole lot. -

    - -

    Read the full article...

    -
    -

    Scroll Position with React #

    -

    Managing the scroll position when new content is inserted is usually very tricky to get right. Vjeux discovered that componentWillUpdate and componentDidUpdate were triggered exactly at the right time to manage the scroll position.

    - -
    -

    We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate

    -
    componentWillUpdate: function() {
-  var node = this.getDOMNode();
-  this.shouldScrollBottom =
-    (node.scrollTop + node.offsetHeight) === node.scrollHeight;
-},
-componentDidUpdate: function() {
-  if (this.shouldScrollBottom) {
-    var node = this.getDOMNode();
-    node.scrollTop = node.scrollHeight
-  }
-},
-
    -

    Check out the blog article...

    -
    -

    Lights Out #

    -

    React declarative approach is well suited to write games. Cheng Lou wrote the famous Lights Out game in React. It's a good example of use of TransitionGroup to implement animations. -

    - -

    Try it out!

    -

    Reactive Table Bookmarklet #

    -

    Stoyan Stefanov wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json. -

    - -

    Check out the blog post...

    -

    MontageJS Tutorial in React #

    -

    Ross Allen implemented MontageJS's Reddit tutorial in React. This is a good opportunity to compare the philosophies of the two libraries.

    - - - -

    View the source on JSFiddle...

    -

    Writing Good React Components #

    -

    William Högman Rudenmalm wrote an article on how to write good React components. This is full of good advice.

    - -
    -

    The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.

    - -

    The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.

    - -

    You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.

    - -

    Read the full article ...

    -
    -

    Hoodie React TodoMVC #

    -

    Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.

    -
    hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
-
    -

    Check out on GitHub...

    -

    JSX Compiler #

    -

    Ever wanted to have a quick way to see what a JSX tag would be converted to? Tim Yung made a page for it. -

    - -

    Try it out!

    -

    Random Tweet #

    -

    - -
    -
    -