From 33c122706365a701f6bfaedea6fd4af088eb186d Mon Sep 17 00:00:00 2001 From: Travis CI Date: Fri, 12 Jun 2015 23:49:59 +0000 Subject: [PATCH] Rebuild website --- 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/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 | 4 +- blog/2015/03/26/introducing-react-native.html | 4 +- blog/2015/03/30/community-roundup-26.html | 4 +- blog/2015/04/17/react-native-v0.4.html | 4 +- blog/2015/04/18/react-v0.13.2.html | 4 +- blog/2015/05/01/graphql-introduction.html | 4 +- blog/2015/05/08/react-v0.13.3.html | 4 +- .../05/22/react-native-release-process.html | 4 +- ...precating-jstransform-and-react-tools.html | 173 +++++++++++++ blog/all.html | 3 + blog/index.html | 92 ++++--- blog/page10/index.html | 170 ++++++------- blog/page11/index.html | 136 +++++++--- blog/page12/index.html | 148 +++-------- blog/page13/index.html | 164 +++++++----- blog/page14/index.html | 147 +++++------ blog/page15/index.html | 162 ++++++------ blog/page16/index.html | 74 +++++- blog/page2/index.html | 155 ++++-------- blog/page3/index.html | 186 ++++++++------ blog/page4/index.html | 180 ++++++-------- blog/page5/index.html | 228 ++++++++--------- blog/page6/index.html | 165 ++++++++++--- blog/page7/index.html | 210 +++------------- blog/page8/index.html | 233 +++++++++++++----- blog/page9/index.html | 137 +++++----- feed.xml | 109 ++------ 96 files changed, 1668 insertions(+), 1512 deletions(-) create mode 100644 blog/2015/06/12/deprecating-jstransform-and-react-tools.html diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index 93ca3be461..31641e0697 100644 --- a/blog/2013/06/02/jsfiddle-integration.html +++ b/blog/2013/06/02/jsfiddle-integration.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/06/05/why-react.html b/blog/2013/06/05/why-react.html index 777ef73f5d..046f3b4757 100644 --- a/blog/2013/06/05/why-react.html +++ b/blog/2013/06/05/why-react.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/06/12/community-roundup.html b/blog/2013/06/12/community-roundup.html index 31b1afd18c..9279fbf73e 100644 --- a/blog/2013/06/12/community-roundup.html +++ b/blog/2013/06/12/community-roundup.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/06/19/community-roundup-2.html b/blog/2013/06/19/community-roundup-2.html index 900c6759d4..da86580cb6 100644 --- a/blog/2013/06/19/community-roundup-2.html +++ b/blog/2013/06/19/community-roundup-2.html @@ -66,6 +66,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 64f2bb38f4..d4971f6562 100644 --- a/blog/2013/06/21/react-v0-3-3.html +++ b/blog/2013/06/21/react-v0-3-3.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index cf59b554df..9f02f30655 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -66,6 +66,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 ae0b593a3d..8cf7963766 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 @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/07/03/community-roundup-4.html b/blog/2013/07/03/community-roundup-4.html index d3af64b774..4774ee5c3f 100644 --- a/blog/2013/07/03/community-roundup-4.html +++ b/blog/2013/07/03/community-roundup-4.html @@ -66,6 +66,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 0afb5a156e..a9738d751c 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 @@ -66,6 +66,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 f8f5ddbf00..67dd801a11 100644 --- a/blog/2013/07/17/react-v0-4-0.html +++ b/blog/2013/07/17/react-v0-4-0.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html index 8b3b10875b..3059293909 100644 --- a/blog/2013/07/23/community-roundup-5.html +++ b/blog/2013/07/23/community-roundup-5.html @@ -66,6 +66,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 acf4be2f2e..4284d02134 100644 --- a/blog/2013/07/26/react-v0-4-1.html +++ b/blog/2013/07/26/react-v0-4-1.html @@ -66,6 +66,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 3fab8e9db7..0a0b6bd897 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 @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html index 4a9a313635..241d17d0c1 100644 --- a/blog/2013/08/05/community-roundup-6.html +++ b/blog/2013/08/05/community-roundup-6.html @@ -66,6 +66,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 c283e8e2b4..514cf0c526 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 @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html index 13c1b83e5b..42b8986595 100644 --- a/blog/2013/08/26/community-roundup-7.html +++ b/blog/2013/08/26/community-roundup-7.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/09/24/community-roundup-8.html b/blog/2013/09/24/community-roundup-8.html index 692c31dc55..cd22cdbdbc 100644 --- a/blog/2013/09/24/community-roundup-8.html +++ b/blog/2013/09/24/community-roundup-8.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html index 42bc11c1ad..9b66a1c36f 100644 --- a/blog/2013/10/03/community-roundup-9.html +++ b/blog/2013/10/03/community-roundup-9.html @@ -66,6 +66,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 7fc66a38c9..11397a09c2 100644 --- a/blog/2013/10/16/react-v0.5.0.html +++ b/blog/2013/10/16/react-v0.5.0.html @@ -66,6 +66,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 58ec775c38..5ee278d175 100644 --- a/blog/2013/10/29/react-v0-5-1.html +++ b/blog/2013/10/29/react-v0-5-1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html index bc63a6e0b7..7ad6ef4460 100644 --- a/blog/2013/11/06/community-roundup-10.html +++ b/blog/2013/11/06/community-roundup-10.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/11/18/community-roundup-11.html b/blog/2013/11/18/community-roundup-11.html index 6731d90b5b..1df8f7222e 100644 --- a/blog/2013/11/18/community-roundup-11.html +++ b/blog/2013/11/18/community-roundup-11.html @@ -66,6 +66,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 c3db8a1d36..fc168af723 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 @@ -66,6 +66,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 4176560e44..399c700a2e 100644 --- a/blog/2013/12/19/react-v0.8.0.html +++ b/blog/2013/12/19/react-v0.8.0.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/12/23/community-roundup-12.html b/blog/2013/12/23/community-roundup-12.html index b3ec5d2208..f2e4f347ab 100644 --- a/blog/2013/12/23/community-roundup-12.html +++ b/blog/2013/12/23/community-roundup-12.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2013/12/30/community-roundup-13.html b/blog/2013/12/30/community-roundup-13.html index 04c5c082f7..937d64ceff 100644 --- a/blog/2013/12/30/community-roundup-13.html +++ b/blog/2013/12/30/community-roundup-13.html @@ -66,6 +66,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 b78bc52e4b..73539e3a34 100644 --- a/blog/2014/01/02/react-chrome-developer-tools.html +++ b/blog/2014/01/02/react-chrome-developer-tools.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/01/06/community-roundup-14.html b/blog/2014/01/06/community-roundup-14.html index 95a99ebc0a..09117f5e9b 100644 --- a/blog/2014/01/06/community-roundup-14.html +++ b/blog/2014/01/06/community-roundup-14.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html index cc8ff54a8f..f56ecb0fed 100644 --- a/blog/2014/02/05/community-roundup-15.html +++ b/blog/2014/02/05/community-roundup-15.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/02/15/community-roundup-16.html b/blog/2014/02/15/community-roundup-16.html index cee8a85d08..c90b645837 100644 --- a/blog/2014/02/15/community-roundup-16.html +++ b/blog/2014/02/15/community-roundup-16.html @@ -66,6 +66,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 da11cae805..8beee75d59 100644 --- a/blog/2014/02/16/react-v0.9-rc1.html +++ b/blog/2014/02/16/react-v0.9-rc1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/02/20/react-v0.9.html b/blog/2014/02/20/react-v0.9.html index d5554fc603..b0479e387e 100644 --- a/blog/2014/02/20/react-v0.9.html +++ b/blog/2014/02/20/react-v0.9.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/02/24/community-roundup-17.html b/blog/2014/02/24/community-roundup-17.html index 6a31b5c7b8..e40ddac3e7 100644 --- a/blog/2014/02/24/community-roundup-17.html +++ b/blog/2014/02/24/community-roundup-17.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/03/14/community-roundup-18.html b/blog/2014/03/14/community-roundup-18.html index cffd7a8e82..226b69d78d 100644 --- a/blog/2014/03/14/community-roundup-18.html +++ b/blog/2014/03/14/community-roundup-18.html @@ -66,6 +66,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 58b173e882..eb6804b927 100644 --- a/blog/2014/03/19/react-v0.10-rc1.html +++ b/blog/2014/03/19/react-v0.10-rc1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/03/21/react-v0.10.html b/blog/2014/03/21/react-v0.10.html index ebad64d4c2..40b36ce7f1 100644 --- a/blog/2014/03/21/react-v0.10.html +++ b/blog/2014/03/21/react-v0.10.html @@ -66,6 +66,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 deb89af3df..d6e4179a6b 100644 --- a/blog/2014/03/28/the-road-to-1.0.html +++ b/blog/2014/03/28/the-road-to-1.0.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/04/04/reactnet.html b/blog/2014/04/04/reactnet.html index c192897ff2..458db7f36e 100644 --- a/blog/2014/04/04/reactnet.html +++ b/blog/2014/04/04/reactnet.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/05/06/flux.html b/blog/2014/05/06/flux.html index 67414380f3..d4b289794b 100644 --- a/blog/2014/05/06/flux.html +++ b/blog/2014/05/06/flux.html @@ -66,6 +66,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 19ad071be9..b5b88bdf01 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 @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/06/27/community-roundup-19.html b/blog/2014/06/27/community-roundup-19.html index ec57a91295..75c207d1da 100644 --- a/blog/2014/06/27/community-roundup-19.html +++ b/blog/2014/06/27/community-roundup-19.html @@ -66,6 +66,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 3b9840e5f5..d7a9dd3a8e 100644 --- a/blog/2014/07/13/react-v0.11-rc1.html +++ b/blog/2014/07/13/react-v0.11-rc1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/07/17/react-v0.11.html b/blog/2014/07/17/react-v0.11.html index f84ccfff72..9e0e063d38 100644 --- a/blog/2014/07/17/react-v0.11.html +++ b/blog/2014/07/17/react-v0.11.html @@ -66,6 +66,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 7a1ee9b666..e06f72312e 100644 --- a/blog/2014/07/25/react-v0.11.1.html +++ b/blog/2014/07/25/react-v0.11.1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/07/28/community-roundup-20.html b/blog/2014/07/28/community-roundup-20.html index ba92bcb5ca..f9633a0db4 100644 --- a/blog/2014/07/28/community-roundup-20.html +++ b/blog/2014/07/28/community-roundup-20.html @@ -66,6 +66,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 57ddae1894..743bdadcc1 100644 --- a/blog/2014/07/30/flux-actions-and-the-dispatcher.html +++ b/blog/2014/07/30/flux-actions-and-the-dispatcher.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/08/03/community-roundup-21.html b/blog/2014/08/03/community-roundup-21.html index a9f6881f73..6a90eddc87 100644 --- a/blog/2014/08/03/community-roundup-21.html +++ b/blog/2014/08/03/community-roundup-21.html @@ -66,6 +66,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 f7e1de6f11..2628a2fbd3 100644 --- a/blog/2014/09/03/introducing-the-jsx-specification.html +++ b/blog/2014/09/03/introducing-the-jsx-specification.html @@ -66,6 +66,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 9226dfa81c..dfc2025f99 100644 --- a/blog/2014/09/12/community-round-up-22.html +++ b/blog/2014/09/12/community-round-up-22.html @@ -66,6 +66,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 bc76ff45dd..c44a38deca 100644 --- a/blog/2014/09/16/react-v0.11.2.html +++ b/blog/2014/09/16/react-v0.11.2.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/09/24/testing-flux-applications.html b/blog/2014/09/24/testing-flux-applications.html index 21e7d0a29d..05504d74c0 100644 --- a/blog/2014/09/24/testing-flux-applications.html +++ b/blog/2014/09/24/testing-flux-applications.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/10/14/introducing-react-elements.html b/blog/2014/10/14/introducing-react-elements.html index d76847ee00..db4a6f2c9e 100644 --- a/blog/2014/10/14/introducing-react-elements.html +++ b/blog/2014/10/14/introducing-react-elements.html @@ -66,6 +66,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 3104df3133..040e85df1f 100644 --- a/blog/2014/10/16/react-v0.12-rc1.html +++ b/blog/2014/10/16/react-v0.12-rc1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/10/17/community-roundup-23.html b/blog/2014/10/17/community-roundup-23.html index 3927d35449..5e4ff97d2d 100644 --- a/blog/2014/10/17/community-roundup-23.html +++ b/blog/2014/10/17/community-roundup-23.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/10/27/react-js-conf.html b/blog/2014/10/27/react-js-conf.html index 79c8885578..e5da7fafc3 100644 --- a/blog/2014/10/27/react-js-conf.html +++ b/blog/2014/10/27/react-js-conf.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/10/28/react-v0.12.html b/blog/2014/10/28/react-v0.12.html index 00503cbbc8..4c01ea86f5 100644 --- a/blog/2014/10/28/react-v0.12.html +++ b/blog/2014/10/28/react-v0.12.html @@ -66,6 +66,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 6235b0c88b..b63537c2cf 100644 --- a/blog/2014/11/24/react-js-conf-updates.html +++ b/blog/2014/11/24/react-js-conf-updates.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2014/11/25/community-roundup-24.html b/blog/2014/11/25/community-roundup-24.html index 2863f5070c..f8ca9c7f31 100644 --- a/blog/2014/11/25/community-roundup-24.html +++ b/blog/2014/11/25/community-roundup-24.html @@ -66,6 +66,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 b66ca0d7c6..2960cdafd4 100644 --- a/blog/2014/12/18/react-v0.12.2.html +++ b/blog/2014/12/18/react-v0.12.2.html @@ -66,6 +66,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 2aade2cdba..0c2d2a044f 100644 --- a/blog/2014/12/19/react-js-conf-diversity-scholarship.html +++ b/blog/2014/12/19/react-js-conf-diversity-scholarship.html @@ -66,6 +66,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 7ebdd0d59b..5a718ff62a 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 @@ -66,6 +66,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 e1e1fa7401..1f58f92b46 100644 --- a/blog/2015/02/18/react-conf-roundup-2015.html +++ b/blog/2015/02/18/react-conf-roundup-2015.html @@ -66,6 +66,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 de6ed7b8da..c7436a7516 100644 --- a/blog/2015/02/20/introducing-relay-and-graphql.html +++ b/blog/2015/02/20/introducing-relay-and-graphql.html @@ -66,6 +66,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 df25942385..cb4e6237b7 100644 --- a/blog/2015/02/24/react-v0.13-rc1.html +++ b/blog/2015/02/24/react-v0.13-rc1.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/02/24/streamlining-react-elements.html b/blog/2015/02/24/streamlining-react-elements.html index c73be5cc08..6cc516f26d 100644 --- a/blog/2015/02/24/streamlining-react-elements.html +++ b/blog/2015/02/24/streamlining-react-elements.html @@ -66,6 +66,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 aef5e34fb9..944c27ecfa 100644 --- a/blog/2015/03/03/react-v0.13-rc2.html +++ b/blog/2015/03/03/react-v0.13-rc2.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/03/04/community-roundup-25.html b/blog/2015/03/04/community-roundup-25.html index 95c00cb8ce..00d5953880 100644 --- a/blog/2015/03/04/community-roundup-25.html +++ b/blog/2015/03/04/community-roundup-25.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/03/10/react-v0.13.html b/blog/2015/03/10/react-v0.13.html index d89160ac28..fba522d584 100644 --- a/blog/2015/03/10/react-v0.13.html +++ b/blog/2015/03/10/react-v0.13.html @@ -66,6 +66,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 0e6f2d0ee6..c5c538a75b 100644 --- a/blog/2015/03/16/react-v0.13.1.html +++ b/blog/2015/03/16/react-v0.13.1.html @@ -66,6 +66,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 index 204aa6120d..6fd3107467 100644 --- 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 @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/03/26/introducing-react-native.html b/blog/2015/03/26/introducing-react-native.html index 2e979dd651..e31c661917 100644 --- a/blog/2015/03/26/introducing-react-native.html +++ b/blog/2015/03/26/introducing-react-native.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/03/30/community-roundup-26.html b/blog/2015/03/30/community-roundup-26.html index f8d3ff8b04..d3f52d147b 100644 --- a/blog/2015/03/30/community-roundup-26.html +++ b/blog/2015/03/30/community-roundup-26.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/04/17/react-native-v0.4.html b/blog/2015/04/17/react-native-v0.4.html index 12d78f5c91..5d5726ca69 100644 --- a/blog/2015/04/17/react-native-v0.4.html +++ b/blog/2015/04/17/react-native-v0.4.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/04/18/react-v0.13.2.html b/blog/2015/04/18/react-v0.13.2.html index d9ea284463..8d0f3bf9e0 100644 --- a/blog/2015/04/18/react-v0.13.2.html +++ b/blog/2015/04/18/react-v0.13.2.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/05/01/graphql-introduction.html b/blog/2015/05/01/graphql-introduction.html index e26555d636..51d9de26c0 100644 --- a/blog/2015/05/01/graphql-introduction.html +++ b/blog/2015/05/01/graphql-introduction.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/05/08/react-v0.13.3.html b/blog/2015/05/08/react-v0.13.3.html index de18a16ed3..af3c2a3dd6 100644 --- a/blog/2015/05/08/react-v0.13.3.html +++ b/blog/2015/05/08/react-v0.13.3.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/05/22/react-native-release-process.html b/blog/2015/05/22/react-native-release-process.html index 5b1bf8532a..2bdfa14c0c 100644 --- a/blog/2015/05/22/react-native-release-process.html +++ b/blog/2015/05/22/react-native-release-process.html @@ -66,6 +66,8 @@

Recent posts

diff --git a/blog/2015/06/12/deprecating-jstransform-and-react-tools.html b/blog/2015/06/12/deprecating-jstransform-and-react-tools.html new file mode 100644 index 0000000000..e6f698573a --- /dev/null +++ b/blog/2015/06/12/deprecating-jstransform-and-react-tools.html @@ -0,0 +1,173 @@ + + + + + + + Deprecating JSTransform and react-tools | React + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + + + +
+
+ + + +
+
+
+

Recent posts

+ +
+
+ +
+ + + +

+ + Deprecating JSTransform and react-tools + +

+ +

+ June 12, 2015 + by + + Paul O’Shannessy + +

+ +
+ +
+

Today we're announcing the deprecation of react-tools and JSTransform.

+ +

As many people have noticed already, React and React Native have both switched their respective build systems to make use of Babel. This replaced JSTransform, the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We've faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).

+ +

react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to let it go. We won't ship a new version for v0.14.

+

Migrating to Babel #

+

Many people in the React and broader JavaScript community have already adopted Babel. It has integrations with a number of tools. Depending on your tool, you'll want to read up on the instructions.

+ +

We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.

+

Other Deprecations #

esprima-fb #

+

As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork (esprima-fb). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parse, we encourage you to look into using one of those.

+

JSXTransformer #

+

JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for <script> tags with type="text/jsx" and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with a nearly identical tool, which has already been integrated into JS Bin.

+ +

We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.

+ +
+ + +
+ + +
+
+ + +
+
+ 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 08d81d9494..a4103c1a70 100644 --- a/blog/all.html +++ b/blog/all.html @@ -65,6 +65,9 @@

All Posts

+

Deprecating JSTransform and react-tools on June 12, 2015 by Paul O’Shannessy

+ +

React Native Release Process on May 22, 2015 by Vjeux

diff --git a/blog/index.html b/blog/index.html index 8befc70b3c..16d09be200 100644 --- a/blog/index.html +++ b/blog/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,49 @@ +

+ + Deprecating JSTransform and react-tools + +

+ +

+ June 12, 2015 + by + + Paul O’Shannessy + +

+ +
+ +
+

Today we're announcing the deprecation of react-tools and JSTransform.

+ +

As many people have noticed already, React and React Native have both switched their respective build systems to make use of Babel. This replaced JSTransform, the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We've faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).

+ +

react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to let it go. We won't ship a new version for v0.14.

+

Migrating to Babel #

+

Many people in the React and broader JavaScript community have already adopted Babel. It has integrations with a number of tools. Depending on your tool, you'll want to read up on the instructions.

+ +

We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.

+

Other Deprecations #

esprima-fb #

+

As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork (esprima-fb). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parse, we encourage you to look into using one of those.

+

JSXTransformer #

+

JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for <script> tags with type="text/jsx" and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with a nearly identical tool, which has already been integrated into JS Bin.

+ +

We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.

+ +
+ + + + + +
+ + +

React Native Release Process @@ -385,51 +428,6 @@ Minified build for production: - - - -

- - React Native v0.4 - -

- -

- April 17, 2015 - by - - Vjeux - -

- -
- -
-

It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus 35 plugins and 1 app in the app store! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!

- -

I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests

-

Changelog #

-

The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:

- -
    -
  • Error messages and documentation: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
    • -
  • NPM modules compatibility: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
    • -
  • Infrastructure: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
    • -
  • Components: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
    • -
  • Tests: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
    • -
  • Patent Grant: Many of you had concerns and questions around the PATENTS file. We pushed a new version of the grant.
    • -
  • Per commit history: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
    • -
-

Where are we going? #

-

In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.

- -
- - -

diff --git a/blog/page10/index.html b/blog/page10/index.html index 95cc82cee3..84373dd363 100644 --- a/blog/page10/index.html +++ b/blog/page10/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,79 @@ +

+ + Community Round-up #17 + +

+ +

+ February 24, 2014 + by + + Jonas Gebhardt + +

+ +
+ +
+

It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

+

React in the Real World #

Facebook Lookback video editor #

+

Large parts of Facebook's web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app.

+

Russia's largest bank is now powered by React #

+

Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in this post by Vyacheslav Slinko.

+

Relato #

+

Relato by Ben Ripkens shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!

+

Makona Editor #

+

John Lynch (@johnrlynch) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors. +

+

Create Chrome extensions using React #

+

React is in no way limited to just web pages. Brandon Tilley (@BinaryMuse) just released a detailed walk-through of how he built his Chrome extension "Fast Tab Switcher" using React.

+

Twitter Streaming Client #

+

Javier Aguirre (@javaguirre) put together a simple twitter streaming client using node, socket.io and React.

+

Sproutsheet #

+

Sproutsheet is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.

+

Instant Domain Search #

+

Instant Domain Search also uses React. It sure is instant!

+

SVG-based graphical node editor #

+

NoFlo and Meemoo developer Forresto Oliphant built an awesome SVG-based node editor in React. +

+

Ultimate Tic-Tac-Toe Game in React #

+

Rafał Cieślak (@Ravicious) wrote a React version of Ultimate Tic Tac Toe. Find the source here.

+

ReactJS Gallery #

+

Emanuele Rampichini's ReactJS Gallery is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.

+ +

Emanuele shared this awesome demo video with us:

+ + +

React Components #

Table Sorter #

+

Table Sorter by bgerm [source] is another helpful React component.

+

Static-search #

+

Dmitry Chestnykh @dchest wrote a static search indexer in Go, along with a React-based web front-end that consumes search result via JSON.

+

Lorem Ipsum component #

+

Martin Andert created react-lorem-component, a simple component for all your placeholding needs.

+

Input with placeholder shim #

+

react-input=placeholder by enigma-io is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.

+

diContainer #

+

dicontainer provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.

+

React server rendering #

+

Ever wonder how to pre-render React components on the server? react-server-example by Michael Hart (@hichaelmart) walks through the necessary steps.

+ +

Similarly, Alan deLevie (@adelevie) created react-client-server-starter, another detailed walk-through of how to server-render your app.

+

Random Tweet #

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

React v0.9 @@ -608,99 +681,6 @@ Minified build for production: - - - -

- - Community Round-up #14 - -

- -

- January 6, 2014 - by - - Vjeux - -

- -
- -
-

The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.

-

React Baseline #

-

React is only one-piece of your web application stack. Mark Lussier shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.

- -
-

As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github

- -

I encourage you to fork, and make it right and submit a pull request!

- -

My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets

- -

Check it out on GitHub...

-
-

Animal Sounds #

-

Josh Duck used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React. -

- -

Download the app...

-

React Rails Tutorial #

-

Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.

- -
-
git clone https://github.com/necrodome/react-rails-tutorial
-cd react-rails-tutorial
-bundle install
-rake db:migrate
-rails s
-
-

Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!

- -

View on GitHub...

-
-

Mixing with Backbone #

-

Eldar Djafarov implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.

- -

View code on JSFiddle

- -

Check out the blog post...

-

React Infinite Scroll #

-

Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.

-
<InfiniteScroll
-  pageStart={0}
-  loadMore={loadFunc}
-  hasMore={true || false}
-  loader={<div className="loader">Loading ...</div>}>
-  {items} // <-- This is the "stuff" you want to load
-</InfiniteScroll>
-
-

Try it out on GitHub!

-

Web Components Style #

-

Thomas Aylott implemented an API that looks like Web Components but using React underneath.

- -

View the source on JSFiddle...

-

React vs Angular #

-

React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.

- -
-

First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.

- -

I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.

- -

Read the full post...

-
-

Random Tweet #

-
- -
- - -

diff --git a/blog/page11/index.html b/blog/page11/index.html index 657375729c..8bd6c7c013 100644 --- a/blog/page11/index.html +++ b/blog/page11/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,99 @@ +

+ + Community Round-up #14 + +

+ +

+ January 6, 2014 + by + + Vjeux + +

+ +
+ +
+

The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.

+

React Baseline #

+

React is only one-piece of your web application stack. Mark Lussier shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.

+ +
+

As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github

+ +

I encourage you to fork, and make it right and submit a pull request!

+ +

My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets

+ +

Check it out on GitHub...

+
+

Animal Sounds #

+

Josh Duck used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React. +

+ +

Download the app...

+

React Rails Tutorial #

+

Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.

+ +
+
git clone https://github.com/necrodome/react-rails-tutorial
+cd react-rails-tutorial
+bundle install
+rake db:migrate
+rails s
+
+

Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!

+ +

View on GitHub...

+
+

Mixing with Backbone #

+

Eldar Djafarov implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.

+ +

View code on JSFiddle

+ +

Check out the blog post...

+

React Infinite Scroll #

+

Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.

+
<InfiniteScroll
+  pageStart={0}
+  loadMore={loadFunc}
+  hasMore={true || false}
+  loader={<div className="loader">Loading ...</div>}>
+  {items} // <-- This is the "stuff" you want to load
+</InfiniteScroll>
+
+

Try it out on GitHub!

+

Web Components Style #

+

Thomas Aylott implemented an API that looks like Web Components but using React underneath.

+ +

View the source on JSFiddle...

+

React vs Angular #

+

React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.

+ +
+

First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.

+ +

I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.

+ +

Read the full post...

+
+

Random Tweet #

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

React Chrome Developer Tools @@ -415,45 +508,6 @@ componentDidUpdate: function() { -

- -
- - - -

- - React v0.5.2, v0.4.2 - -

- -

- December 18, 2013 - by - - Paul O’Shannessy - -

- -
- -
-

Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically "safe" data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.

- -

This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.

- -

Updated versions are available for immediate download via npm, bower, and on our download page.

- -

We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.

- -

While we've encouraged responsible disclosure as part of Facebook's whitehat bounty program since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has an excellent policy which we may use as our model.

- -

You can learn more about the vulnerability discussed here: CVE-2013-7035.

- -
- - -
diff --git a/blog/page12/index.html b/blog/page12/index.html index 6a71202495..7ccd66136c 100644 --- a/blog/page12/index.html +++ b/blog/page12/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,45 @@ +

+ + React v0.5.2, v0.4.2 + +

+ +

+ December 18, 2013 + by + + Paul O’Shannessy + +

+ +
+ +
+

Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a key. Typically "safe" data is used for a key, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.

+ +

This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.

+ +

Updated versions are available for immediate download via npm, bower, and on our download page.

+ +

We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.

+ +

While we've encouraged responsible disclosure as part of Facebook's whitehat bounty program since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has an excellent policy which we may use as our model.

+ +

You can learn more about the vulnerability discussed here: CVE-2013-7035.

+ +
+ + + + + +
+ + +

Community Round-up #11 @@ -433,111 +472,6 @@ Is this some sort of template language? Specifically no. This might have been th -

- -
- - - -

- - Community Round-up #9 - -

- -

- October 3, 2013 - by - - Vjeux - -

- -
- -
-

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.

- -

-

React Hackathon Winner #

-

Alex Swan implemented Qu.izti.me, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.

- -
-

The game itself is pretty simple. People join the "room" by going to http://qu.izti.me on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.

- -

In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object. -

- -

Read More...

-
-

JSConf EU Talk: Rethinking Best Practices #

-

Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:

- -
    -
  1. Build components, not templates
    2. -
  2. Re-render the whole app on every update
    3. -
  3. Virtual DOM
    4. -
- -

The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:

- -
-

Pump - Clojure bindings for React #

-

Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.

-
(ns your.app
-  (:require-macros [pump.def-macros :refer [defr]])
-  (:require [pump.core]))
-
-(defr Component
-  :get-initial-state #(identity {:some-value ""})
-
-  [component props state]
-
-  [:div {:class-name "test"} "hello"])
-
-

Check it out on GitHub...

-

JSXHint #

-

Todd Kennedy working at Condé Nast implemented a wrapper on-top of JSHint that first converts JSX files to JS.

- -
-

A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.

-
npm install -g jsxhint
-
-

Check it out on GitHub...

-
-

Turbo React #

-

Ross Allen working at Mesosphere combined Turbolinks, a library used by Ruby on Rails to speed up page transition, and React.

- -
-

"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.

- -

The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.

- -

With Turbolinks alone, the entire would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact. -

- -

Check out the demo...

-
-

Reactive Table #

-

Stoyan Stefanov continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.

- -
-

React is all about components. So let's build one.

- -

Let's call it Table (to avoid any confusion what the component is about).

-
var Table = React.createClass({
-  /*stuff goeth here*/
-});
-
-

You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.

- -

Read the full article...

-
- -
- - -
diff --git a/blog/page13/index.html b/blog/page13/index.html index 1e298fd9ed..10def1a7ca 100644 --- a/blog/page13/index.html +++ b/blog/page13/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,111 @@ +

+ + Community Round-up #9 + +

+ +

+ October 3, 2013 + by + + Vjeux + +

+ +
+ +
+

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.

+ +

+

React Hackathon Winner #

+

Alex Swan implemented Qu.izti.me, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.

+ +
+

The game itself is pretty simple. People join the "room" by going to http://qu.izti.me on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.

+ +

In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object. +

+ +

Read More...

+
+

JSConf EU Talk: Rethinking Best Practices #

+

Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:

+ +
    +
  1. Build components, not templates
    2. +
  2. Re-render the whole app on every update
    3. +
  3. Virtual DOM
    4. +
+ +

The video will be available soon on the JSConf EU website, but in the meantime, here are Pete's slides:

+ +
+

Pump - Clojure bindings for React #

+

Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.

+
(ns your.app
+  (:require-macros [pump.def-macros :refer [defr]])
+  (:require [pump.core]))
+
+(defr Component
+  :get-initial-state #(identity {:some-value ""})
+
+  [component props state]
+
+  [:div {:class-name "test"} "hello"])
+
+

Check it out on GitHub...

+

JSXHint #

+

Todd Kennedy working at Condé Nast implemented a wrapper on-top of JSHint that first converts JSX files to JS.

+ +
+

A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.

+
npm install -g jsxhint
+
+

Check it out on GitHub...

+
+

Turbo React #

+

Ross Allen working at Mesosphere combined Turbolinks, a library used by Ruby on Rails to speed up page transition, and React.

+ +
+

"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.

+ +

The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.

+ +

With Turbolinks alone, the entire would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact. +

+ +

Check out the demo...

+
+

Reactive Table #

+

Stoyan Stefanov continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.

+ +
+

React is all about components. So let's build one.

+ +

Let's call it Table (to avoid any confusion what the component is about).

+
var Table = React.createClass({
+  /*stuff goeth here*/
+});
+
+

You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.

+ +

Read the full article...

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

Community Round-up #8 @@ -426,61 +531,6 @@ -

- -
- - - -

- - Use React and JSX in Ruby on Rails - -

- -

- July 30, 2013 - by - - Paul O’Shannessy - -

- -
- -
-

Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

- -

This gem has 2 primary purposes:

- -
    -
  1. To package react.js in a way that's easy to use and easy to update.
    2. -
  2. To allow you to write JSX without an external build step to transform that into JS.
    3. -
-

Packaging react.js #

-

To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

-
# config/environments/development.rb
-
-MyApp::Application.configure do
-  config.react.variant = :development
-  # use :production in production.rb
-end
-
// app/assets/javascript/application.js
-
-//= require react
-

Writing JSX #

-

When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

-
/** @jsx React.DOM */
-React.renderComponent(<MyComponent/>, document.getElementById('example'))
-

Asset Pipeline #

-

react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

-

Installation #

-

Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.

- -
- - -
diff --git a/blog/page14/index.html b/blog/page14/index.html index 35cb5ea7bd..f818b3e302 100644 --- a/blog/page14/index.html +++ b/blog/page14/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,61 @@ +

+ + Use React and JSX in Ruby on Rails + +

+ +

+ July 30, 2013 + by + + Paul O’Shannessy + +

+ +
+ +
+

Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

+ +

This gem has 2 primary purposes:

+ +
    +
  1. To package react.js in a way that's easy to use and easy to update.
    2. +
  2. To allow you to write JSX without an external build step to transform that into JS.
    3. +
+

Packaging react.js #

+

To make react.js available for use client-side, simply add react to your manifest, and declare the variant you'd like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

+
# config/environments/development.rb
+
+MyApp::Application.configure do
+  config.react.variant = :development
+  # use :production in production.rb
+end
+
// app/assets/javascript/application.js
+
+//= require react
+

Writing JSX #

+

When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

+
/** @jsx React.DOM */
+React.renderComponent(<MyComponent/>, document.getElementById('example'))
+

Asset Pipeline #

+

react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

+

Installation #

+

Installation follows the same process you're familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.

+ +
+ + + + + +
+ + +

React v0.4.1 @@ -382,94 +437,6 @@ If you were using React without JSX previously, your code should still work. - -
- - - -

- - Community Round-up #4 - -

- -

- July 3, 2013 - by - - Vjeux - -

- -
- -
-

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

-

Khan Academy #

-

Ben Kamens explains how Ben Alpert and Joel Burget are promoting React inside of Khan Academy. They now have three projects in the works using React.

- -
-

Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.

- -

"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"

- -

Read the full post...

-
- -

The best part is the demo of how React reconciliation process makes live editing more user-friendly.

- -
-

Our renderer, post-React, is on the left. A typical math editor's preview is on the right. -

-
-

React Snippets #

-

Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.

- -
-

Listening Scroll Event

- -
    -
  • JSFiddle: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
    • -
- -

Fade-in Transition

- -
    -
  • JSFiddle: Creating a new <FadeInWhenAdded> component and using jQuery .fadeIn() function on the DOM node.
    • -
  • JSFiddle: Using CSS transition instead.
    • -
- -

Socket.IO Integration

- -
    -
  • Gist: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
    • -
  • Gist: This example is doing everything -- including the IO -- inside of a single React component.
    • -
  • Gist: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
    • -
- -

Sortable jQuery Plugin Integration

- -
    -
  • JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
    • -
-
-

Introduction to React Screencast #

-

Pete Hunt recorded himself implementing a simple <Blink> tag in React.

- -
-

Snake in React #

-

Tom Occhino implemented Snake in 150 lines with React.

- -
-

Check the source on Github -

-
- -
- - -
diff --git a/blog/page15/index.html b/blog/page15/index.html index 29b2b03074..c8d9dcde19 100644 --- a/blog/page15/index.html +++ b/blog/page15/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,94 @@ +

+ + Community Round-up #4 + +

+ +

+ July 3, 2013 + by + + Vjeux + +

+ +
+ +
+

React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.

+

Khan Academy #

+

Ben Kamens explains how Ben Alpert and Joel Burget are promoting React inside of Khan Academy. They now have three projects in the works using React.

+ +
+

Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.

+ +

"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"

+ +

Read the full post...

+
+ +

The best part is the demo of how React reconciliation process makes live editing more user-friendly.

+ +
+

Our renderer, post-React, is on the left. A typical math editor's preview is on the right. +

+
+

React Snippets #

+

Over the past several weeks, members of our team, Pete Hunt and Paul O'Shannessy, answered many questions that were asked in the React group. They give a good overview of how to integrate React with other libraries and APIs through the use of Mixins and Lifecycle Methods.

+ +
+

Listening Scroll Event

+ +
    +
  • JSFiddle: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
    • +
+ +

Fade-in Transition

+ +
    +
  • JSFiddle: Creating a new <FadeInWhenAdded> component and using jQuery .fadeIn() function on the DOM node.
    • +
  • JSFiddle: Using CSS transition instead.
    • +
+ +

Socket.IO Integration

+ +
    +
  • Gist: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
    • +
  • Gist: This example is doing everything -- including the IO -- inside of a single React component.
    • +
  • Gist: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
    • +
+ +

Sortable jQuery Plugin Integration

+ +
    +
  • JSFiddle: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
    • +
+
+

Introduction to React Screencast #

+

Pete Hunt recorded himself implementing a simple <Blink> tag in React.

+ +
+

Snake in React #

+

Tom Occhino implemented Snake in 150 lines with React.

+ +
+

Check the source on Github +

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

New in React v0.4: Autobind by Default @@ -388,76 +476,6 @@ -

- -
- - - -

- - Community Round-up #1 - -

- -

- June 12, 2013 - by - - Vjeux - -

- -
- -
-

React was open sourced two weeks ago and it's time for a little round-up of what has been going on.

-

Khan Academy Question Editor #

-

It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his experience using React:

- -
-

I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.

- -

The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students: -

- -

Read the full post...

-
-

Pimp my Backbone.View (by replacing it with React) #

-

Paul Seiffert wrote a blog post that explains how to integrate React into Backbone applications.

- -
-

React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.

- -

As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.

- -

The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.

- -

Read the full post...

-
-

Using facebook's React with require.js #

-

Mario Mueller wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.

- -
-

I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.

- -

Read the full post...

-
-

Origins of React #

-

Pete Hunt explained what differentiates React from other JavaScript libraries in a previous blog post. Lee Byron gives another perspective on Quora:

- -
-

React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.

- -

React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.

- -

Read the full post...

-
- -
- - -
diff --git a/blog/page16/index.html b/blog/page16/index.html index e8342e093a..ea85d7bd48 100644 --- a/blog/page16/index.html +++ b/blog/page16/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,76 @@ +

+ + Community Round-up #1 + +

+ +

+ June 12, 2013 + by + + Vjeux + +

+ +
+ +
+

React was open sourced two weeks ago and it's time for a little round-up of what has been going on.

+

Khan Academy Question Editor #

+

It looks like Ben Alpert is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (#reactjs on Freenode). Ben wrote about his experience using React:

+ +
+

I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.

+ +

The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students: +

+ +

Read the full post...

+
+

Pimp my Backbone.View (by replacing it with React) #

+

Paul Seiffert wrote a blog post that explains how to integrate React into Backbone applications.

+ +
+

React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.

+ +

As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.

+ +

The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.

+ +

Read the full post...

+
+

Using facebook's React with require.js #

+

Mario Mueller wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.

+ +
+

I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.

+ +

Read the full post...

+
+

Origins of React #

+

Pete Hunt explained what differentiates React from other JavaScript libraries in a previous blog post. Lee Byron gives another perspective on Quora:

+ +
+

React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.

+ +

React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.

+ +

Read the full post...

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

Why did we build React? diff --git a/blog/page2/index.html b/blog/page2/index.html index 461f527b63..1fe3b98993 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,51 @@ +

+ + React Native v0.4 + +

+ +

+ April 17, 2015 + by + + Vjeux + +

+ +
+ +
+

It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus 35 plugins and 1 app in the app store! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!

+ +

I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests

+

Changelog #

+

The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:

+ + +

Where are we going? #

+

In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.

+ +
+ + + + + +
+ + +

Community Round-up #26 @@ -490,112 +535,6 @@ Minified build for production: - - - -

- - React v0.13 - -

- -

- March 10, 2015 - by - - Ben Alpert - -

- -
- -
-

Today, we're happy to release React v0.13!

- -

The most notable new feature is support for ES6 classes, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass.

- -

At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to make React even faster.

- -

Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new React.cloneElement API (which is similar to React.addons.cloneWithProps but preserves key and ref and does not merge style or className automatically). For more information about our planned optimizations, see GitHub issues -#3226, -#3227, -#3228.

- -

The release is now available for download:

- - - -

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

- -
-

Changelog #

React Core #

Breaking Changes #

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

New Features #

-
    -
  • 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.
    • -
  • Added a new top-level API React.cloneElement(el, props) for making copies of React elements – see the v0.13 RC2 notes for more details.
    • -
  • New ref style, allowing a callback to be used in place of a name: <Photo ref={(c) => this._photo = c} /> allows you to reference the component with this._photo (as opposed to ref="photo" which gives this.refs.photo).
    • -
  • this.setState() can now take a function as the first argument for transactional state updates, such as this.setState((state, props) => ({count: state.count + 1})); – this means that you no longer need to use this._pendingState, which is now gone.
    • -
  • Support for iterators and immutable-js sequences as children.
    • -
-

Deprecations #

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

React with Add-Ons #

New Features #

- -

Deprecations #

-
    -
  • React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.
    • -
  • Calls to React.addons.cloneWithProps can be migrated to use React.cloneElement instead – make sure to merge style and className manually if desired.
    • -
-

React Tools #

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 restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static will become this['static'] for IE8 compatibility).
      • -
    • -
  • The transform for the call spread 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. The jsx_orphaned_brackets_transformer package on npm can be used to find and fix potential issues in your JSX code.
    • -
- -
- - -

diff --git a/blog/page3/index.html b/blog/page3/index.html index f483bb0584..ae1ac93ca6 100644 --- a/blog/page3/index.html +++ b/blog/page3/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,112 @@ +

+ + React v0.13 + +

+ +

+ March 10, 2015 + by + + Ben Alpert + +

+ +
+ +
+

Today, we're happy to release React v0.13!

+ +

The most notable new feature is support for ES6 classes, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace React.createClass completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate React.createClass.

+ +

At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to make React even faster.

+ +

Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new React.cloneElement API (which is similar to React.addons.cloneWithProps but preserves key and ref and does not merge style or className automatically). For more information about our planned optimizations, see GitHub issues +#3226, +#3227, +#3228.

+ +

The release is now available for download:

+ + + +

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

+ +
+

Changelog #

React Core #

Breaking Changes #

+ +

New Features #

+ +

Deprecations #

+ +

React with Add-Ons #

New Features #

+ +

Deprecations #

+ +

React Tools #

Breaking Changes #

+ +

New Features #

+ +

JSX #

Breaking Changes #

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

Community Round-up #25 @@ -510,82 +616,6 @@ Minified build for production: - - - -

- - Introducing Relay and GraphQL - -

- -

- February 20, 2015 - by - - Greg Hurrell - -

- -
- -
-

Data fetching for React applications #

-

There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At React.js Conf we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.

- - - -

The two projects — Relay and GraphQL — have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.

- - -

What is Relay? #

-

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

- -

Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on this.props.

- -

Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.

-

What is GraphQL? #

-

GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.

- -

On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.

-

The value proposition #

-

Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.

- -

By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.

- -

Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime).

- -

Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.

- -

Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.

- -

By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:

- -
    -
  • Performance: All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently "in flight", so queries can be automatically de-duplicated and the minimal queries can be produced.
    • -
  • Subscriptions: All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions.
    • -
  • Common patterns: We can make common patterns easy. Pagination is the example that Jing gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available.
    • -
  • Simplified server implementation: Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
    • -
  • Uniform mutations: There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
    • -
-

How does it relate to Flux? #

-

In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.

- -

At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

-

Open source plans #

-

We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).

- -

In the meantime, we'll be providing more and more information in the form of blog posts (and in other channels). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.

- -

Watch this space!

- -
- - -

diff --git a/blog/page4/index.html b/blog/page4/index.html index 7d5db557a6..a228421be2 100644 --- a/blog/page4/index.html +++ b/blog/page4/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,82 @@ +

+ + Introducing Relay and GraphQL + +

+ +

+ February 20, 2015 + by + + Greg Hurrell + +

+ +
+ +
+

Data fetching for React applications #

+

There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At React.js Conf we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.

+ + + +

The two projects — Relay and GraphQL — have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.

+ + +

What is Relay? #

+

Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).

+ +

Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on this.props.

+ +

Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.

+

What is GraphQL? #

+

GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.

+ +

On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.

+

The value proposition #

+

Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.

+ +

By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.

+ +

Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime).

+ +

Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.

+ +

Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.

+ +

By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:

+ + +

How does it relate to Flux? #

+

In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.

+ +

At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.

+

Open source plans #

+

We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).

+ +

In the meantime, we'll be providing more and more information in the form of blog posts (and in other channels). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.

+ +

Watch this space!

+ +
+ + + + + +
+ + +

React.js Conf Round-up 2015 @@ -653,106 +729,6 @@ Minified build for production: - - - -

- - Community Round-up #24 - -

- -

- November 25, 2014 - by - - Steven Luscher - -

- -
- -
-

Keep it Simple #

-

Pedro Nauck (pedronauck) delivered an impeccably illustrated deck at Brazil's Front in Floripa conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.

- - - -

Murilo Pereira (mpereira) tussles with the topic of complexity in this blog post about coping with scaling up, where he describes how his team used React to make possible the “nearly impossible.”

- -

I (steveluscher) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.

- - - -

James Pearce (jamesgpearce) carried Big-Coffee all the way to Raleigh, NC. At the All Things Open conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.

- - -

All About Isomorphism #

-

Michael Ridgway (mridgway) shows us how Yahoo! (who recently moved Yahoo! Mail to React) renders their React+Flux application, server-side.

- - - -

Péter Márton (hekike) helps us brew a cold one (literally) using an application that's server-client isomorphic and indexable. Demo and sample code included – cold ones sold separately.

- -

And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (nhunzaker) server renders data visualizations as SVG with React.

-

React Router Mows the Lawn #

-

Ryan Florence (rpflorence) and Michael Jackson (mjackson) unveiled a new API for React Router that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've rolled your ideas into their latest release.

-

React in Practice #

-

Jonathan Beebe (somethingkindawierd) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's Nodevember conference in Nashville

- - - -

If you take a peek under the covers, you'll find that React powers Carousel, Dropbox's new photo and video gallery app.

- -

We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “The Vanishing Game” and see for yourself.

-

Be Kind, Rewind #

-

Spend the next 60 seconds watching Daniel Woelfel (dwwoelfel) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to reproduce bugs reported to him by his users.

- - -

Community Components #

-

Tom Chen (tomchentw) brings us a react-google-maps component, and a way to syntax highlight source code using Prism and the react-prism component, for good measure.

- -

Jed Watson (jedwatson) helps you manage touch, tap, and press events using the react-tappable component.

- -

To find these, and more community-built components, consult the React Components and React Rocks component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword react-component to your package.json to get listed on React Components, and submit a link to React Rocks.

-

Waiter, There's a CSS In My JavaScript #

-

The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (vjeux) talks about some of the fundamental style management challenges we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused react-style.

-

Test Isolation #

-

Yahoo! shows us how they make use of iframe elements to unit test React components in isolation.

-

You've Got The Hang of Flux, Now Let's Flow #

-

Facebook Open Source released Flow this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to type check React applications. There's never been a better reason to start making use of propTypes in your component specifications!

-

Countdown to React.js Conf 2014 #

-

We're counting down the days until React.js Conf at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.

-

React Meetups Around the World #

- - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - -
- - -

diff --git a/blog/page5/index.html b/blog/page5/index.html index ec1c360f23..0bc21d71eb 100644 --- a/blog/page5/index.html +++ b/blog/page5/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,106 @@ +

+ + Community Round-up #24 + +

+ +

+ November 25, 2014 + by + + Steven Luscher + +

+ +
+ +
+

Keep it Simple #

+

Pedro Nauck (pedronauck) delivered an impeccably illustrated deck at Brazil's Front in Floripa conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.

+ + + +

Murilo Pereira (mpereira) tussles with the topic of complexity in this blog post about coping with scaling up, where he describes how his team used React to make possible the “nearly impossible.”

+ +

I (steveluscher) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.

+ + + +

James Pearce (jamesgpearce) carried Big-Coffee all the way to Raleigh, NC. At the All Things Open conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.

+ + +

All About Isomorphism #

+

Michael Ridgway (mridgway) shows us how Yahoo! (who recently moved Yahoo! Mail to React) renders their React+Flux application, server-side.

+ + + +

Péter Márton (hekike) helps us brew a cold one (literally) using an application that's server-client isomorphic and indexable. Demo and sample code included – cold ones sold separately.

+ +

And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (nhunzaker) server renders data visualizations as SVG with React.

+

React Router Mows the Lawn #

+

Ryan Florence (rpflorence) and Michael Jackson (mjackson) unveiled a new API for React Router that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've rolled your ideas into their latest release.

+

React in Practice #

+

Jonathan Beebe (somethingkindawierd) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's Nodevember conference in Nashville

+ + + +

If you take a peek under the covers, you'll find that React powers Carousel, Dropbox's new photo and video gallery app.

+ +

We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “The Vanishing Game” and see for yourself.

+

Be Kind, Rewind #

+

Spend the next 60 seconds watching Daniel Woelfel (dwwoelfel) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to reproduce bugs reported to him by his users.

+ + +

Community Components #

+

Tom Chen (tomchentw) brings us a react-google-maps component, and a way to syntax highlight source code using Prism and the react-prism component, for good measure.

+ +

Jed Watson (jedwatson) helps you manage touch, tap, and press events using the react-tappable component.

+ +

To find these, and more community-built components, consult the React Components and React Rocks component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword react-component to your package.json to get listed on React Components, and submit a link to React Rocks.

+

Waiter, There's a CSS In My JavaScript #

+

The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (vjeux) talks about some of the fundamental style management challenges we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused react-style.

+

Test Isolation #

+

Yahoo! shows us how they make use of iframe elements to unit test React components in isolation.

+

You've Got The Hang of Flux, Now Let's Flow #

+

Facebook Open Source released Flow this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to type check React applications. There's never been a better reason to start making use of propTypes in your component specifications!

+

Countdown to React.js Conf 2014 #

+

We're counting down the days until React.js Conf at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.

+

React Meetups Around the World #

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

React.js Conf Updates @@ -475,130 +575,6 @@ Minified build for production: - - - -

- - React v0.12 RC - -

- -

- October 16, 2014 - by - - Sebastian Markbåge - -

- -
- -
-

We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.

- -

The release candidate is available for download:

- - - -

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

-

React Elements #

-

The biggest conceptual change we made in v0.12 is the move to React Elements. We talked about this topic in depth earlier this week. If you haven't already, you should read up on the exciting changes in there!

-

JSX Changes #

-

Earlier this year we decided to write a specification for JSX. This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.

-

The @jsx Pragma is Gone! #

-

We have wanted to do this since before we even open sourced React. No more /** @jsx React.DOM */!. The React specific JSX transform assumes you have React in scope (which had to be true before anyway).

- -

JSXTransformer and react-tools have both been updated to account for this.

-

JSX for Function Calls is No Longer Supported #

-

The React specific JSX transform no longer transforms to function calls. Instead we use React.createElement and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the React Elements introduction.

- -

The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.

-

JSX Lower-case Convention #

-

We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:

-
return <component />;
-
-

Is component an existing HTML tag? What if it becomes one?

- -

To address this, we decided on a convention: All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.

- -

This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.

- -

Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.

- -

In addition, the HTML tags are converted to strings instead of using React.DOM directly. <div/> becomes React.createElement('div') instead of React.DOM.div().

-

JSX Spread Attributes #

-

Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread ... operator.

-
var myProps = { a: 1, b: 2 };
-return <MyComponent {...myProps} />;
-
-

This merges the properties of the object onto the props of MyComponent.

- -

Read More About Spread Attributes

- -

If you used to use plain function calls to pass arbitrary props objects...

-
return MyComponent(myProps);
-
-

You can now switch to using Spread Attributes instead:

-
return <MyComponent {...myProps} />;
-

Breaking Change: key and ref Removed From this.props #

-

The props key and ref were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.

- -

These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props.

- -

We made this distinction clearer by moving them off the props object and onto the ReactElement itself. This means that you need to rename:

- -

someElement.props.key -> someElement.key

- -

You can no longer access this.props.ref and this.props.key from inside the Component instance itself. So you need to use a different name for those props.

- -

You do NOT need to change the way to define key and ref, only if you need to read it. E.g. <div key="my-key" /> and div({ key: 'my-key' }) still works.

-

Breaking Change: Default Props Resolution #

-

This is a subtle difference but defaultProps are now resolved at ReactElement creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.

- -

You will primarily see this breaking if you're also using transferPropsTo.

-

Deprecated: transferPropsTo #

-

transferPropsTo is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.

- -

Our suggested solution is to use the Spread Attributes.

-
return <div {...this.props} />;
-
-

Or, just if you're not using JSX:

-
return div(this.props);
-
-

Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. Read more about upgrading from transferPropsTo.

-

Deprecated: Returning false in Event Handlers #

-

It used to be possible to return false from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use event.preventDefault() instead.

-

Renamed APIs #

-

As part of the new React terminology we aliased some existing APIs to use the new naming convention:

- -
    -
  • React.renderComponent -> React.render
    • -
  • React.renderComponentToString -> React.renderToString
    • -
  • React.renderComponentToStaticMarkup -> React.renderToStaticMarkup
    • -
  • React.isValidComponent -> React.isValidElement
    • -
  • React.PropTypes.component -> React.PropTypes.element
    • -
  • React.PropTypes.renderable -> React.PropTypes.node
    • -
- -

The older APIs will log a warning but work the same. They will be removed in v0.13.

- -
- - -

diff --git a/blog/page6/index.html b/blog/page6/index.html index 7edd00c843..5b8f1a7db6 100644 --- a/blog/page6/index.html +++ b/blog/page6/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,130 @@ +

+ + React v0.12 RC + +

+ +

+ October 16, 2014 + by + + Sebastian Markbåge + +

+ +
+ +
+

We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.

+ +

The release candidate is available for download:

+ + + +

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

+

React Elements #

+

The biggest conceptual change we made in v0.12 is the move to React Elements. We talked about this topic in depth earlier this week. If you haven't already, you should read up on the exciting changes in there!

+

JSX Changes #

+

Earlier this year we decided to write a specification for JSX. This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.

+

The @jsx Pragma is Gone! #

+

We have wanted to do this since before we even open sourced React. No more /** @jsx React.DOM */!. The React specific JSX transform assumes you have React in scope (which had to be true before anyway).

+ +

JSXTransformer and react-tools have both been updated to account for this.

+

JSX for Function Calls is No Longer Supported #

+

The React specific JSX transform no longer transforms to function calls. Instead we use React.createElement and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the React Elements introduction.

+ +

The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.

+

JSX Lower-case Convention #

+

We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:

+
return <component />;
+
+

Is component an existing HTML tag? What if it becomes one?

+ +

To address this, we decided on a convention: All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.

+ +

This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.

+ +

Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.

+ +

In addition, the HTML tags are converted to strings instead of using React.DOM directly. <div/> becomes React.createElement('div') instead of React.DOM.div().

+

JSX Spread Attributes #

+

Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread ... operator.

+
var myProps = { a: 1, b: 2 };
+return <MyComponent {...myProps} />;
+
+

This merges the properties of the object onto the props of MyComponent.

+ +

Read More About Spread Attributes

+ +

If you used to use plain function calls to pass arbitrary props objects...

+
return MyComponent(myProps);
+
+

You can now switch to using Spread Attributes instead:

+
return <MyComponent {...myProps} />;
+

Breaking Change: key and ref Removed From this.props #

+

The props key and ref were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.

+ +

These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props.

+ +

We made this distinction clearer by moving them off the props object and onto the ReactElement itself. This means that you need to rename:

+ +

someElement.props.key -> someElement.key

+ +

You can no longer access this.props.ref and this.props.key from inside the Component instance itself. So you need to use a different name for those props.

+ +

You do NOT need to change the way to define key and ref, only if you need to read it. E.g. <div key="my-key" /> and div({ key: 'my-key' }) still works.

+

Breaking Change: Default Props Resolution #

+

This is a subtle difference but defaultProps are now resolved at ReactElement creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.

+ +

You will primarily see this breaking if you're also using transferPropsTo.

+

Deprecated: transferPropsTo #

+

transferPropsTo is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.

+ +

Our suggested solution is to use the Spread Attributes.

+
return <div {...this.props} />;
+
+

Or, just if you're not using JSX:

+
return div(this.props);
+
+

Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. Read more about upgrading from transferPropsTo.

+

Deprecated: Returning false in Event Handlers #

+

It used to be possible to return false from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use event.preventDefault() instead.

+

Renamed APIs #

+

As part of the new React terminology we aliased some existing APIs to use the new naming convention:

+ + + +

The older APIs will log a warning but work the same. They will be removed in v0.13.

+ +
+ + + + + +
+ + +

Introducing React Elements @@ -741,43 +865,6 @@ Minified build for production: - - - -

- - Introducing the JSX Specification - -

- -

- September 3, 2014 - by - - Sebastian Markbåge - -

- -
- -
-

At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.

- -

In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.

- -

Read the spec now at https://facebook.github.io/jsx/.

- -

This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.

- -

Feel free to open an Issue or Pull Request if you find something wrong.

- -
- - -

diff --git a/blog/page7/index.html b/blog/page7/index.html index e2a6aff68b..2fd6f9791b 100644 --- a/blog/page7/index.html +++ b/blog/page7/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,43 @@ +

+ + Introducing the JSX Specification + +

+ +

+ September 3, 2014 + by + + Sebastian Markbåge + +

+ +
+ +
+

At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.

+ +

In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.

+ +

Read the spec now at https://facebook.github.io/jsx/.

+ +

This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.

+ +

Feel free to open an Issue or Pull Request if you find something wrong.

+ +
+ + + + + +
+ + +

Community Round-up #21 @@ -420,175 +457,6 @@ Minified build for production: - - - -

- - React v0.11 - -

- -

- July 17, 2014 - by - - Paul O’Shannessy - -

- -
- -
-

Update: We missed a few important changes in our initial post and changelog. We've updated this post with details about Descriptors and Prop Type Validation.

- -
- -

We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using jsx --harmony, fixed a small regression with statics, and made sure we actually exposed the new API we said we were shipping: React.Children.count.

- -

This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

- -

The release is available for download from the CDN:

- - - -

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

- -

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

-

getDefaultProps #

-

Starting in React 0.11, getDefaultProps() is called only once when React.createClass() is called, instead of each time a component is rendered. This means that getDefaultProps() can no longer vary its return value based on this.props and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.

-

Rendering to null #

-

Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!

-
// Before
-render: function() {
-  if (!this.state.visible) {
-    return <span/>;
-  }
-  // ...
-}
-
-// After
-render: function() {
-  if (!this.state.visible) {
-    return null;
-  }
-  // ...
-}
-

JSX Namespacing #

-

Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.

-
// Before
-var UI = require('UI');
-var UILayout = UI.Layout;
-var UIButton = UI.Button;
-var UILabel = UI.Label;
-
-render: function() {
-  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
-}
-
-// After
-var UI = require('UI');
-
-render: function() {
-  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
-}
-

Improved keyboard event normalization #

-

Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:

-
handleKeyDown: function(e) {
-  if (e.key === 'Enter') {
-    // Handle enter key
-  } else if (e.key === ' ') {
-    // Handle spacebar
-  } else if (e.key === 'ArrowLeft') {
-    // Handle left arrow
-  }
-},
-
-

Keyboard and mouse events also now include a normalized e.getModifierState() that works consistently across browsers.

-

Descriptors #

-

In our v0.10 release notes, we called out that we were deprecating the existing behavior of the component function call (eg component = MyComponent(props, ...children) or component = <MyComponent prop={...}/>). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg component.setProps(...)). This no longer works. component in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.

- -

Along with this change to descriptors, React.isValidComponent and React.PropTypes.component now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of MyComponent(), which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.

-

Prop Type Validation #

-

Previously React.PropTypes validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply console.log your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (not throw) an Error object. We then log the error.message property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an Error with your message instead.

-

Changelog #

React Core #

Breaking Changes #

-
    -
  • getDefaultProps() is now called once per class and shared across all instances
    • -
  • MyComponent() now returns a descriptor, not an instance
    • -
  • React.isValidComponent and React.PropTypes.component validate descriptors, not component instances.
    • -
  • Custom propType validators should return an Error instead of logging directly
    • -
-

New Features #

-
    -
  • Rendering to null
    • -
  • Keyboard events include normalized e.key and e.getModifierState() properties
    • -
  • New normalized onBeforeInput event
    • -
  • React.Children.count has been added as a helper for counting the number of children
    • -
-

Bug Fixes #

-
    -
  • Re-renders are batched in more cases
    • -
  • Events: e.view properly normalized
    • -
  • Added Support for more HTML attributes (coords, crossOrigin, download, hrefLang, mediaGroup, muted, scrolling, shape, srcSet, start, useMap)
    • -
  • Improved SVG support - -
      -
    • Changing className on a mounted SVG component now works correctly
      • -
    • Added support for elements mask and tspan
      • -
    • Added support for attributes dx, dy, fillOpacity, fontFamily, fontSize, markerEnd, markerMid, markerStart, opacity, patternContentUnits, patternUnits, preserveAspectRatio, strokeDasharray, strokeOpacity
      • -
    • -
  • CSS property names with vendor prefixes (Webkit, ms, Moz, O) are now handled properly
    • -
  • Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
    • -
  • img event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same data-reactid"
    • -
  • Added explicit warning when missing polyfills
    • -
-

React With Addons #

-
    -
  • PureRenderMixin: a mixin which helps optimize "pure" components
    • -
  • Perf: a new set of tools to help with performance analysis
    • -
  • Update: New $apply command to transform values
    • -
  • TransitionGroup bug fixes with null elements, Android
    • -
-

React NPM Module #

-
    -
  • Now includes the pre-built packages under dist/.
    • -
  • envify is properly listed as a dependency instead of a peer dependency
    • -
-

JSX #

-
    -
  • Added support for namespaces, eg <Components.Checkbox />
    • -
  • JSXTransformer - -
      -
    • Enable the same harmony features available in the command line with <script type="text/jsx;harmony=true">
      • -
    • Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
      • -
    • Fixed a bug preventing sourcemaps from working in Firefox
      • -
    • -
-

React Tools Module #

-
    -
  • Improved readme with usage and API information
    • -
  • Improved ES6 transforms available with --harmony option
    • -
  • Added --source-map-inline option to the jsx executable
    • -
  • New transformWithDetails API which gives access to the raw sourcemap data
    • -
- -
- - -

diff --git a/blog/page8/index.html b/blog/page8/index.html index c3d08e5bcb..5de9fbde07 100644 --- a/blog/page8/index.html +++ b/blog/page8/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,175 @@ +

+ + React v0.11 + +

+ +

+ July 17, 2014 + by + + Paul O’Shannessy + +

+ +
+ +
+

Update: We missed a few important changes in our initial post and changelog. We've updated this post with details about Descriptors and Prop Type Validation.

+ +
+ +

We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using jsx --harmony, fixed a small regression with statics, and made sure we actually exposed the new API we said we were shipping: React.Children.count.

+ +

This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

+ +

The release is available for download from the CDN:

+ + + +

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

+ +

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

+

getDefaultProps #

+

Starting in React 0.11, getDefaultProps() is called only once when React.createClass() is called, instead of each time a component is rendered. This means that getDefaultProps() can no longer vary its return value based on this.props and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.

+

Rendering to null #

+

Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!

+
// Before
+render: function() {
+  if (!this.state.visible) {
+    return <span/>;
+  }
+  // ...
+}
+
+// After
+render: function() {
+  if (!this.state.visible) {
+    return null;
+  }
+  // ...
+}
+

JSX Namespacing #

+

Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.

+
// Before
+var UI = require('UI');
+var UILayout = UI.Layout;
+var UIButton = UI.Button;
+var UILabel = UI.Label;
+
+render: function() {
+  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
+}
+
+// After
+var UI = require('UI');
+
+render: function() {
+  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
+}
+

Improved keyboard event normalization #

+

Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:

+
handleKeyDown: function(e) {
+  if (e.key === 'Enter') {
+    // Handle enter key
+  } else if (e.key === ' ') {
+    // Handle spacebar
+  } else if (e.key === 'ArrowLeft') {
+    // Handle left arrow
+  }
+},
+
+

Keyboard and mouse events also now include a normalized e.getModifierState() that works consistently across browsers.

+

Descriptors #

+

In our v0.10 release notes, we called out that we were deprecating the existing behavior of the component function call (eg component = MyComponent(props, ...children) or component = <MyComponent prop={...}/>). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg component.setProps(...)). This no longer works. component in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.

+ +

Along with this change to descriptors, React.isValidComponent and React.PropTypes.component now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of MyComponent(), which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.

+

Prop Type Validation #

+

Previously React.PropTypes validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply console.log your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (not throw) an Error object. We then log the error.message property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an Error with your message instead.

+

Changelog #

React Core #

Breaking Changes #

+ +

New Features #

+ +

Bug Fixes #

+ +

React With Addons #

+ +

React NPM Module #

+ +

JSX #

+ +

React Tools Module #

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

React v0.11 RC @@ -391,66 +560,6 @@ Minified build for production: - - - -

- - Use React and JSX in ASP.NET MVC - -

- -

- April 4, 2014 - by - - Daniel Lo Nigro - -

- -
- -
-

Today we're happy to announce the initial release of -ReactJS.NET, which makes it easier to use React and JSX -in .NET applications, focusing specifically on ASP.NET MVC web applications. -It has several purposes:

- -
    -
  • On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they -will be compiled and cached server-side.
    • -
-
   <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
-
-
    -
  • JSX to JavaScript compilation via popular minification/combination libraries -(Cassette and ASP.NET Bundling and Minification). This is suggested for -production websites.
    • -
  • Server-side component rendering to make your initial render super fast.
    • -
- -

Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in -Web Forms applications as well as non-web applications (for example, in build -scripts). ReactJS.NET currently only works on Microsoft .NET but we are working -on support for Linux and Mac OS X via Mono as well.

-

Installation #

-

ReactJS.NET is packaged in NuGet. Simply run Install-Package React.Mvc4 in the -package manager console or search NuGet for "React" to install it. -See the documentation for more information. The -GitHub project contains -a sample website -demonstrating all of the features.

- -

Let us know what you think, and feel free to send through any feedback and -report bugs on GitHub.

- -
- - -

diff --git a/blog/page9/index.html b/blog/page9/index.html index dfabf96b10..6f9e5e62ed 100644 --- a/blog/page9/index.html +++ b/blog/page9/index.html @@ -66,6 +66,8 @@

Recent posts

@@ -97,6 +97,66 @@ +

+ + Use React and JSX in ASP.NET MVC + +

+ +

+ April 4, 2014 + by + + Daniel Lo Nigro + +

+ +
+ +
+

Today we're happy to announce the initial release of +ReactJS.NET, which makes it easier to use React and JSX +in .NET applications, focusing specifically on ASP.NET MVC web applications. +It has several purposes:

+ + +
   <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
+
+ + +

Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in +Web Forms applications as well as non-web applications (for example, in build +scripts). ReactJS.NET currently only works on Microsoft .NET but we are working +on support for Linux and Mac OS X via Mono as well.

+

Installation #

+

ReactJS.NET is packaged in NuGet. Simply run Install-Package React.Mvc4 in the +package manager console or search NuGet for "React" to install it. +See the documentation for more information. The +GitHub project contains +a sample website +demonstrating all of the features.

+ +

Let us know what you think, and feel free to send through any feedback and +report bugs on GitHub.

+ +
+ + + + + +
+ + +

The Road to 1.0 @@ -435,79 +495,6 @@ Thomas Boyt (@thomasaboyt) wrote < -

- -
- - - -

- - Community Round-up #17 - -

- -

- February 24, 2014 - by - - Jonas Gebhardt - -

- -
- -
-

It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

-

React in the Real World #

Facebook Lookback video editor #

-

Large parts of Facebook's web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app.

-

Russia's largest bank is now powered by React #

-

Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in this post by Vyacheslav Slinko.

-

Relato #

-

Relato by Ben Ripkens shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!

-

Makona Editor #

-

John Lynch (@johnrlynch) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors. -

-

Create Chrome extensions using React #

-

React is in no way limited to just web pages. Brandon Tilley (@BinaryMuse) just released a detailed walk-through of how he built his Chrome extension "Fast Tab Switcher" using React.

-

Twitter Streaming Client #

-

Javier Aguirre (@javaguirre) put together a simple twitter streaming client using node, socket.io and React.

-

Sproutsheet #

-

Sproutsheet is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.

-

Instant Domain Search #

-

Instant Domain Search also uses React. It sure is instant!

-

SVG-based graphical node editor #

-

NoFlo and Meemoo developer Forresto Oliphant built an awesome SVG-based node editor in React. -

-

Ultimate Tic-Tac-Toe Game in React #

-

Rafał Cieślak (@Ravicious) wrote a React version of Ultimate Tic Tac Toe. Find the source here.

-

ReactJS Gallery #

-

Emanuele Rampichini's ReactJS Gallery is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.

- -

Emanuele shared this awesome demo video with us:

- - -

React Components #

Table Sorter #

-

Table Sorter by bgerm [source] is another helpful React component.

-

Static-search #

-

Dmitry Chestnykh @dchest wrote a static search indexer in Go, along with a React-based web front-end that consumes search result via JSON.

-

Lorem Ipsum component #

-

Martin Andert created react-lorem-component, a simple component for all your placeholding needs.

-

Input with placeholder shim #

-

react-input=placeholder by enigma-io is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.

-

diContainer #

-

dicontainer provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.

-

React server rendering #

-

Ever wonder how to pre-render React components on the server? react-server-example by Michael Hart (@hichaelmart) walks through the necessary steps.

- -

Similarly, Alan deLevie (@adelevie) created react-client-server-starter, another detailed walk-through of how to server-render your app.

-

Random Tweet #

-
- -
- - -
diff --git a/feed.xml b/feed.xml index 44cb553955..9c12356898 100644 --- a/feed.xml +++ b/feed.xml @@ -6,6 +6,29 @@ https://facebook.github.io/react + + Deprecating JSTransform and react-tools + <p>Today we&#39;re announcing the deprecation of react-tools and JSTransform.</p> + +<p>As many people have noticed already, React and React Native have both switched their respective build systems to make use of <a href="http://babeljs.io/">Babel</a>. This replaced <a href="https://github.com/facebook/jstransform">JSTransform</a>, the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We&#39;ve faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).</p> + +<p>react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we&#39;re ready to <a href="https://www.youtube.com/watch?v=moSFlvxnbgk">let it go</a>. We won&#39;t ship a new version for v0.14.</p> +<h2><a class="anchor" name="migrating-to-babel"></a>Migrating to Babel <a class="hash-link" href="#migrating-to-babel">#</a></h2> +<p>Many people in the React and broader JavaScript community have already adopted Babel. It has <a href="http://babeljs.io/docs/setup/">integrations with a number of tools</a>. Depending on your tool, you&#39;ll want to read up on the instructions.</p> + +<p>We&#39;ve been working with the Babel team as we started making use of it and we&#39;re confident that it will be the right tool to use with React.</p> +<h2><a class="anchor" name="other-deprecations"></a>Other Deprecations <a class="hash-link" href="#other-deprecations">#</a></h2><h3><a class="anchor" name="esprima-fb"></a>esprima-fb <a class="hash-link" href="#esprima-fb">#</a></h3> +<p>As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork (<a href="https://github.com/facebook/esprima/">esprima-fb</a>). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parse, we encourage you to look into using one of those.</p> +<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3> +<p>JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for <code>&lt;script&gt;</code> tags with <code>type=&quot;text/jsx&quot;</code> and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with <a href="https://babeljs.io/docs/usage/browser/">a nearly identical tool</a>, which has already been integrated into <a href="https://jsbin.com/">JS Bin</a>.</p> + +<p>We&#39;ll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.</p> + + 2015-06-12T00:00:00-07:00 + https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html + https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html + + React Native Release Process <p>The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to <em>move fast with stable infra</em>, we are introducing a real release process with a two-week release schedule.</p> @@ -564,91 +587,5 @@ Minified build for production: <a href="https://fb.me/react-with-addons- https://facebook.github.io/react/blog/2015/03/16/react-v0.13.1.html - - React v0.13 - <p>Today, we&#39;re happy to release React v0.13!</p> - -<p>The most notable new feature is <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">support for ES6 classes</a>, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace <code>React.createClass</code> completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don&#39;t plan to deprecate <code>React.createClass</code>.</p> - -<p>At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We&#39;ve always thought that performance isn&#39;t the most important reason to choose React, but we&#39;re still planning more optimizations to <strong>make React even faster</strong>.</p> - -<p>Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we&#39;ve added runtime warnings that fire when props are changed or added between the time an element is created and when it&#39;s rendered. When migrating your code, you may want to use new <code>React.cloneElement</code> API (which is similar to <code>React.addons.cloneWithProps</code> but preserves <code>key</code> and <code>ref</code> and does not merge <code>style</code> or <code>className</code> automatically). For more information about our planned optimizations, see GitHub issues -<a href="https://github.com/facebook/react/issues/3226">#3226</a>, -<a href="https://github.com/facebook/react/issues/3227">#3227</a>, -<a href="https://github.com/facebook/react/issues/3228">#3228</a>.</p> - -<p>The release is now available for download:</p> - -<ul> -<li><strong>React</strong><br> -Dev build with warnings: <a href="https://fb.me/react-0.13.0.js">https://fb.me/react-0.13.0.js</a><br> -Minified build for production: <a href="https://fb.me/react-0.13.0.min.js">https://fb.me/react-0.13.0.min.js</a><br></li> -<li><strong>React with Add-Ons</strong><br> -Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.0.js">https://fb.me/react-with-addons-0.13.0.js</a><br> -Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0.min.js">https://fb.me/react-with-addons-0.13.0.min.js</a><br></li> -<li><strong>In-Browser JSX transformer</strong><br> -<a href="https://fb.me/JSXTransformer-0.13.0.js">https://fb.me/JSXTransformer-0.13.0.js</a></li> -</ul> - -<p>We&#39;ve also published version <code>0.13.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p> - -<hr> -<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4> -<ul> -<li>Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement</li> -<li>Mutating <code>props</code> 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&#39;t mutated</li> -<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li> -<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component&#39;s callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li> -<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li> -<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li> -<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li> -</ul> -<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4> -<ul> -<li>Support for using ES6 classes to build React components; see the <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details.</li> -<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li> -<li>Added a new top-level API <code>React.cloneElement(el, props)</code> for making copies of React elements – see the <a href="/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement">v0.13 RC2 notes</a> for more details.</li> -<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</code> which gives <code>this.refs.photo</code>).</li> -<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) =&gt; ({count: state.count + 1}));</code> – this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li> -<li>Support for iterators and immutable-js sequences as children.</li> -</ul> -<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4> -<ul> -<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>).</li> -<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (<code>getDOMNode</code>, <code>replaceState</code>, <code>isMounted</code>, <code>setProps</code>, <code>replaceProps</code>).</li> -</ul> -<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4> -<ul> -<li><a href="/react/docs/create-fragment.html"><code>React.addons.createFragment</code> was added</a> for adding keys to entire sets of children.</li> -</ul> -<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4> -<ul> -<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li> -<li>Calls to <code>React.addons.cloneWithProps</code> can be migrated to use <code>React.cloneElement</code> instead – make sure to merge <code>style</code> and <code>className</code> manually if desired.</li> -</ul> -<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4> -<ul> -<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li> -</ul> -<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4> -<ul> -<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target. - -<ul> -<li><code>es5</code> is the default.</li> -<li><code>es3</code> restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this[&#39;static&#39;]</code> for IE8 compatibility).</li> -</ul></li> -<li>The transform for the call spread operator has also been enabled.</li> -</ul> -<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4> -<ul> -<li>A change was made to how some JSX was parsed, specifically around the use of <code>&gt;</code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The <a href="https://www.npmjs.com/package/jsx_orphaned_brackets_transformer"><code>jsx_orphaned_brackets_transformer</code></a> package on npm can be used to find and fix potential issues in your JSX code.</li> -</ul> - - 2015-03-10T00:00:00-07:00 - https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html - https://facebook.github.io/react/blog/2015/03/10/react-v0.13.html - -