From f1ae286b15abe105c6bf1ef6e1d22f1eb23766ed Mon Sep 17 00:00:00 2001 From: Circle CI Date: Mon, 25 Sep 2017 17:26:53 -0700 Subject: [PATCH] Rebuild website --- 404.html | 2 +- acknowledgements.html | 2 +- blog/2013/06/02/jsfiddle-integration.html | 6 +- blog/2013/06/05/why-react.html | 6 +- blog/2013/06/12/community-roundup.html | 6 +- blog/2013/06/19/community-roundup-2.html | 6 +- blog/2013/06/21/react-v0-3-3.html | 6 +- blog/2013/06/27/community-roundup-3.html | 6 +- .../07/02/react-v0-4-autobind-by-default.html | 6 +- blog/2013/07/03/community-roundup-4.html | 6 +- ...-4-prop-validation-and-default-values.html | 6 +- blog/2013/07/17/react-v0-4-0.html | 6 +- blog/2013/07/23/community-roundup-5.html | 6 +- blog/2013/07/26/react-v0-4-1.html | 6 +- .../use-react-and-jsx-in-ruby-on-rails.html | 6 +- blog/2013/08/05/community-roundup-6.html | 6 +- ...-react-and-jsx-in-python-applications.html | 6 +- blog/2013/08/26/community-roundup-7.html | 6 +- blog/2013/09/24/community-roundup-8.html | 6 +- blog/2013/10/03/community-roundup-9.html | 6 +- blog/2013/10/16/react-v0.5.0.html | 6 +- blog/2013/10/29/react-v0-5-1.html | 6 +- blog/2013/11/06/community-roundup-10.html | 6 +- blog/2013/11/18/community-roundup-11.html | 6 +- blog/2013/12/18/react-v0.5.2-v0.4.2.html | 6 +- blog/2013/12/19/react-v0.8.0.html | 6 +- blog/2013/12/23/community-roundup-12.html | 6 +- blog/2013/12/30/community-roundup-13.html | 6 +- .../01/02/react-chrome-developer-tools.html | 6 +- blog/2014/01/06/community-roundup-14.html | 6 +- blog/2014/02/05/community-roundup-15.html | 6 +- blog/2014/02/15/community-roundup-16.html | 6 +- blog/2014/02/16/react-v0.9-rc1.html | 6 +- blog/2014/02/20/react-v0.9.html | 6 +- blog/2014/02/24/community-roundup-17.html | 6 +- blog/2014/03/14/community-roundup-18.html | 6 +- blog/2014/03/19/react-v0.10-rc1.html | 6 +- blog/2014/03/21/react-v0.10.html | 6 +- blog/2014/03/28/the-road-to-1.0.html | 6 +- blog/2014/04/04/reactnet.html | 6 +- blog/2014/05/06/flux.html | 6 +- .../05/29/one-year-of-open-source-react.html | 6 +- blog/2014/06/27/community-roundup-19.html | 6 +- blog/2014/07/13/react-v0.11-rc1.html | 6 +- blog/2014/07/17/react-v0.11.html | 6 +- blog/2014/07/25/react-v0.11.1.html | 6 +- blog/2014/07/28/community-roundup-20.html | 6 +- .../30/flux-actions-and-the-dispatcher.html | 6 +- blog/2014/08/03/community-roundup-21.html | 6 +- .../03/introducing-the-jsx-specification.html | 6 +- blog/2014/09/12/community-round-up-22.html | 6 +- blog/2014/09/16/react-v0.11.2.html | 6 +- .../2014/09/24/testing-flux-applications.html | 6 +- .../10/14/introducing-react-elements.html | 6 +- blog/2014/10/16/react-v0.12-rc1.html | 6 +- blog/2014/10/17/community-roundup-23.html | 6 +- blog/2014/10/27/react-js-conf.html | 6 +- blog/2014/10/28/react-v0.12.html | 6 +- blog/2014/11/24/react-js-conf-updates.html | 6 +- blog/2014/11/25/community-roundup-24.html | 6 +- blog/2014/12/18/react-v0.12.2.html | 6 +- .../react-js-conf-diversity-scholarship.html | 6 +- blog/2015/01/27/react-v0.13.0-beta-1.html | 6 +- blog/2015/02/18/react-conf-roundup-2015.html | 6 +- .../02/20/introducing-relay-and-graphql.html | 6 +- blog/2015/02/24/react-v0.13-rc1.html | 6 +- .../02/24/streamlining-react-elements.html | 6 +- blog/2015/03/03/react-v0.13-rc2.html | 6 +- blog/2015/03/04/community-roundup-25.html | 6 +- blog/2015/03/10/react-v0.13.html | 6 +- blog/2015/03/16/react-v0.13.1.html | 6 +- ...ing-the-facebook-news-feed-with-relay.html | 6 +- blog/2015/03/26/introducing-react-native.html | 6 +- blog/2015/03/30/community-roundup-26.html | 6 +- blog/2015/04/17/react-native-v0.4.html | 6 +- blog/2015/04/18/react-v0.13.2.html | 6 +- blog/2015/05/01/graphql-introduction.html | 6 +- blog/2015/05/08/react-v0.13.3.html | 6 +- .../05/22/react-native-release-process.html | 6 +- ...precating-jstransform-and-react-tools.html | 6 +- blog/2015/07/03/react-v0.14-beta-1.html | 6 +- blog/2015/08/03/new-react-devtools-beta.html | 6 +- blog/2015/08/11/relay-technical-preview.html | 6 +- blog/2015/08/13/reacteurope-roundup.html | 6 +- .../2015/09/02/new-react-developer-tools.html | 6 +- blog/2015/09/10/react-v0.14-rc1.html | 6 +- blog/2015/09/14/community-roundup-27.html | 6 +- .../10/01/react-render-and-top-level-api.html | 6 +- blog/2015/10/07/react-v0.14.html | 6 +- .../19/reactiflux-is-moving-to-discord.html | 6 +- blog/2015/10/28/react-v0.14.1.html | 6 +- blog/2015/11/02/react-v0.14.2.html | 6 +- blog/2015/11/18/react-v0.14.3.html | 6 +- ...ct-js-conf-2016-diversity-scholarship.html | 6 +- blog/2015/12/16/ismounted-antipattern.html | 6 +- ...act-components-elements-and-instances.html | 6 +- blog/2015/12/29/react-v0.14.4.html | 6 +- ...-implies-B-does-not-imply-B-implies-A.html | 6 +- .../2016/01/12/discontinuing-ie8-support.html | 6 +- blog/2016/02/19/new-versioning-scheme.html | 6 +- blog/2016/03/07/react-v15-rc1.html | 6 +- blog/2016/03/16/react-v15-rc2.html | 6 +- blog/2016/03/29/react-v0.14.8.html | 6 +- blog/2016/04/07/react-v15.html | 6 +- blog/2016/04/08/react-v15.0.1.html | 6 +- .../introducing-reacts-error-code-system.html | 6 +- .../2016/07/13/mixins-considered-harmful.html | 6 +- .../22/create-apps-with-no-configuration.html | 6 +- blog/2016/08/05/relay-state-of-the-state.html | 6 +- blog/2016/09/28/our-first-50000-stars.html | 6 +- blog/2016/11/16/react-v15.4.0.html | 6 +- blog/2017/04/07/react-v15.5.0.html | 6 +- .../05/18/whats-new-in-create-react-app.html | 6 +- blog/2017/06/13/react-v15.6.0.html | 6 +- .../07/26/error-handling-in-react-16.html | 6 +- .../09/08/dom-attributes-in-react-16.html | 6 +- blog/2017/09/25/react-v15.6.2.html | 264 ++++++ blog/all.html | 9 +- blog/index.html | 330 ++----- blog/page10/index.html | 352 +++++--- blog/page11/index.html | 192 ++-- blog/page12/index.html | 113 ++- blog/page13/index.html | 130 +-- blog/page14/index.html | 219 ++--- blog/page15/index.html | 173 +++- blog/page16/index.html | 154 +--- blog/page17/index.html | 223 ++--- blog/page18/index.html | 233 +++-- blog/page19/index.html | 173 ++-- blog/page2/index.html | 840 +++++------------- blog/page20/index.html | 123 ++- blog/page21/index.html | 143 +-- blog/page22/index.html | 125 +-- blog/page23/index.html | 57 +- blog/page3/index.html | 660 ++++++++++++-- blog/page4/index.html | 140 ++- blog/page5/index.html | 140 +-- blog/page6/index.html | 175 ++-- blog/page7/index.html | 239 +++-- blog/page8/index.html | 257 +++--- blog/page9/index.html | 360 +++----- community/conferences.html | 2 +- community/support.html | 2 +- community/videos.html | 2 +- contributing/codebase-overview.html | 2 +- contributing/design-principles.html | 2 +- contributing/how-to-contribute.html | 4 +- contributing/implementation-notes.html | 2 +- docs/accessibility.html | 2 +- docs/addons.html | 2 +- docs/animation.html | 2 +- docs/components-and-props.html | 2 +- docs/composition-vs-inheritance.html | 2 +- docs/conditional-rendering.html | 2 +- docs/conferences-it-IT.html | 2 +- docs/conferences-ko-KR.html | 2 +- docs/conferences-zh-CN.html | 2 +- docs/context.html | 2 +- docs/create-fragment.html | 2 +- docs/cross-origin-errors.html | 2 +- docs/dom-elements.html | 6 +- docs/error-decoder.html | 2 +- docs/events.html | 2 +- docs/forms.html | 2 +- docs/handling-events.html | 2 +- docs/hello-world.html | 2 +- docs/higher-order-components.html | 2 +- docs/installation.html | 2 +- docs/integrating-with-other-libraries.html | 2 +- docs/introducing-jsx.html | 2 +- docs/jsx-in-depth.html | 2 +- docs/lifting-state-up.html | 2 +- docs/lists-and-keys.html | 2 +- docs/optimizing-performance.html | 2 +- docs/perf.html | 2 +- docs/pure-render-mixin.html | 2 +- docs/react-api.html | 2 +- docs/react-component.html | 2 +- docs/react-dom-server.html | 2 +- docs/react-dom.html | 2 +- docs/react-without-es6.html | 2 +- docs/react-without-jsx.html | 2 +- docs/reconciliation.html | 2 +- docs/refs-and-the-dom.html | 2 +- docs/rendering-elements.html | 2 +- docs/shallow-compare.html | 2 +- docs/shallow-renderer.html | 2 +- docs/state-and-lifecycle.html | 2 +- docs/test-utils.html | 2 +- docs/thinking-in-react.html | 2 +- docs/two-way-binding-helpers.html | 2 +- docs/typechecking-with-proptypes.html | 2 +- docs/uncontrolled-components.html | 2 +- docs/update.html | 2 +- docs/videos-it-IT.html | 2 +- docs/videos-ko-KR.html | 2 +- docs/videos-zh-CN.html | 2 +- docs/web-components.html | 2 +- feed.xml | 632 ++----------- index.html | 2 +- js/ErrorDecoderComponent.js | 20 +- jsx-compiler.html | 2 +- tutorial/tutorial.html | 2 +- warnings/dont-call-proptypes.html | 2 +- warnings/invalid-aria-prop.html | 2 +- warnings/legacy-factories.html | 2 +- warnings/refs-must-have-owner.html | 2 +- warnings/special-props.html | 2 +- warnings/unknown-prop.html | 2 +- 209 files changed, 3572 insertions(+), 3730 deletions(-) create mode 100644 blog/2017/09/25/react-v15.6.2.html diff --git a/404.html b/404.html index 8ade3570c9..5c25dd0dd3 100644 --- a/404.html +++ b/404.html @@ -63,7 +63,7 @@ diff --git a/acknowledgements.html b/acknowledgements.html index 6481d38510..d5a300f8e0 100644 --- a/acknowledgements.html +++ b/acknowledgements.html @@ -63,7 +63,7 @@ diff --git a/blog/2013/06/02/jsfiddle-integration.html b/blog/2013/06/02/jsfiddle-integration.html index 857c2ff198..b1ae9b06bc 100644 --- a/blog/2013/06/02/jsfiddle-integration.html +++ b/blog/2013/06/02/jsfiddle-integration.html @@ -64,7 +64,7 @@ @@ -114,6 +114,8 @@

Recent posts

diff --git a/blog/2013/06/05/why-react.html b/blog/2013/06/05/why-react.html index 0dbffbefc6..eeb1e8866c 100644 --- a/blog/2013/06/05/why-react.html +++ b/blog/2013/06/05/why-react.html @@ -65,7 +65,7 @@ and why would you want to use it? @@ -199,6 +199,8 @@ but if you are interested in the nuts and bolts

Recent posts

diff --git a/blog/2013/06/12/community-roundup.html b/blog/2013/06/12/community-roundup.html index f92061a536..7a46b64384 100644 --- a/blog/2013/06/12/community-roundup.html +++ b/blog/2013/06/12/community-roundup.html @@ -64,7 +64,7 @@ @@ -159,6 +159,8 @@

Recent posts

diff --git a/blog/2013/06/19/community-roundup-2.html b/blog/2013/06/19/community-roundup-2.html index a52cb9ba63..16d40a67ea 100644 --- a/blog/2013/06/19/community-roundup-2.html +++ b/blog/2013/06/19/community-roundup-2.html @@ -64,7 +64,7 @@ @@ -186,6 +186,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 6eacbba6ab..1a591d4abc 100644 --- a/blog/2013/06/21/react-v0-3-3.html +++ b/blog/2013/06/21/react-v0-3-3.html @@ -64,7 +64,7 @@ @@ -130,6 +130,8 @@

Recent posts

diff --git a/blog/2013/06/27/community-roundup-3.html b/blog/2013/06/27/community-roundup-3.html index 39aaa15967..8d460cc95b 100644 --- a/blog/2013/06/27/community-roundup-3.html +++ b/blog/2013/06/27/community-roundup-3.html @@ -64,7 +64,7 @@ @@ -195,6 +195,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 7612d46bac..0f7ad58101 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 @@ -64,7 +64,7 @@ @@ -144,6 +144,8 @@

Recent posts

diff --git a/blog/2013/07/03/community-roundup-4.html b/blog/2013/07/03/community-roundup-4.html index 09478b22cf..da04557256 100644 --- a/blog/2013/07/03/community-roundup-4.html +++ b/blog/2013/07/03/community-roundup-4.html @@ -64,7 +64,7 @@ @@ -177,6 +177,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 d704589a7e..c78525204c 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 @@ -64,7 +64,7 @@ @@ -155,6 +155,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 b50bd0fa89..3b02583d0b 100644 --- a/blog/2013/07/17/react-v0-4-0.html +++ b/blog/2013/07/17/react-v0-4-0.html @@ -64,7 +64,7 @@ @@ -147,6 +147,8 @@ If you were using React without JSX previously, your code should still work.Recent posts diff --git a/blog/2013/07/23/community-roundup-5.html b/blog/2013/07/23/community-roundup-5.html index bbb7ee4448..3468b376aa 100644 --- a/blog/2013/07/23/community-roundup-5.html +++ b/blog/2013/07/23/community-roundup-5.html @@ -64,7 +64,7 @@ @@ -210,6 +210,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 49bf3ff820..596c4056a7 100644 --- a/blog/2013/07/26/react-v0-4-1.html +++ b/blog/2013/07/26/react-v0-4-1.html @@ -64,7 +64,7 @@ @@ -129,6 +129,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 7b1ec7cb56..7c0cb476f9 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 @@ -64,7 +64,7 @@ @@ -144,6 +144,8 @@

Recent posts

diff --git a/blog/2013/08/05/community-roundup-6.html b/blog/2013/08/05/community-roundup-6.html index e46cc9a44b..1e305ce181 100644 --- a/blog/2013/08/05/community-roundup-6.html +++ b/blog/2013/08/05/community-roundup-6.html @@ -64,7 +64,7 @@ @@ -183,6 +183,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 71d56c8969..231238d65c 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 @@ -64,7 +64,7 @@ @@ -148,6 +148,8 @@

Recent posts

diff --git a/blog/2013/08/26/community-roundup-7.html b/blog/2013/08/26/community-roundup-7.html index 418177f8d7..35b66a4973 100644 --- a/blog/2013/08/26/community-roundup-7.html +++ b/blog/2013/08/26/community-roundup-7.html @@ -64,7 +64,7 @@ @@ -188,6 +188,8 @@

Recent posts

diff --git a/blog/2013/09/24/community-roundup-8.html b/blog/2013/09/24/community-roundup-8.html index eecb40c8ed..972ea848eb 100644 --- a/blog/2013/09/24/community-roundup-8.html +++ b/blog/2013/09/24/community-roundup-8.html @@ -64,7 +64,7 @@ @@ -174,6 +174,8 @@

Recent posts

diff --git a/blog/2013/10/03/community-roundup-9.html b/blog/2013/10/03/community-roundup-9.html index c7947b2763..b458da992f 100644 --- a/blog/2013/10/03/community-roundup-9.html +++ b/blog/2013/10/03/community-roundup-9.html @@ -64,7 +64,7 @@ @@ -198,6 +198,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 e42879e46c..d76736711c 100644 --- a/blog/2013/10/16/react-v0.5.0.html +++ b/blog/2013/10/16/react-v0.5.0.html @@ -64,7 +64,7 @@ @@ -160,6 +160,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 61bb3e00fa..52dc35b3e2 100644 --- a/blog/2013/10/29/react-v0-5-1.html +++ b/blog/2013/10/29/react-v0-5-1.html @@ -64,7 +64,7 @@ @@ -127,6 +127,8 @@

Recent posts

diff --git a/blog/2013/11/06/community-roundup-10.html b/blog/2013/11/06/community-roundup-10.html index d90fb4ceb4..41b4140472 100644 --- a/blog/2013/11/06/community-roundup-10.html +++ b/blog/2013/11/06/community-roundup-10.html @@ -64,7 +64,7 @@ @@ -233,6 +233,8 @@

Recent posts

diff --git a/blog/2013/11/18/community-roundup-11.html b/blog/2013/11/18/community-roundup-11.html index e8d12fddc5..67dcc8086f 100644 --- a/blog/2013/11/18/community-roundup-11.html +++ b/blog/2013/11/18/community-roundup-11.html @@ -64,7 +64,7 @@ @@ -196,6 +196,8 @@ Is this some sort of template language? Specifically no. This might have been th

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 562557cb38..0bd02b216b 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 @@ -64,7 +64,7 @@ @@ -120,6 +120,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 0cc907b6f2..166d84f187 100644 --- a/blog/2013/12/19/react-v0.8.0.html +++ b/blog/2013/12/19/react-v0.8.0.html @@ -64,7 +64,7 @@ @@ -160,6 +160,8 @@

Recent posts

diff --git a/blog/2013/12/23/community-roundup-12.html b/blog/2013/12/23/community-roundup-12.html index 3822b6f985..f31c5ce60d 100644 --- a/blog/2013/12/23/community-roundup-12.html +++ b/blog/2013/12/23/community-roundup-12.html @@ -64,7 +64,7 @@ @@ -198,6 +198,8 @@ componentDidUpdate: function() {

Recent posts

diff --git a/blog/2013/12/30/community-roundup-13.html b/blog/2013/12/30/community-roundup-13.html index e7a6eaa9a3..e50c06d189 100644 --- a/blog/2013/12/30/community-roundup-13.html +++ b/blog/2013/12/30/community-roundup-13.html @@ -64,7 +64,7 @@ @@ -213,6 +213,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 8a002f6a08..80a7c956f1 100644 --- a/blog/2014/01/02/react-chrome-developer-tools.html +++ b/blog/2014/01/02/react-chrome-developer-tools.html @@ -64,7 +64,7 @@ @@ -121,6 +121,8 @@

Recent posts

diff --git a/blog/2014/01/06/community-roundup-14.html b/blog/2014/01/06/community-roundup-14.html index eb8bc05f0e..adcc32c0a7 100644 --- a/blog/2014/01/06/community-roundup-14.html +++ b/blog/2014/01/06/community-roundup-14.html @@ -64,7 +64,7 @@ @@ -190,6 +190,8 @@ rails s

Recent posts

diff --git a/blog/2014/02/05/community-roundup-15.html b/blog/2014/02/05/community-roundup-15.html index 7780e87c5d..1f56060cac 100644 --- a/blog/2014/02/05/community-roundup-15.html +++ b/blog/2014/02/05/community-roundup-15.html @@ -64,7 +64,7 @@ @@ -234,6 +234,8 @@

Recent posts

diff --git a/blog/2014/02/15/community-roundup-16.html b/blog/2014/02/15/community-roundup-16.html index 4ef5475438..4348f4f554 100644 --- a/blog/2014/02/15/community-roundup-16.html +++ b/blog/2014/02/15/community-roundup-16.html @@ -64,7 +64,7 @@ @@ -187,6 +187,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 0d30f5edfb..f4de40bde3 100644 --- a/blog/2014/02/16/react-v0.9-rc1.html +++ b/blog/2014/02/16/react-v0.9-rc1.html @@ -64,7 +64,7 @@ @@ -242,6 +242,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -260,8 +262,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/02/20/react-v0.9.html b/blog/2014/02/20/react-v0.9.html index 71bc7b2a71..1dc6d4a248 100644 --- a/blog/2014/02/20/react-v0.9.html +++ b/blog/2014/02/20/react-v0.9.html @@ -64,7 +64,7 @@ @@ -254,6 +254,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -272,8 +274,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/02/24/community-roundup-17.html b/blog/2014/02/24/community-roundup-17.html index 1188a0552b..7c91d91547 100644 --- a/blog/2014/02/24/community-roundup-17.html +++ b/blog/2014/02/24/community-roundup-17.html @@ -64,7 +64,7 @@ @@ -194,6 +194,8 @@

    Recent posts

    diff --git a/blog/2014/03/14/community-roundup-18.html b/blog/2014/03/14/community-roundup-18.html index 27ba3bee5f..51a75ada69 100644 --- a/blog/2014/03/14/community-roundup-18.html +++ b/blog/2014/03/14/community-roundup-18.html @@ -64,7 +64,7 @@ @@ -213,6 +213,8 @@ Thomas Boyt (@thomasaboyt) wrote <

    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 36b9e51a49..ef246a7a8d 100644 --- a/blog/2014/03/19/react-v0.10-rc1.html +++ b/blog/2014/03/19/react-v0.10-rc1.html @@ -64,7 +64,7 @@ @@ -188,6 +188,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -206,8 +208,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/03/21/react-v0.10.html b/blog/2014/03/21/react-v0.10.html index 80ca8ed954..f2c339d63c 100644 --- a/blog/2014/03/21/react-v0.10.html +++ b/blog/2014/03/21/react-v0.10.html @@ -64,7 +64,7 @@ @@ -188,6 +188,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -206,8 +208,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All 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 4e7aba7c39..c1ff49e84e 100644 --- a/blog/2014/03/28/the-road-to-1.0.html +++ b/blog/2014/03/28/the-road-to-1.0.html @@ -64,7 +64,7 @@ @@ -153,6 +153,8 @@

    Recent posts

    diff --git a/blog/2014/04/04/reactnet.html b/blog/2014/04/04/reactnet.html index bfb407bf31..3049fff28b 100644 --- a/blog/2014/04/04/reactnet.html +++ b/blog/2014/04/04/reactnet.html @@ -67,7 +67,7 @@ It has several purposes: @@ -146,6 +146,8 @@ report bugs on GitHub.

    Recent posts

    diff --git a/blog/2014/05/06/flux.html b/blog/2014/05/06/flux.html index 17ce6081ca..14d5c699e0 100644 --- a/blog/2014/05/06/flux.html +++ b/blog/2014/05/06/flux.html @@ -64,7 +64,7 @@ @@ -125,6 +125,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 f07ac48f08..22cd54ced3 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 @@ -64,7 +64,7 @@ @@ -118,6 +118,8 @@

    Recent posts

    diff --git a/blog/2014/06/27/community-roundup-19.html b/blog/2014/06/27/community-roundup-19.html index 1496794bee..8a855e0ac5 100644 --- a/blog/2014/06/27/community-roundup-19.html +++ b/blog/2014/06/27/community-roundup-19.html @@ -66,7 +66,7 @@ Ever wanted to find developers who also share the same interest in React than yo @@ -170,6 +170,8 @@ Ever wanted to find developers who also share the same interest in React than yo

    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 e9805e63ba..4e3d4f6d75 100644 --- a/blog/2014/07/13/react-v0.11-rc1.html +++ b/blog/2014/07/13/react-v0.11-rc1.html @@ -64,7 +64,7 @@ @@ -261,6 +261,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -279,8 +281,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/07/17/react-v0.11.html b/blog/2014/07/17/react-v0.11.html index e254871ab6..6e5e249a6f 100644 --- a/blog/2014/07/17/react-v0.11.html +++ b/blog/2014/07/17/react-v0.11.html @@ -64,7 +64,7 @@ @@ -280,6 +280,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -298,8 +300,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/07/25/react-v0.11.1.html b/blog/2014/07/25/react-v0.11.1.html index 37af557201..55b5eaf15e 100644 --- a/blog/2014/07/25/react-v0.11.1.html +++ b/blog/2014/07/25/react-v0.11.1.html @@ -64,7 +64,7 @@ @@ -155,6 +155,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -173,8 +175,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/07/28/community-roundup-20.html b/blog/2014/07/28/community-roundup-20.html index 5f66bbd8bc..2a0c3e72bf 100644 --- a/blog/2014/07/28/community-roundup-20.html +++ b/blog/2014/07/28/community-roundup-20.html @@ -64,7 +64,7 @@ @@ -207,6 +207,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 519427365e..3bd8812280 100644 --- a/blog/2014/07/30/flux-actions-and-the-dispatcher.html +++ b/blog/2014/07/30/flux-actions-and-the-dispatcher.html @@ -64,7 +64,7 @@ @@ -142,6 +142,8 @@

    Recent posts

    diff --git a/blog/2014/08/03/community-roundup-21.html b/blog/2014/08/03/community-roundup-21.html index 5af3609142..4d5167628d 100644 --- a/blog/2014/08/03/community-roundup-21.html +++ b/blog/2014/08/03/community-roundup-21.html @@ -66,7 +66,7 @@ Ryan Florence and Michael Jackson ported Ember's router to React in a projec @@ -206,6 +206,8 @@ This is not the intended way to use React but can be useful as last resort if yo

    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 4c98fe1300..6416324dfe 100644 --- a/blog/2014/09/03/introducing-the-jsx-specification.html +++ b/blog/2014/09/03/introducing-the-jsx-specification.html @@ -64,7 +64,7 @@ @@ -118,6 +118,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 caa2b6717c..66a0710f28 100644 --- a/blog/2014/09/12/community-round-up-22.html +++ b/blog/2014/09/12/community-round-up-22.html @@ -64,7 +64,7 @@ @@ -208,6 +208,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 f89697acdc..348e573d55 100644 --- a/blog/2014/09/16/react-v0.11.2.html +++ b/blog/2014/09/16/react-v0.11.2.html @@ -64,7 +64,7 @@ @@ -164,6 +164,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -182,8 +184,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/09/24/testing-flux-applications.html b/blog/2014/09/24/testing-flux-applications.html index ca1fa0207d..75c030f058 100644 --- a/blog/2014/09/24/testing-flux-applications.html +++ b/blog/2014/09/24/testing-flux-applications.html @@ -64,7 +64,7 @@ @@ -386,6 +386,8 @@

    Recent posts

    diff --git a/blog/2014/10/14/introducing-react-elements.html b/blog/2014/10/14/introducing-react-elements.html index d4e7db9eb3..8f5dcf1d98 100644 --- a/blog/2014/10/14/introducing-react-elements.html +++ b/blog/2014/10/14/introducing-react-elements.html @@ -64,7 +64,7 @@ @@ -274,6 +274,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 4e8dcfe675..01182acb8a 100644 --- a/blog/2014/10/16/react-v0.12-rc1.html +++ b/blog/2014/10/16/react-v0.12-rc1.html @@ -64,7 +64,7 @@ @@ -227,6 +227,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -245,8 +247,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/10/17/community-roundup-23.html b/blog/2014/10/17/community-roundup-23.html index 68701ed6a6..fc42320a70 100644 --- a/blog/2014/10/17/community-roundup-23.html +++ b/blog/2014/10/17/community-roundup-23.html @@ -64,7 +64,7 @@ @@ -252,6 +252,8 @@

    Recent posts

    diff --git a/blog/2014/10/27/react-js-conf.html b/blog/2014/10/27/react-js-conf.html index 917f3ed579..ee0fef729b 100644 --- a/blog/2014/10/27/react-js-conf.html +++ b/blog/2014/10/27/react-js-conf.html @@ -64,7 +64,7 @@ @@ -118,6 +118,8 @@

    Recent posts

    diff --git a/blog/2014/10/28/react-v0.12.html b/blog/2014/10/28/react-v0.12.html index 9137b93c55..f5b152cd83 100644 --- a/blog/2014/10/28/react-v0.12.html +++ b/blog/2014/10/28/react-v0.12.html @@ -64,7 +64,7 @@ @@ -257,6 +257,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -275,8 +277,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2014/11/24/react-js-conf-updates.html b/blog/2014/11/24/react-js-conf-updates.html index 7a3798374d..2a8a625926 100644 --- a/blog/2014/11/24/react-js-conf-updates.html +++ b/blog/2014/11/24/react-js-conf-updates.html @@ -66,7 +66,7 @@ amazed that 600 people requested to be notified when ticket go on sale. This is @@ -147,6 +147,8 @@ until the next conference. All the talks will be recorded and put online shortly

    Recent posts

    diff --git a/blog/2014/11/25/community-roundup-24.html b/blog/2014/11/25/community-roundup-24.html index 0a615b8774..fcff206f97 100644 --- a/blog/2014/11/25/community-roundup-24.html +++ b/blog/2014/11/25/community-roundup-24.html @@ -64,7 +64,7 @@ @@ -202,6 +202,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 371403117f..c8fb123fe9 100644 --- a/blog/2014/12/18/react-v0.12.2.html +++ b/blog/2014/12/18/react-v0.12.2.html @@ -64,7 +64,7 @@ @@ -146,6 +146,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -164,8 +166,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All 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 8f044a1374..0313fd6c30 100644 --- a/blog/2014/12/19/react-js-conf-diversity-scholarship.html +++ b/blog/2014/12/19/react-js-conf-diversity-scholarship.html @@ -64,7 +64,7 @@ @@ -147,6 +147,8 @@ Facebook will make determinations on scholarship recipients in its sole discreti

    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 4c051ab489..b612d80678 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 @@ -64,7 +64,7 @@ @@ -248,6 +248,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 6dd98afb4f..8195abb11e 100644 --- a/blog/2015/02/18/react-conf-roundup-2015.html +++ b/blog/2015/02/18/react-conf-roundup-2015.html @@ -64,7 +64,7 @@ @@ -373,6 +373,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 ad9090e707..ca71a696ce 100644 --- a/blog/2015/02/20/introducing-relay-and-graphql.html +++ b/blog/2015/02/20/introducing-relay-and-graphql.html @@ -64,7 +64,7 @@ @@ -168,6 +168,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 a633476044..2c628e53bb 100644 --- a/blog/2015/02/24/react-v0.13-rc1.html +++ b/blog/2015/02/24/react-v0.13-rc1.html @@ -64,7 +64,7 @@ @@ -197,6 +197,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -215,8 +217,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/02/24/streamlining-react-elements.html b/blog/2015/02/24/streamlining-react-elements.html index 1cb89d26e2..84e504d0e3 100644 --- a/blog/2015/02/24/streamlining-react-elements.html +++ b/blog/2015/02/24/streamlining-react-elements.html @@ -64,7 +64,7 @@ @@ -296,6 +296,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 dc0d821b49..25686eac25 100644 --- a/blog/2015/03/03/react-v0.13-rc2.html +++ b/blog/2015/03/03/react-v0.13-rc2.html @@ -64,7 +64,7 @@ @@ -159,6 +159,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -177,8 +179,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/03/04/community-roundup-25.html b/blog/2015/03/04/community-roundup-25.html index 4d7178e358..01e4c8e0a4 100644 --- a/blog/2015/03/04/community-roundup-25.html +++ b/blog/2015/03/04/community-roundup-25.html @@ -64,7 +64,7 @@ @@ -166,6 +166,8 @@

    Recent posts

    diff --git a/blog/2015/03/10/react-v0.13.html b/blog/2015/03/10/react-v0.13.html index 0ead208293..2777be67d6 100644 --- a/blog/2015/03/10/react-v0.13.html +++ b/blog/2015/03/10/react-v0.13.html @@ -64,7 +64,7 @@ @@ -213,6 +213,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -231,8 +233,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/03/16/react-v0.13.1.html b/blog/2015/03/16/react-v0.13.1.html index 146d63965b..50ccce09e8 100644 --- a/blog/2015/03/16/react-v0.13.1.html +++ b/blog/2015/03/16/react-v0.13.1.html @@ -64,7 +64,7 @@ @@ -158,6 +158,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -176,8 +178,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All 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 b8885cce8e..583afaac5a 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 @@ -64,7 +64,7 @@ @@ -307,6 +307,8 @@

    Recent posts

    diff --git a/blog/2015/03/26/introducing-react-native.html b/blog/2015/03/26/introducing-react-native.html index 4de7a7055d..99c7155e09 100644 --- a/blog/2015/03/26/introducing-react-native.html +++ b/blog/2015/03/26/introducing-react-native.html @@ -64,7 +64,7 @@ @@ -122,6 +122,8 @@

    Recent posts

    diff --git a/blog/2015/03/30/community-roundup-26.html b/blog/2015/03/30/community-roundup-26.html index 809ac85349..011cabd12d 100644 --- a/blog/2015/03/30/community-roundup-26.html +++ b/blog/2015/03/30/community-roundup-26.html @@ -64,7 +64,7 @@ @@ -186,6 +186,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 2ab5751ad4..606ddef646 100644 --- a/blog/2015/04/17/react-native-v0.4.html +++ b/blog/2015/04/17/react-native-v0.4.html @@ -64,7 +64,7 @@ @@ -130,6 +130,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 0c652b0646..5c8d9610cd 100644 --- a/blog/2015/04/18/react-v0.13.2.html +++ b/blog/2015/04/18/react-v0.13.2.html @@ -64,7 +64,7 @@ @@ -167,6 +167,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -185,8 +187,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/05/01/graphql-introduction.html b/blog/2015/05/01/graphql-introduction.html index 6e6a62c6be..a7bb2966f1 100644 --- a/blog/2015/05/01/graphql-introduction.html +++ b/blog/2015/05/01/graphql-introduction.html @@ -64,7 +64,7 @@ @@ -205,6 +205,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 afca9922a0..0c61583cda 100644 --- a/blog/2015/05/08/react-v0.13.3.html +++ b/blog/2015/05/08/react-v0.13.3.html @@ -64,7 +64,7 @@ @@ -154,6 +154,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -172,8 +174,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/05/22/react-native-release-process.html b/blog/2015/05/22/react-native-release-process.html index 4176352c9e..d23e8f31f1 100644 --- a/blog/2015/05/22/react-native-release-process.html +++ b/blog/2015/05/22/react-native-release-process.html @@ -64,7 +64,7 @@ @@ -128,6 +128,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 index 028bf8fd96..49629fd05f 100644 --- a/blog/2015/06/12/deprecating-jstransform-and-react-tools.html +++ b/blog/2015/06/12/deprecating-jstransform-and-react-tools.html @@ -64,7 +64,7 @@ @@ -134,6 +134,8 @@

    Recent posts

    diff --git a/blog/2015/07/03/react-v0.14-beta-1.html b/blog/2015/07/03/react-v0.14-beta-1.html index 31ac5302fe..fc60cad9dd 100644 --- a/blog/2015/07/03/react-v0.14-beta-1.html +++ b/blog/2015/07/03/react-v0.14-beta-1.html @@ -64,7 +64,7 @@ @@ -173,6 +173,8 @@

    Recent posts

    diff --git a/blog/2015/08/03/new-react-devtools-beta.html b/blog/2015/08/03/new-react-devtools-beta.html index b9c82dc9ca..c9eb693c5a 100644 --- a/blog/2015/08/03/new-react-devtools-beta.html +++ b/blog/2015/08/03/new-react-devtools-beta.html @@ -65,7 +65,7 @@ out! @@ -205,6 +205,8 @@ for more info.

    Recent posts

    diff --git a/blog/2015/08/11/relay-technical-preview.html b/blog/2015/08/11/relay-technical-preview.html index aa6d7401ae..2961143e49 100644 --- a/blog/2015/08/11/relay-technical-preview.html +++ b/blog/2015/08/11/relay-technical-preview.html @@ -64,7 +64,7 @@ @@ -141,6 +141,8 @@

    Recent posts

    diff --git a/blog/2015/08/13/reacteurope-roundup.html b/blog/2015/08/13/reacteurope-roundup.html index 486482c738..c993f451e6 100644 --- a/blog/2015/08/13/reacteurope-roundup.html +++ b/blog/2015/08/13/reacteurope-roundup.html @@ -64,7 +64,7 @@ @@ -167,6 +167,8 @@

    Recent posts

    diff --git a/blog/2015/09/02/new-react-developer-tools.html b/blog/2015/09/02/new-react-developer-tools.html index b94ac3a0fa..a418d50ad3 100644 --- a/blog/2015/09/02/new-react-developer-tools.html +++ b/blog/2015/09/02/new-react-developer-tools.html @@ -64,7 +64,7 @@ @@ -132,6 +132,8 @@

    Recent posts

    diff --git a/blog/2015/09/10/react-v0.14-rc1.html b/blog/2015/09/10/react-v0.14-rc1.html index 1a4c8e3eff..c40debf317 100644 --- a/blog/2015/09/10/react-v0.14-rc1.html +++ b/blog/2015/09/10/react-v0.14-rc1.html @@ -64,7 +64,7 @@ @@ -286,6 +286,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -304,8 +306,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/09/14/community-roundup-27.html b/blog/2015/09/14/community-roundup-27.html index aaddaaa326..857fb67193 100644 --- a/blog/2015/09/14/community-roundup-27.html +++ b/blog/2015/09/14/community-roundup-27.html @@ -64,7 +64,7 @@ @@ -187,6 +187,8 @@

    Recent posts

    diff --git a/blog/2015/10/01/react-render-and-top-level-api.html b/blog/2015/10/01/react-render-and-top-level-api.html index 4eb84e997c..4e9114b52e 100644 --- a/blog/2015/10/01/react-render-and-top-level-api.html +++ b/blog/2015/10/01/react-render-and-top-level-api.html @@ -64,7 +64,7 @@ @@ -225,6 +225,8 @@

    Recent posts

    diff --git a/blog/2015/10/07/react-v0.14.html b/blog/2015/10/07/react-v0.14.html index 4138148134..3594495713 100644 --- a/blog/2015/10/07/react-v0.14.html +++ b/blog/2015/10/07/react-v0.14.html @@ -64,7 +64,7 @@ @@ -313,6 +313,8 @@ Minified build for production: h

    Recent posts

     diff --git a/blog/2015/10/19/reactiflux-is-moving-to-discord.html b/blog/2015/10/19/reactiflux-is-moving-to-discord.html index 80586fe61d..2e1f580e68 100644 --- a/blog/2015/10/19/reactiflux-is-moving-to-discord.html +++ b/blog/2015/10/19/reactiflux-is-moving-to-discord.html @@ -64,7 +64,7 @@ @@ -190,6 +190,8 @@

    Recent posts

    diff --git a/blog/2015/10/28/react-v0.14.1.html b/blog/2015/10/28/react-v0.14.1.html index 9b7c321944..700cfcb294 100644 --- a/blog/2015/10/28/react-v0.14.1.html +++ b/blog/2015/10/28/react-v0.14.1.html @@ -64,7 +64,7 @@ @@ -158,6 +158,8 @@ Minified build for production: h

    Recent posts

     diff --git a/blog/2015/11/02/react-v0.14.2.html b/blog/2015/11/02/react-v0.14.2.html index 1a1380857a..30011f73f6 100644 --- a/blog/2015/11/02/react-v0.14.2.html +++ b/blog/2015/11/02/react-v0.14.2.html @@ -64,7 +64,7 @@ @@ -140,6 +140,8 @@ Minified build for production: h

    Recent posts

     diff --git a/blog/2015/11/18/react-v0.14.3.html b/blog/2015/11/18/react-v0.14.3.html index 64fa384108..60ba842055 100644 --- a/blog/2015/11/18/react-v0.14.3.html +++ b/blog/2015/11/18/react-v0.14.3.html @@ -64,7 +64,7 @@ @@ -158,6 +158,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -176,8 +178,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html b/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html index 8d904c1b78..13d27d2044 100644 --- a/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html +++ b/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html @@ -64,7 +64,7 @@ @@ -154,6 +154,8 @@

    Recent posts

    diff --git a/blog/2015/12/16/ismounted-antipattern.html b/blog/2015/12/16/ismounted-antipattern.html index b3ba72b666..7991dfb082 100644 --- a/blog/2015/12/16/ismounted-antipattern.html +++ b/blog/2015/12/16/ismounted-antipattern.html @@ -64,7 +64,7 @@ @@ -171,6 +171,8 @@

    Recent posts

    diff --git a/blog/2015/12/18/react-components-elements-and-instances.html b/blog/2015/12/18/react-components-elements-and-instances.html index e55fdff20b..f040cbf6f0 100644 --- a/blog/2015/12/18/react-components-elements-and-instances.html +++ b/blog/2015/12/18/react-components-elements-and-instances.html @@ -64,7 +64,7 @@ @@ -461,6 +461,8 @@

    Recent posts

    diff --git a/blog/2015/12/29/react-v0.14.4.html b/blog/2015/12/29/react-v0.14.4.html index cb0194cf07..a5edd3c48c 100644 --- a/blog/2015/12/29/react-v0.14.4.html +++ b/blog/2015/12/29/react-v0.14.4.html @@ -64,7 +64,7 @@ @@ -152,6 +152,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -170,8 +172,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html b/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html index 488fbdcee4..96dd402206 100644 --- a/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html +++ b/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html @@ -64,7 +64,7 @@ @@ -159,6 +159,8 @@

    Recent posts

    diff --git a/blog/2016/01/12/discontinuing-ie8-support.html b/blog/2016/01/12/discontinuing-ie8-support.html index 3e4d95973b..62d2f7b96e 100644 --- a/blog/2016/01/12/discontinuing-ie8-support.html +++ b/blog/2016/01/12/discontinuing-ie8-support.html @@ -64,7 +64,7 @@ @@ -114,6 +114,8 @@

    Recent posts

    diff --git a/blog/2016/02/19/new-versioning-scheme.html b/blog/2016/02/19/new-versioning-scheme.html index 0d8bc1c3b5..9e5089cfe5 100644 --- a/blog/2016/02/19/new-versioning-scheme.html +++ b/blog/2016/02/19/new-versioning-scheme.html @@ -64,7 +64,7 @@ @@ -164,6 +164,8 @@

    Recent posts

    diff --git a/blog/2016/03/07/react-v15-rc1.html b/blog/2016/03/07/react-v15-rc1.html index aad832a2fd..d4a0dbbad9 100644 --- a/blog/2016/03/07/react-v15-rc1.html +++ b/blog/2016/03/07/react-v15-rc1.html @@ -64,7 +64,7 @@ @@ -206,6 +206,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -224,8 +226,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2016/03/16/react-v15-rc2.html b/blog/2016/03/16/react-v15-rc2.html index 2b961cee47..8763e402dd 100644 --- a/blog/2016/03/16/react-v15-rc2.html +++ b/blog/2016/03/16/react-v15-rc2.html @@ -64,7 +64,7 @@ @@ -140,6 +140,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -158,8 +160,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2016/03/29/react-v0.14.8.html b/blog/2016/03/29/react-v0.14.8.html index b349d9d0f3..f9bbf8cc51 100644 --- a/blog/2016/03/29/react-v0.14.8.html +++ b/blog/2016/03/29/react-v0.14.8.html @@ -64,7 +64,7 @@ @@ -141,6 +141,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -159,8 +161,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2016/04/07/react-v15.html b/blog/2016/04/07/react-v15.html index 292d0f3054..ab81cd129a 100644 --- a/blog/2016/04/07/react-v15.html +++ b/blog/2016/04/07/react-v15.html @@ -64,7 +64,7 @@ @@ -332,6 +332,8 @@ Minified build for production: h

    Recent posts

     diff --git a/blog/2016/04/08/react-v15.0.1.html b/blog/2016/04/08/react-v15.0.1.html index a22172b535..556dde3b08 100644 --- a/blog/2016/04/08/react-v15.0.1.html +++ b/blog/2016/04/08/react-v15.0.1.html @@ -64,7 +64,7 @@ @@ -146,6 +146,8 @@ Minified build for production: h

    Recent posts

     diff --git a/blog/2016/07/11/introducing-reacts-error-code-system.html b/blog/2016/07/11/introducing-reacts-error-code-system.html index 51b8e79830..8dc059ae10 100644 --- a/blog/2016/07/11/introducing-reacts-error-code-system.html +++ b/blog/2016/07/11/introducing-reacts-error-code-system.html @@ -64,7 +64,7 @@ @@ -126,6 +126,8 @@

    Recent posts

    diff --git a/blog/2016/07/13/mixins-considered-harmful.html b/blog/2016/07/13/mixins-considered-harmful.html index fb26aae52d..0f08684823 100644 --- a/blog/2016/07/13/mixins-considered-harmful.html +++ b/blog/2016/07/13/mixins-considered-harmful.html @@ -64,7 +64,7 @@ @@ -672,6 +672,8 @@

    Recent posts

    diff --git a/blog/2016/07/22/create-apps-with-no-configuration.html b/blog/2016/07/22/create-apps-with-no-configuration.html index 7e4644830d..4e1158483c 100644 --- a/blog/2016/07/22/create-apps-with-no-configuration.html +++ b/blog/2016/07/22/create-apps-with-no-configuration.html @@ -64,7 +64,7 @@ @@ -262,6 +262,8 @@ The console output is tuned to be minimal to help you focus on the problems:

    Recent posts

    diff --git a/blog/2016/08/05/relay-state-of-the-state.html b/blog/2016/08/05/relay-state-of-the-state.html index 8ac76791de..1e91524479 100644 --- a/blog/2016/08/05/relay-state-of-the-state.html +++ b/blog/2016/08/05/relay-state-of-the-state.html @@ -64,7 +64,7 @@ @@ -195,6 +195,8 @@

    Recent posts

    diff --git a/blog/2016/09/28/our-first-50000-stars.html b/blog/2016/09/28/our-first-50000-stars.html index 9bdb099be9..3d67c379e7 100644 --- a/blog/2016/09/28/our-first-50000-stars.html +++ b/blog/2016/09/28/our-first-50000-stars.html @@ -64,7 +64,7 @@ @@ -335,6 +335,8 @@ I think we should just treat arrays of elements as a frag. This is useful for co

    Recent posts

    diff --git a/blog/2016/11/16/react-v15.4.0.html b/blog/2016/11/16/react-v15.4.0.html index fdd2cf42c0..10ccad5536 100644 --- a/blog/2016/11/16/react-v15.4.0.html +++ b/blog/2016/11/16/react-v15.4.0.html @@ -64,7 +64,7 @@ @@ -281,6 +281,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -299,8 +301,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2017/04/07/react-v15.5.0.html b/blog/2017/04/07/react-v15.5.0.html index b54c81d974..7cb443e2bb 100644 --- a/blog/2017/04/07/react-v15.5.0.html +++ b/blog/2017/04/07/react-v15.5.0.html @@ -64,7 +64,7 @@ @@ -320,6 +320,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -338,8 +340,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2017/05/18/whats-new-in-create-react-app.html b/blog/2017/05/18/whats-new-in-create-react-app.html index dba22fa7ca..307205b779 100644 --- a/blog/2017/05/18/whats-new-in-create-react-app.html +++ b/blog/2017/05/18/whats-new-in-create-react-app.html @@ -64,7 +64,7 @@ @@ -220,6 +220,8 @@

    Recent posts

    diff --git a/blog/2017/06/13/react-v15.6.0.html b/blog/2017/06/13/react-v15.6.0.html index 2df9021288..8d2a044785 100644 --- a/blog/2017/06/13/react-v15.6.0.html +++ b/blog/2017/06/13/react-v15.6.0.html @@ -64,7 +64,7 @@ @@ -203,6 +203,8 @@ Minified build for production: React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -221,8 +223,6 @@ Minified build for production: Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2017/07/26/error-handling-in-react-16.html b/blog/2017/07/26/error-handling-in-react-16.html index c8961bf430..84ae07aced 100644 --- a/blog/2017/07/26/error-handling-in-react-16.html +++ b/blog/2017/07/26/error-handling-in-react-16.html @@ -64,7 +64,7 @@ @@ -206,6 +206,8 @@

    Recent posts

    diff --git a/blog/2017/09/08/dom-attributes-in-react-16.html b/blog/2017/09/08/dom-attributes-in-react-16.html index 2401f70089..acb7313740 100644 --- a/blog/2017/09/08/dom-attributes-in-react-16.html +++ b/blog/2017/09/08/dom-attributes-in-react-16.html @@ -64,7 +64,7 @@ @@ -247,6 +247,8 @@ It uses React 16 RC, and you can React v15.6.2 +
  • DOM Attributes in React 16
  • Error Handling in React 16
    • @@ -265,8 +267,6 @@ It uses React 16 RC, and you can Create Apps with No Configuration -
  • Mixins Considered Harmful
    • -
  • All posts ...
    • diff --git a/blog/2017/09/25/react-v15.6.2.html b/blog/2017/09/25/react-v15.6.2.html new file mode 100644 index 0000000000..f5c8db366e --- /dev/null +++ b/blog/2017/09/25/react-v15.6.2.html @@ -0,0 +1,264 @@ + + + + + + + + + React v15.6.2 - React Blog + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +
    + + + React + +
    + + +
    +
    +
    + + +
    + +
    + + +

    + + React v15.6.2 + +

    + +

    + September 25, 2017 + by + + + + + + +

    + +
    + +
    +

    Today we're sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we've also included a few more fixes to improve the stability of React across all browsers.

    + +

    Additionally, 15.6.2 adds support for the controlList attribute, and CSS columns are no longer appended with a px suffix.

    + +

    Installation

    + +

    We recommend using Yarn or npm for managing front-end dependencies. If you're new to package managers, the Yarn documentation is a good place to get started.

    + +

    To install React with Yarn, run:

    +
    yarn add react@^15.6.2 react-dom@^15.6.2
+
    +

    To install React with npm, run:

    +
    npm install --save react@^15.6.2 react-dom@^15.6.2
+
    +

    We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.

    + +

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to use the production build.

    + +

    In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can include as script tags on your page:

    + + + +

    We've also published version 15.6.2 of react and react-dom on npm, and the react package on bower.

    + +
    + +

    Changelog

    + +

    15.6.2 (September 25th, 2017)

    + +

    React DOM

    + +
      +
    • Fix a bug where modifying document.documentMode would trigger IE detection in other browsers, breaking change events (@aweary in #10032
      • +
    • CSS Columns are treated as unitless numbers (@aweary in #10115
      • +
    • Fix bug in QtWebKit when wrapping synthetic events in proxies (@walrusfruitcake in #10115
      • +
    • Prevent event handlers from receiving extra argument (dev only) (@aweary in #10115
      • +
    • Fix cases where onChange would not fire with defaultChecked on radio inputs (@jquense in #10156)
      • +
    • Add support for controlList attribute to DOM property whitelist (@nhunzaker in #9940)
      • +
    + +
    + + +
    + + +
    +
    +
    +

    Recent posts

    + +
    +
    + +
    + + + + +
    + +
    + + + + diff --git a/blog/all.html b/blog/all.html index 44feef48f6..0643d6291b 100644 --- a/blog/all.html +++ b/blog/all.html @@ -63,7 +63,7 @@ @@ -74,6 +74,13 @@

    All Posts

    +

    React v15.6.2 on September 25, 2017 by + + + + +

    +

    DOM Attributes in React 16 on September 8, 2017 by Dan Abramov diff --git a/blog/index.html b/blog/index.html index b818fa4149..213422d4b3 100644 --- a/blog/index.html +++ b/blog/index.html @@ -63,7 +63,7 @@

    @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,89 @@
    +

    + + React v15.6.2 + +

    + +

    + September 25, 2017 + by + + + + + + +

    + +
    + +
    +

    Today we're sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we've also included a few more fixes to improve the stability of React across all browsers.

    + +

    Additionally, 15.6.2 adds support for the controlList attribute, and CSS columns are no longer appended with a px suffix.

    + +

    Installation

    + +

    We recommend using Yarn or npm for managing front-end dependencies. If you're new to package managers, the Yarn documentation is a good place to get started.

    + +

    To install React with Yarn, run:

    +
    yarn add react@^15.6.2 react-dom@^15.6.2
+
    +

    To install React with npm, run:

    +
    npm install --save react@^15.6.2 react-dom@^15.6.2
+
    +

    We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.

    + +

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to use the production build.

    + +

    In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can include as script tags on your page:

    + + + +

    We've also published version 15.6.2 of react and react-dom on npm, and the react package on bower.

    + +
    + +

    Changelog

    + +

    15.6.2 (September 25th, 2017)

    + +

    React DOM

    + +
      +
    • Fix a bug where modifying document.documentMode would trigger IE detection in other browsers, breaking change events (@aweary in #10032
      • +
    • CSS Columns are treated as unitless numbers (@aweary in #10115
      • +
    • Fix bug in QtWebKit when wrapping synthetic events in proxies (@walrusfruitcake in #10115
      • +
    • Prevent event handlers from receiving extra argument (dev only) (@aweary in #10115
      • +
    • Fix cases where onChange would not fire with defaultChecked on radio inputs (@jquense in #10156)
      • +
    • Add support for controlList attribute to DOM property whitelist (@nhunzaker in #9940)
      • +
    + +
    + + + +
    + +
    + +

    DOM Attributes in React 16 @@ -661,247 +744,6 @@ Minified build for production: - - -

    - - React v15.5.0 - -

    - -

    - April 7, 2017 - by - - - Andrew Clark - - - -

    - -
    - -
    -

    It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React's internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.

    - -

    To that end, today we're releasing React 15.5.0.

    - -

    New Deprecation Warnings

    - -

    The biggest change is that we've extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.

    - -

    These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats console.error as a failure.

    - -

    Adding new warnings is not something we do lightly. Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.

    - -

    So while the warnings may cause frustration in the short-term, we believe prodding developers to migrate their codebases now prevents greater frustration in the future. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.

    - -

    For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the react-codemod project.

    - -

    Migrating from React.PropTypes

    - -

    Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.

    - -

    In 15.5, instead of accessing PropTypes from the main React object, install the prop-types package and import them from there:

    -
    // Before (15.4 and below)
-import React from 'react';
-
-class Component extends React.Component {
-  render() {
-    return <div>{this.props.text}</div>;
-  }
-}
-
-Component.propTypes = {
-  text: React.PropTypes.string.isRequired,
-}
-
-// After (15.5)
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class Component extends React.Component {
-  render() {
-    return <div>{this.props.text}</div>;
-  }
-}
-
-Component.propTypes = {
-  text: PropTypes.string.isRequired,
-};
-
    -

    The codemod for this change performs this conversion automatically. Basic usage:

    -
    jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
-
    -

    The propTypes, contextTypes, and childContextTypes APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.

    - -

    You may also consider using Flow to statically type check your JavaScript code, including React components.

    - -

    Migrating from React.createClass

    - -

    When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: React.createClass.

    - -

    Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. Along with functional components, JavaScript classes are now the preferred way to create components in React.

    - -

    For your existing createClass components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, create-react-class is available on npm as a drop-in replacement:

    -
    // Before (15.4 and below)
-var React = require('react');
-
-var Component = React.createClass({
-  mixins: [MixinA],
-  render() {
-    return <Child />;
-  }
-});
-
-// After (15.5)
-var React = require('react');
-var createReactClass = require('create-react-class');
-
-var Component = createReactClass({
-  mixins: [MixinA],
-  render() {
-    return <Child />;
-  }
-});
-
    -

    Your components will continue to work the same as they did before.

    - -

    The codemod for this change attempts to convert a createClass component to a JavaScript class, with a fallback to create-react-class if necessary. It has converted thousands of components internally at Facebook.

    - -

    Basic usage:

    -
    jscodeshift -t react-codemod/transforms/class.js path/to/components
-
    -

    Discontinuing support for React Addons

    - -

    We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.

    - -
      -
    • react-addons-create-fragment – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead.
      • -
    • react-addons-css-transition-group - Use react-transition-group/CSSTransitionGroup instead. Version 1.1.1 provides a drop-in replacement.
      • -
    • react-addons-linked-state-mixin - Explicitly set the value and onChange handler instead.
      • -
    • react-addons-pure-render-mixin - Use React.PureComponent instead.
      • -
    • react-addons-shallow-compare - Use React.PureComponent instead.
      • -
    • react-addons-transition-group - Use react-transition-group/TransitionGroup instead. Version 1.1.1 provides a drop-in replacement.
      • -
    • react-addons-update - Use immutability-helper instead, a drop-in replacement.
      • -
    • react-linked-input - Explicitly set the value and onChange handler instead.
      • -
    - -

    We're also discontinuing support for the react-with-addons UMD build. It will be removed in React 16.

    - -

    React Test Utils

    - -

    Currently, the React Test Utils live inside react-addons-test-utils. As of 15.5, we're deprecating that package and moving them to react-dom/test-utils instead:

    -
    // Before (15.4 and below)
-import TestUtils from 'react-addons-test-utils';
-
-// After (15.5)
-import TestUtils from 'react-dom/test-utils';
-
    -

    This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.

    - -

    The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to react-test-renderer/shallow.

    -
    // Before (15.4 and below)
-import { createRenderer } from 'react-addons-test-utils';
-
-// After (15.5)
-import { createRenderer } from 'react-test-renderer/shallow';
-
    -
    - -

    Acknowledgements

    - -

    A special thank you to these folks for transferring ownership of npm package names:

    - - - -
    - -

    Installation

    - -

    We recommend using Yarn or npm for managing front-end dependencies. If you're new to package managers, the Yarn documentation is a good place to get started.

    - -

    To install React with Yarn, run:

    -
    yarn add react@^15.5.0 react-dom@^15.5.0
-
    -

    To install React with npm, run:

    -
    npm install --save react@^15.5.0 react-dom@^15.5.0
-
    -

    We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.

    - -

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to compile it in production mode.

    - -

    In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can include as script tags on your page:

    - - - -

    We've also published version 15.5.0 of the react, react-dom, and addons packages on npm and the react package on bower.

    - -
    - -

    Changelog

    - -

    15.5.0 (April 7, 2017)

    - -

    React

    - -
      -
    • Added a deprecation warning for React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)
      • -
    • Added a deprecation warning for React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)
      • -
    • Fixed an issue when using ReactDOM together with ReactDOMServer. (@wacii in #9005)
      • -
    • Fixed issue with Closure Compiler. (@anmonteiro in #8895)
      • -
    • Another fix for Closure Compiler. (@Shastel in #8882)
      • -
    • Added component stack info to invalid element type warning. (@n3tr in #8495)
      • -
    - -

    React DOM

    - -
      -
    • Fixed Chrome bug when backspacing in number inputs. (@nhunzaker in #7359)
      • -
    • Added react-dom/test-utils, which exports the React Test Utils. (@bvaughn)
      • -
    - -

    React Test Renderer

    - -
      -
    • Fixed bug where componentWillUnmount was not called for children. (@gre in #8512)
      • -
    • Added react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)
      • -
    - -

    React Addons

    - -
      -
    • Last release for addons; they will no longer be actively maintained.
      • -
    • Removed peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)
      • -
    • Updated to remove references to React.createClass and React.PropTypes (@acdlite in 12a96b9)
      • -
    • react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)
      • -
    - -
    - - -

    diff --git a/blog/page10/index.html b/blog/page10/index.html index e8a0b0c4af..042ec40536 100644 --- a/blog/page10/index.html +++ b/blog/page10/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,234 @@
    +

    + + Building The Facebook News Feed With Relay + +

    + +

    + March 19, 2015 + by + + + Joseph Savona + + + +

    + +
    + +
    +

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

    + +

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

    + +


    + +

    The Relay Architecture

    + +

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

    + +

    Relay Architecture

    + +

    The main pieces are as follows:

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

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

    + +


    + +

    A Relay Application

    + +

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

    + +

    Sample News Feed

    + +


    + +

    The <Story> Begins

    + +

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

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


    + +

    What's the <Story>?

    + +

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

    +
    // Story.react.js
+class Story extends React.Component { ... }
+
+export default Relay.createContainer(Story, {
+  fragments: {
+    story: /* TODO */
+  }
+});
+
    +

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

    + +

    React Container Data Flow

    + +

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

    +
    // Story.react.js
+class Story extends React.Component { ... }
+
+export default Relay.createContainer(Story, {
+  fragments: {
+    story: () => Relay.QL`
+      fragment on Story {
+        author {
+          name
+          profilePicture {
+            uri
+          }
+        }
+        text
+      }
+    `,
+  },
+});
+
    +

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

    + +


    + +

    <Story>s on Demand

    + +

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

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

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

    + +

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

    + +

    Relay Container Data Flow

    + +


    + +

    <NewsFeed> Worthy

    + +

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

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


    + +

    All the News Fit to be Relayed

    + +

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

    + +

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

    +
    // NewsFeed.react.js
+class NewsFeed extends React.Component { ... }
+
+export default Relay.createContainer(NewsFeed, {
+  initialVariables: {
+    count: 3                                /* default to 3 stories */
+  },
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        stories(first: $count) {            /* fetch viewer's stories */
+          edges {                           /* traverse the graph */
+            node {
+              ${Story.getFragment('story')} /* compose child fragment */
+            }
+          }
+        }
+      }
+    `,
+  },
+});
+
    +

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

    + +

    Query variables are available to components as props.relay.variables and can be modified with props.relay.setVariables(nextVariables). We can use these to implement pagination:

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

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

    + +


    + +

    In Conclusion

    + +

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

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

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

    + +
    + + + +
    + +
    + +

    React v0.13.1 @@ -481,124 +709,6 @@ Minified build for production: - - -

    - - React v0.13 RC - -

    - -

    - February 24, 2015 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

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

    - -

    The release candidate is available for download:

    - - - -

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

    - -
    - -

    Changelog

    - -

    React Core

    - -

    Breaking Changes

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

    New Features

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

    Deprecations

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

    React with Add-Ons

    - -

    Deprecations

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

    React Tools

    - -

    Breaking Changes

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

    New Features

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

    JSX

    - -

    Breaking Changes

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

    diff --git a/blog/page11/index.html b/blog/page11/index.html index d67930382f..3156206d21 100644 --- a/blog/page11/index.html +++ b/blog/page11/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,124 @@
    +

    + + React v0.13 RC + +

    + +

    + February 24, 2015 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

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

    + +

    The release candidate is available for download:

    + + + +

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

    + +
    + +

    Changelog

    + +

    React Core

    + +

    Breaking Changes

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

    New Features

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

    Deprecations

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

    React with Add-Ons

    + +

    Deprecations

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

    React Tools

    + +

    Breaking Changes

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

    New Features

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

    JSX

    + +

    Breaking Changes

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

    Streamlining React Elements @@ -870,74 +988,6 @@ -

    - -
    - - -

    - - React.js Conf Diversity Scholarship - -

    - -

    - December 19, 2014 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

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

    - -
    - -

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

    - -

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

    - -

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

    - -

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

    - -

    Award Includes

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

    Important Dates

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

    Eligibility

    - -
      -
    • Must currently be studying or working in Computer Science or a related field
      • -
    • International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
      • -
    • You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park
      • -
    - -
    - - -
    diff --git a/blog/page12/index.html b/blog/page12/index.html index 8ffc069145..1faf8339e0 100644 --- a/blog/page12/index.html +++ b/blog/page12/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,74 @@
    +

    + + React.js Conf Diversity Scholarship + +

    + +

    + December 19, 2014 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

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

    + +
    + +

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

    + +

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

    + +

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

    + +

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

    + +

    Award Includes

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

    Important Dates

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

    Eligibility

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

    React v0.12.2 @@ -535,45 +603,6 @@ Minified build for production: - - -

    - - React.js Conf - -

    - -

    - October 27, 2014 - by - - - Vjeux - - - -

    - -
    - -
    -

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

    - -

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

    - -

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

    - -

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

    - -

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

    - -
    - - -

    diff --git a/blog/page13/index.html b/blog/page13/index.html index ddba83b702..1509857935 100644 --- a/blog/page13/index.html +++ b/blog/page13/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,45 @@
    +

    + + React.js Conf + +

    + +

    + October 27, 2014 + by + + + Vjeux + + + +

    + +
    + +
    +

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

    + +

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

    + +

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

    + +

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

    + +

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

    + +
    + + + +
    + +
    + +

    Community Round-up #23 @@ -924,91 +963,6 @@ Minified build for production: - - -

    - - React v0.11.2 - -

    - -

    - September 16, 2014 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

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

    - -

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

    - -

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

    - -

    The release is available for download from the CDN:

    - - - -

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

    - -

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

    - -

    React Core

    - -

    New Features

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

    JSX

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

    React Tools

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

    diff --git a/blog/page14/index.html b/blog/page14/index.html index 1987fca772..ffecb18df1 100644 --- a/blog/page14/index.html +++ b/blog/page14/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,91 @@
    +

    + + React v0.11.2 + +

    + +

    + September 16, 2014 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

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

    + +

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

    + +

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

    + +

    The release is available for download from the CDN:

    + + + +

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

    + +

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

    + +

    React Core

    + +

    New Features

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

    JSX

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

    React Tools

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

    Community Round-up #22 @@ -457,134 +542,6 @@ This is not the intended way to use React but can be useful as last resort if yo -

    - -
    - - -

    - - Community Round-up #20 - -

    - -

    - July 28, 2014 - by - - - Lou Husson - - - -

    - -
    - -
    -

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

    - -

    Atom moves to React

    - -

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

    - -

    - -

    Why Does React Scale?

    - -

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

    - - - -

    Live Editing

    - -

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

    - - - -

    ReactIntl Mixin by Yahoo

    - -

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

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

    Thinking and Learning React

    - -

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

    - -

    London React Meetup

    - -

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

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

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

    - -

    Using React and KendoUI Together

    - -

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

    - -
    - -

    Acorn JSX

    - -

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

    - -

    ReactScriptLoader

    - -

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

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

    Random Tweet

    - - - -
    - - -
    diff --git a/blog/page15/index.html b/blog/page15/index.html index a15574b842..8758185d3a 100644 --- a/blog/page15/index.html +++ b/blog/page15/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,134 @@
    +

    + + Community Round-up #20 + +

    + +

    + July 28, 2014 + by + + + Lou Husson + + + +

    + +
    + +
    +

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

    + +

    Atom moves to React

    + +

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

    + +

    + +

    Why Does React Scale?

    + +

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

    + + + +

    Live Editing

    + +

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

    + + + +

    ReactIntl Mixin by Yahoo

    + +

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

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

    Thinking and Learning React

    + +

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

    + +

    London React Meetup

    + +

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

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

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

    + +

    Using React and KendoUI Together

    + +

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

    + +
    + +

    Acorn JSX

    + +

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

    + +

    ReactScriptLoader

    + +

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

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

    Random Tweet

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

    React v0.11.1 @@ -649,45 +777,6 @@ Minified build for production: - - -

    - - One Year of Open-Source React - -

    - -

    - May 29, 2014 - by - - - Cheng Lou - - - -

    - -
    - -
    -

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

    - -

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

    - -

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

    - -

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

    - -

    Here’s to another year!

    - -
    - - -

    diff --git a/blog/page16/index.html b/blog/page16/index.html index 9f44d61922..1fecb57eb8 100644 --- a/blog/page16/index.html +++ b/blog/page16/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,45 @@
    +

    + + One Year of Open-Source React + +

    + +

    + May 29, 2014 + by + + + Cheng Lou + + + +

    + +
    + +
    +

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

    + +

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

    + +

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

    + +

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

    + +

    Here’s to another year!

    + +
    + + + +
    + +
    + +

    Flux: An Application Architecture for React @@ -394,115 +433,6 @@ Minified build for production: - - -

    - - React v0.10 RC - -

    - -

    - March 19, 2014 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

    The release candidate is available for download from the CDN:

    - - - -

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

    - -

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

    - -

    Clone On Mount

    - -

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

    - -

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

    - -

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

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

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

    - -

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

    - -

    Changelog

    - -

    React Core

    - -

    New Features

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

    Bug Fixes

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

    Addons

    - - - -

    react-tools

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

    diff --git a/blog/page17/index.html b/blog/page17/index.html index d5b46be3e2..27dfd5bf12 100644 --- a/blog/page17/index.html +++ b/blog/page17/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,115 @@
    +

    + + React v0.10 RC + +

    + +

    + March 19, 2014 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

    The release candidate is available for download from the CDN:

    + + + +

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

    + +

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

    + +

    Clone On Mount

    + +

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

    + +

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

    + +

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

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

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

    + +

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

    + +

    Changelog

    + +

    React Core

    + +

    New Features

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

    Bug Fixes

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

    Addons

    + + + +

    react-tools

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

    Community Round-up #18 @@ -688,114 +797,6 @@ Minified build for production: - - -

    - - Community Round-up #16 - -

    - -

    - February 15, 2014 - by - - - Jonas Gebhardt - - - -

    - -
    - -
    -

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

    - -

    React in a nutshell

    - -

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

    - - - -

    React's diff algorithm

    - -

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

    - -

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

    - -

    Many, many new introductions to React!

    - -

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

    - -
    -

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

    - -

    Read the full post...

    -
    - -

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

    - -
    -

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

    - -

    Read the full post...

    -
    - -

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

    - -

    React around the world

    - -

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

    - -

    React tutorial series

    - -

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

    - -

    Beginner tutorial: Implementing the board game Go

    - -

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

    - -

    Egghead.io video tutorials

    - -

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

    - -

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

    - -

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

    - -
    -

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

    - -

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

    - -

    Read the full post...

    -
    - -

    Building a complex React component

    - -

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

    - -

    Random Tweets

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

    diff --git a/blog/page18/index.html b/blog/page18/index.html index 2d3c9d81d6..e6b23aa172 100644 --- a/blog/page18/index.html +++ b/blog/page18/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,114 @@
    +

    + + Community Round-up #16 + +

    + +

    + February 15, 2014 + by + + + Jonas Gebhardt + + + +

    + +
    + +
    +

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

    + +

    React in a nutshell

    + +

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

    + + + +

    React's diff algorithm

    + +

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

    + +

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

    + +

    Many, many new introductions to React!

    + +

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

    + +
    +

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

    + +

    Read the full post...

    +
    + +

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

    + +
    +

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

    + +

    Read the full post...

    +
    + +

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

    + +

    React around the world

    + +

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

    + +

    React tutorial series

    + +

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

    + +

    Beginner tutorial: Implementing the board game Go

    + +

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

    + +

    Egghead.io video tutorials

    + +

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

    + +

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

    + +

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

    + +
    +

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

    + +

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

    + +

    Read the full post...

    +
    + +

    Building a complex React component

    + +

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

    + +

    Random Tweets

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

    Community Round-up #15 @@ -543,125 +651,6 @@ rails s -

    - -
    - - -

    - - Community Round-up #12 - -

    - -

    - December 23, 2013 - by - - - Vjeux - - - -

    - -
    - -
    -

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

    - -

    The Future of JavaScript MVC

    - -

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

    - -
    -

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

    - -

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

    - -

    A whole lot. -

    - -

    Read the full article...

    -
    - -

    Scroll Position with React

    - -

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

    - -
    -

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

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

    Check out the blog article...

    -
    - -

    Lights Out

    - -

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

    - -

    Try it out!

    - -

    Reactive Table Bookmarklet

    - -

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

    - -

    Check out the blog post...

    - -

    MontageJS Tutorial in React

    - -

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

    - -

    View the source on JSFiddle...

    - -

    Writing Good React Components

    - -

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

    - -
    -

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

    - -

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

    - -

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

    - -

    Read the full article ...

    -
    - -

    Hoodie React TodoMVC

    - -

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

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

    Check out on GitHub...

    - -

    JSX Compiler

    - -

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

    - -

    Try it out!

    - -

    Random Tweet

    - -

    - -
    - - -
    diff --git a/blog/page19/index.html b/blog/page19/index.html index 5b25a750a0..362f84527a 100644 --- a/blog/page19/index.html +++ b/blog/page19/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,125 @@
    +

    + + Community Round-up #12 + +

    + +

    + December 23, 2013 + by + + + Vjeux + + + +

    + +
    + +
    +

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

    + +

    The Future of JavaScript MVC

    + +

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

    + +
    +

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

    + +

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

    + +

    A whole lot. +

    + +

    Read the full article...

    +
    + +

    Scroll Position with React

    + +

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

    + +
    +

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

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

    Check out the blog article...

    +
    + +

    Lights Out

    + +

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

    + +

    Try it out!

    + +

    Reactive Table Bookmarklet

    + +

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

    + +

    Check out the blog post...

    + +

    MontageJS Tutorial in React

    + +

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

    + +

    View the source on JSFiddle...

    + +

    Writing Good React Components

    + +

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

    + +
    +

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

    + +

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

    + +

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

    + +

    Read the full article ...

    +
    + +

    Hoodie React TodoMVC

    + +

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

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

    Check out on GitHub...

    + +

    JSX Compiler

    + +

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

    + +

    Try it out!

    + +

    Random Tweet

    + +

    + +
    + + + +
    + +
    + +

    React v0.8 @@ -494,54 +613,6 @@ Is this some sort of template language? Specifically no. This might have been th -

    - -
    - - -

    - - React v0.5.1 - -

    - -

    - October 29, 2013 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

    Changelog

    - -

    React

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

    React with Addons

    - -
      -
    • Fixed bug with transition and animation event detection.
      • -
    - -
    - - -
    diff --git a/blog/page2/index.html b/blog/page2/index.html index fca370bbe6..354c8969ae 100644 --- a/blog/page2/index.html +++ b/blog/page2/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,247 @@
    +

    + + React v15.5.0 + +

    + +

    + April 7, 2017 + by + + + Andrew Clark + + + +

    + +
    + +
    +

    It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a complete rewrite of React's internals. We take stability seriously, and are committed to bringing those improvements to all of our users with minimal effort.

    + +

    To that end, today we're releasing React 15.5.0.

    + +

    New Deprecation Warnings

    + +

    The biggest change is that we've extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.

    + +

    These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats console.error as a failure.

    + +

    Adding new warnings is not something we do lightly. Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.

    + +

    So while the warnings may cause frustration in the short-term, we believe prodding developers to migrate their codebases now prevents greater frustration in the future. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.

    + +

    For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the react-codemod project.

    + +

    Migrating from React.PropTypes

    + +

    Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.

    + +

    In 15.5, instead of accessing PropTypes from the main React object, install the prop-types package and import them from there:

    +
    // Before (15.4 and below)
+import React from 'react';
+
+class Component extends React.Component {
+  render() {
+    return <div>{this.props.text}</div>;
+  }
+}
+
+Component.propTypes = {
+  text: React.PropTypes.string.isRequired,
+}
+
+// After (15.5)
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Component extends React.Component {
+  render() {
+    return <div>{this.props.text}</div>;
+  }
+}
+
+Component.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
    +

    The codemod for this change performs this conversion automatically. Basic usage:

    +
    jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
+
    +

    The propTypes, contextTypes, and childContextTypes APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.

    + +

    You may also consider using Flow to statically type check your JavaScript code, including React components.

    + +

    Migrating from React.createClass

    + +

    When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: React.createClass.

    + +

    Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. Along with functional components, JavaScript classes are now the preferred way to create components in React.

    + +

    For your existing createClass components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, create-react-class is available on npm as a drop-in replacement:

    +
    // Before (15.4 and below)
+var React = require('react');
+
+var Component = React.createClass({
+  mixins: [MixinA],
+  render() {
+    return <Child />;
+  }
+});
+
+// After (15.5)
+var React = require('react');
+var createReactClass = require('create-react-class');
+
+var Component = createReactClass({
+  mixins: [MixinA],
+  render() {
+    return <Child />;
+  }
+});
+
    +

    Your components will continue to work the same as they did before.

    + +

    The codemod for this change attempts to convert a createClass component to a JavaScript class, with a fallback to create-react-class if necessary. It has converted thousands of components internally at Facebook.

    + +

    Basic usage:

    +
    jscodeshift -t react-codemod/transforms/class.js path/to/components
+
    +

    Discontinuing support for React Addons

    + +

    We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.

    + +
      +
    • react-addons-create-fragment – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead.
      • +
    • react-addons-css-transition-group - Use react-transition-group/CSSTransitionGroup instead. Version 1.1.1 provides a drop-in replacement.
      • +
    • react-addons-linked-state-mixin - Explicitly set the value and onChange handler instead.
      • +
    • react-addons-pure-render-mixin - Use React.PureComponent instead.
      • +
    • react-addons-shallow-compare - Use React.PureComponent instead.
      • +
    • react-addons-transition-group - Use react-transition-group/TransitionGroup instead. Version 1.1.1 provides a drop-in replacement.
      • +
    • react-addons-update - Use immutability-helper instead, a drop-in replacement.
      • +
    • react-linked-input - Explicitly set the value and onChange handler instead.
      • +
    + +

    We're also discontinuing support for the react-with-addons UMD build. It will be removed in React 16.

    + +

    React Test Utils

    + +

    Currently, the React Test Utils live inside react-addons-test-utils. As of 15.5, we're deprecating that package and moving them to react-dom/test-utils instead:

    +
    // Before (15.4 and below)
+import TestUtils from 'react-addons-test-utils';
+
+// After (15.5)
+import TestUtils from 'react-dom/test-utils';
+
    +

    This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.

    + +

    The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to react-test-renderer/shallow.

    +
    // Before (15.4 and below)
+import { createRenderer } from 'react-addons-test-utils';
+
+// After (15.5)
+import { createRenderer } from 'react-test-renderer/shallow';
+
    +
    + +

    Acknowledgements

    + +

    A special thank you to these folks for transferring ownership of npm package names:

    + + + +
    + +

    Installation

    + +

    We recommend using Yarn or npm for managing front-end dependencies. If you're new to package managers, the Yarn documentation is a good place to get started.

    + +

    To install React with Yarn, run:

    +
    yarn add react@^15.5.0 react-dom@^15.5.0
+
    +

    To install React with npm, run:

    +
    npm install --save react@^15.5.0 react-dom@^15.5.0
+
    +

    We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.

    + +

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to compile it in production mode.

    + +

    In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can include as script tags on your page:

    + + + +

    We've also published version 15.5.0 of the react, react-dom, and addons packages on npm and the react package on bower.

    + +
    + +

    Changelog

    + +

    15.5.0 (April 7, 2017)

    + +

    React

    + +
      +
    • Added a deprecation warning for React.createClass. Points users to create-react-class instead. (@acdlite in d9a4fa4)
      • +
    • Added a deprecation warning for React.PropTypes. Points users to prop-types instead. (@acdlite in 043845c)
      • +
    • Fixed an issue when using ReactDOM together with ReactDOMServer. (@wacii in #9005)
      • +
    • Fixed issue with Closure Compiler. (@anmonteiro in #8895)
      • +
    • Another fix for Closure Compiler. (@Shastel in #8882)
      • +
    • Added component stack info to invalid element type warning. (@n3tr in #8495)
      • +
    + +

    React DOM

    + +
      +
    • Fixed Chrome bug when backspacing in number inputs. (@nhunzaker in #7359)
      • +
    • Added react-dom/test-utils, which exports the React Test Utils. (@bvaughn)
      • +
    + +

    React Test Renderer

    + +
      +
    • Fixed bug where componentWillUnmount was not called for children. (@gre in #8512)
      • +
    • Added react-test-renderer/shallow, which exports the shallow renderer. (@bvaughn)
      • +
    + +

    React Addons

    + +
      +
    • Last release for addons; they will no longer be actively maintained.
      • +
    • Removed peerDependencies so that addons continue to work indefinitely. (@acdlite and @bvaughn in 8a06cd7 and 67a8db3)
      • +
    • Updated to remove references to React.createClass and React.PropTypes (@acdlite in 12a96b9)
      • +
    • react-addons-test-utils is deprecated. Use react-dom/test-utils and react-test-renderer/shallow instead. (@bvaughn)
      • +
    + +
    + + + +
    + +
    + +

    React v15.4.0 @@ -858,599 +1099,6 @@ The console output is tuned to be minimal to help you focus on the problems:

    -

    - -
    - - -

    - - Mixins Considered Harmful - -

    - -

    - July 13, 2016 - by - - - Dan Abramov - - - -

    - -
    - -
    -

    “How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.

    - -

    It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.

    - -

    To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.

    - -

    Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.

    - -

    In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.

    - -

    Why Mixins are Broken

    - -

    At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.

    - -

    However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the same conclusions after writing my fair share of terrible mixins.

    - -

    This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.

    - -

    Mixins introduce implicit dependencies

    - -

    Sometimes a component relies on a certain method defined in the mixin, such as getClassName(). Sometimes it’s the other way around, and mixin calls a method like renderHeader() on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.

    - -

    Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?

    - -

    These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s render() method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.

    - -

    Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.

    - -

    Mixins cause name clashes

    - -

    There is no guarantee that two particular mixins can be used together. For example, if FluxListenerMixin defines handleChange() and WindowSizeMixin defines handleChange(), you can’t use them together. You also can’t define a method with this name on your own component.

    - -

    It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.

    - -

    If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.

    - -

    The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.

    - -

    Mixins cause snowballing complexity

    - -

    Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.

    - -

    A component needs some state to track mouse hover. To keep this logic reusable, you might extract handleMouseEnter(), handleMouseLeave() and isHovering() into a HoverMixin. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in HoverMixin so they create a TooltipMixin that uses HoverMixin. TooltipMixin reads isHovering() provided by HoverMixin in its componentDidUpdate() and either shows or hides the tooltip.

    - -

    A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called getTooltipOptions() to TooltipMixin. By this time, components that show popovers also use HoverMixin. However popovers need a different hover delay. To solve this, somebody adds support for an optional getHoverOptions() method and implements it in TooltipMixin. Those mixins are now tightly coupled.

    - -

    This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling TooltipMixin from HoverMixin. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.

    - -

    Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.

    - -

    These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.

    - -

    Migrating from Mixins

    - -

    Let’s make it clear that mixins are not technically deprecated. If you use React.createClass(), you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.

    - -

    Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.

    - -

    We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!

    - -

    Performance Optimizations

    - -

    One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:

    -
    var PureRenderMixin = require('react-addons-pure-render-mixin');
-
-var Button = React.createClass({
-  mixins: [PureRenderMixin],
-
-  // ...
-
-});
-
    -

    Solution

    - -

    To express the same without mixins, you can use the shallowCompare function directly instead:

    -
    var shallowCompare = require('react-addons-shallow-compare');
-
-var Button = React.createClass({
-  shouldComponentUpdate: function(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  },
-
-  // ...
-
-});
-
    -

    If you use a custom mixin implementing a shouldComponentUpdate function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.

    - -

    We understand that more typing can be annoying. For the most common case, we plan to introduce a new base class called React.PureComponent in the next minor release. It uses the same shallow comparison as PureRenderMixin does today.

    - -

    Subscriptions and Side Effects

    - -

    The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in componentDidMount, destroyed in componentWillUnmount, and the change handler calls this.setState().

    -
    var SubscriptionMixin = {
-  getInitialState: function() {
-    return {
-      comments: DataSource.getComments()
-    };
-  },
-
-  componentDidMount: function() {
-    DataSource.addChangeListener(this.handleChange);
-  },
-
-  componentWillUnmount: function() {
-    DataSource.removeChangeListener(this.handleChange);
-  },
-
-  handleChange: function() {
-    this.setState({
-      comments: DataSource.getComments()
-    });
-  }
-};
-
-var CommentList = React.createClass({
-  mixins: [SubscriptionMixin],
-
-  render: function() {
-    // Reading comments from state managed by mixin.
-    var comments = this.state.comments;
-    return (
-      <div>
-        {comments.map(function(comment) {
-          return <Comment comment={comment} key={comment.id} />
-        })}
-      </div>
-    )
-  }
-});
-
-module.exports = CommentList;
-
    -

    Solution

    - -

    If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.

    - -

    If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called “higher-order components”. It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.

    - -

    Higher-Order Components Explained

    - -

    Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:

    -
    function addAndLog(x, y) {
-  var result = x + y;
-  console.log('result:', result);
-  return result;
-}
-
-function multiplyAndLog(x, y) {
-  var result = x * y;
-  console.log('result:', result);
-  return result;
-}
-
    -

    These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.

    - -

    Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a higher-order function, that is, a function that takes a function as an argument and returns a function.

    - -

    Again, it sounds more intimidating than it really is:

    -
    function withLogging(wrappedFunction) {
-  // Return a function with the same API...
-  return function(x, y) {
-    // ... that calls the original function
-    var result = wrappedFunction(x, y);
-    // ... but also logs its result!
-    console.log('result:', result);
-    return result;
-  };
-}
-
    -

    The withLogging higher-order function lets us write add and multiply without the logging statements, and later wrap them to get addAndLog and multiplyAndLog with exactly the same signatures as before:

    -
    function add(x, y) {
-  return x + y;
-}
-
-function multiply(x, y) {
-  return x * y;
-}
-
-function withLogging(wrappedFunction) {
-  return function(x, y) {
-    var result = wrappedFunction(x, y);
-    console.log('result:', result);
-    return result;
-  };
-}
-
-// Equivalent to writing addAndLog by hand:
-var addAndLog = withLogging(add);
-
-// Equivalent to writing multiplyAndLog by hand:
-var multiplyAndLog = withLogging(multiply);
-
    -

    Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.

    - -

    As a first step, we will split our CommentList component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.

    -
    // This is a child component.
-// It only renders the comments it receives as props.
-var CommentList = React.createClass({
-  render: function() {
-    // Note: now reading from props rather than state.
-    var comments = this.props.comments;
-    return (
-      <div>
-        {comments.map(function(comment) {
-          return <Comment comment={comment} key={comment.id} />
-        })}
-      </div>
-    )
-  }
-});
-
-// This is a parent component.
-// It subscribes to the data source and renders <CommentList />.
-var CommentListWithSubscription = React.createClass({
-  getInitialState: function() {
-    return {
-      comments: DataSource.getComments()
-    };
-  },
-
-  componentDidMount: function() {
-    DataSource.addChangeListener(this.handleChange);
-  },
-
-  componentWillUnmount: function() {
-    DataSource.removeChangeListener(this.handleChange);
-  },
-
-  handleChange: function() {
-    this.setState({
-      comments: DataSource.getComments()
-    });
-  },
-
-  render: function() {
-    // We pass the current state as props to CommentList.
-    return <CommentList comments={this.state.comments} />;
-  }
-});
-
-module.exports = CommentListWithSubscription;
-
    -

    There is just one final step left to do.

    - -

    Remember how we made withLogging() take a function and return another function wrapping it? We can apply a similar pattern to React components.

    - -

    We will write a new function called withSubscription(WrappedComponent). Its argument could be any React component. We will pass CommentList as WrappedComponent, but we could also apply withSubscription() to any other component in our codebase.

    - -

    This function would return another component. The returned component would manage the subscription and render <WrappedComponent /> with the current data.

    - -

    We call this pattern a “higher-order component”.

    - -

    The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with createClass(), as an ES6 class or a function. If WrappedComponent is a React component, the component created by withSubscription() can render it.

    -
    // This function takes a component...
-function withSubscription(WrappedComponent) {
-  // ...and returns another component...
-  return React.createClass({
-    getInitialState: function() {
-      return {
-        comments: DataSource.getComments()
-      };
-    },
-
-    componentDidMount: function() {
-      // ... that takes care of the subscription...
-      DataSource.addChangeListener(this.handleChange);
-    },
-
-    componentWillUnmount: function() {
-      DataSource.removeChangeListener(this.handleChange);
-    },
-
-    handleChange: function() {
-      this.setState({
-        comments: DataSource.getComments()
-      });
-    },
-
-    render: function() {
-      // ... and renders the wrapped component with the fresh data!
-      return <WrappedComponent comments={this.state.comments} />;
-    }
-  });
-}
-
    -

    Now we can declare CommentListWithSubscription by applying withSubscription to CommentList:

    -
    var CommentList = React.createClass({
-  render: function() {
-    var comments = this.props.comments;
-    return (
-      <div>
-        {comments.map(function(comment) {
-          return <Comment comment={comment} key={comment.id} />
-        })}
-      </div>
-    )
-  }
-});
-
-// withSubscription() returns a new component that
-// is subscribed to the data source and renders
-// <CommentList /> with up-to-date data.
-var CommentListWithSubscription = withSubscription(CommentList);
-
-// The rest of the app is interested in the subscribed component
-// so we export it instead of the original unwrapped CommentList.
-module.exports = CommentListWithSubscription;
-
    -

    Solution, Revisited

    - -

    Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:

    -
    function withSubscription(WrappedComponent) {
-  return React.createClass({
-    getInitialState: function() {
-      return {
-        comments: DataSource.getComments()
-      };
-    },
-
-    componentDidMount: function() {
-      DataSource.addChangeListener(this.handleChange);
-    },
-
-    componentWillUnmount: function() {
-      DataSource.removeChangeListener(this.handleChange);
-    },
-
-    handleChange: function() {
-      this.setState({
-        comments: DataSource.getComments()
-      });
-    },
-
-    render: function() {
-      // Use JSX spread syntax to pass all props and state down automatically.
-      return <WrappedComponent {...this.props} {...this.state} />;
-    }
-  });
-}
-
-// Optional change: convert CommentList to a functional component
-// because it doesn't use lifecycle hooks or state.
-function CommentList(props) {
-  var comments = props.comments;
-  return (
-    <div>
-      {comments.map(function(comment) {
-        return <Comment comment={comment} key={comment.id} />
-      })}
-    </div>
-  )
-}
-
-// Instead of declaring CommentListWithSubscription,
-// we export the wrapped component right away.
-module.exports = withSubscription(CommentList);
-
    -

    Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.

    - -

    Like any solution, higher-order components have their own pitfalls. For example, if you heavily use refs, you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding ref forwarding to React to solve this annoyance.

    - -

    Rendering Logic

    - -

    The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.

    - -

    Here is a typical example of this pattern:

    -
    var RowMixin = {
-  // Called by components from render()
-  renderHeader: function() {
-    return (
-      <div className='row-header'>
-        <h1>
-          {this.getHeaderText() /* Defined by components */}
-        </h1>
-      </div>
-    );
-  }
-};
-
-var UserRow = React.createClass({
-  mixins: [RowMixin],
-
-  // Called by RowMixin.renderHeader()
-  getHeaderText: function() {
-    return this.props.user.fullName;
-  },
-
-  render: function() {
-    return (
-      <div>
-        {this.renderHeader() /* Defined by RowMixin */}
-        <h2>{this.props.user.biography}</h2>
-      </div>
-    )
-  }
-});
-
    -

    Multiple components may be sharing RowMixin to render the header, and each of them would need to define getHeaderText().

    - -

    Solution

    - -

    If you see rendering logic inside a mixin, it’s time to extract a component!

    - -

    Instead of RowMixin, we will define a <RowHeader> component. We will also replace the convention of defining a getHeaderText() method with the standard mechanism of top-data flow in React: passing props.

    - -

    Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:

    -
    function RowHeader(props) {
-  return (
-    <div className='row-header'>
-      <h1>{props.text}</h1>
-    </div>
-  );
-}
-
-function UserRow(props) {
-  return (
-    <div>
-      <RowHeader text={props.user.fullName} />
-      <h2>{props.user.biography}</h2>
-    </div>
-  );
-}
-
    -

    Props keep component dependencies explicit, easy to replace, and enforceable with tools like Flow and TypeScript.

    - -
    -

    Note:

    - -

    Defining components as functions is not required. There is also nothing wrong with using lifecycle hooks and state—they are first-class React features. We use functional components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.

    -
    - -

    Context

    - -

    Another group of mixins we discovered were helpers for providing and consuming React context. Context is an experimental unstable feature, has certain issues, and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.

    - -

    Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:

    -
    var RouterMixin = {
-  contextTypes: {
-    router: React.PropTypes.object.isRequired
-  },
-
-  // The mixin provides a method so that components
-  // don't have to use the context API directly.
-  push: function(path) {
-    this.context.router.push(path)
-  }
-};
-
-var Link = React.createClass({
-  mixins: [RouterMixin],
-
-  handleClick: function(e) {
-    e.stopPropagation();
-
-    // This method is defined in RouterMixin.
-    this.push(this.props.to);
-  },
-
-  render: function() {
-    return (
-      <a onClick={this.handleClick}>
-        {this.props.children}
-      </a>
-    );
-  }
-});
-
-module.exports = Link;
-
    -

    Solution

    - -

    We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.

    - -

    Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:

    -
    function withRouter(WrappedComponent) {
-  return React.createClass({
-    contextTypes: {
-      router: React.PropTypes.object.isRequired
-    },
-
-    render: function() {
-      // The wrapper component reads something from the context
-      // and passes it down as a prop to the wrapped component.
-      var router = this.context.router;
-      return <WrappedComponent {...this.props} router={router} />;
-    }
-  });
-};
-
-var Link = React.createClass({
-  handleClick: function(e) {
-    e.stopPropagation();
-
-    // The wrapped component uses props instead of context.
-    this.props.router.push(this.props.to);
-  },
-
-  render: function() {
-    return (
-      <a onClick={this.handleClick}>
-        {this.props.children}
-      </a>
-    );
-  }
-});
-
-// Don't forget to wrap the component!
-module.exports = withRouter(Link);
-
    -

    If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.

    - -

    Utility Methods

    - -

    Sometimes, mixins are used solely to share utility functions between components:

    -
    var ColorMixin = {
-  getLuminance(color) {
-    var c = parseInt(color, 16);
-    var r = (c & 0xFF0000) >> 16;
-    var g = (c & 0x00FF00) >> 8;
-    var b = (c & 0x0000FF);
-    return (0.299 * r + 0.587 * g + 0.114 * b);
-  }
-};
-
-var Button = React.createClass({
-  mixins: [ColorMixin],
-
-  render: function() {
-    var theme = this.getLuminance(this.props.color) > 160 ? 'dark' : 'light';
-    return (
-      <div className={theme}>
-        {this.props.children}
-      </div>
-    )
-  }
-});
-
    -

    Solution

    - -

    Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:

    -
    var getLuminance = require('../utils/getLuminance');
-
-var Button = React.createClass({
-  render: function() {
-    var theme = getLuminance(this.props.color) > 160 ? 'dark' : 'light';
-    return (
-      <div className={theme}>
-        {this.props.children}
-      </div>
-    )
-  }
-});
-
    -

    Other Use Cases

    - -

    Sometimes people use mixins to selectively add logging to lifecycle hooks in some components. In the future, we intend to provide an official DevTools API that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.

    - -

    If you can’t accomplish something with a component, a higher-order component, or a utility module, it could be mean that React should provide this out of the box. File an issue to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.

    - -

    Mixins are not deprecated in the traditional sense. You can keep using them with React.createClass(), as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split React.createClass() into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.

    - -

    We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.

    - -
    - - -
    diff --git a/blog/page20/index.html b/blog/page20/index.html index 32cf612def..f6825eeae4 100644 --- a/blog/page20/index.html +++ b/blog/page20/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,54 @@
    +

    + + React v0.5.1 + +

    + +

    + October 29, 2013 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

    Changelog

    + +

    React

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

    React with Addons

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

    React v0.5 @@ -505,75 +553,6 @@ -

    - -
    - - -

    - - Use React and JSX in Python Applications - -

    - -

    - August 19, 2013 - by - - - Kunal Mehta - - - -

    - -
    - -
    -

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

    - -

    Usage

    - -

    Transform your JSX files via the provided jsx module:

    -
    from react import jsx
-
-# For multiple paths, use the JSXTransformer class.
-transformer = jsx.JSXTransformer()
-for jsx_path, js_path in my_paths:
-    transformer.transform(jsx_path, js_path)
-
-# For a single file, you can use a shortcut method.
-jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
-
    -

    For full paths to React files, use the source module:

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

    Django

    - -

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

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

    Installation

    - -

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

    -
    $ pip install PyReact
-
    -

    Alternatively, add it into your requirements file:

    -
    PyReact==0.1.1
-
    -

    Dependencies: PyReact uses PyExecJS to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend PyV8.

    - -

    For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your contributions!

    - -
    - - -
    diff --git a/blog/page21/index.html b/blog/page21/index.html index 6dd255ef10..cc258ee5de 100644 --- a/blog/page21/index.html +++ b/blog/page21/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,75 @@
    +

    + + Use React and JSX in Python Applications + +

    + +

    + August 19, 2013 + by + + + Kunal Mehta + + + +

    + +
    + +
    +

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

    + +

    Usage

    + +

    Transform your JSX files via the provided jsx module:

    +
    from react import jsx
+
+# For multiple paths, use the JSXTransformer class.
+transformer = jsx.JSXTransformer()
+for jsx_path, js_path in my_paths:
+    transformer.transform(jsx_path, js_path)
+
+# For a single file, you can use a shortcut method.
+jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
+
    +

    For full paths to React files, use the source module:

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

    Django

    + +

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

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

    Installation

    + +

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

    +
    $ pip install PyReact
+
    +

    Alternatively, add it into your requirements file:

    +
    PyReact==0.1.1
+
    +

    Dependencies: PyReact uses PyExecJS to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend PyV8.

    + +

    For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your contributions!

    + +
    + + + +
    + +
    + +

    Community Round-up #6 @@ -451,74 +520,6 @@ -

    - -
    - - -

    - - React v0.4.0 - -

    - -

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

    - -
    - -
    -

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

    - -

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

    - -

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

    - -

    When you're ready, go download it!

    - -

    React

    - -
      -
    • Switch from using id attribute to data-reactid to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
      • -
    • Support for more DOM elements and attributes (e.g., <canvas>)
      • -
    • Improved server-side rendering APIs. React.renderComponentToString(<component>, callback) allows you to use React on the server and generate markup which can be sent down to the browser.
      • -
    • prop improvements: validation and default values. Read our blog post for details...
      • -
    • Support for the key prop, which allows for finer control over reconciliation. Read the docs for details...
      • -
    • Removed React.autoBind. Read our blog post for details...
      • -
    • Improvements to forms. We've written wrappers around <input>, <textarea>, <option>, and <select> in order to standardize many inconsistencies in browser implementations. This includes support for defaultValue, and improved implementation of the onChange event, and circuit completion. Read the docs for details...
      • -
    • We've implemented an improved synthetic event system that conforms to the W3C spec.
      • -
    • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
      • -
    - -

    JSX

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

    react-tools

    - -
      -
    • Fixed a number of bugs when transforming directories
      • -
    • No longer re-write require()s to be relative unless specified
      • -
    - -
    - - -
    diff --git a/blog/page22/index.html b/blog/page22/index.html index 1c7d9f283e..aa586fb04f 100644 --- a/blog/page22/index.html +++ b/blog/page22/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,74 @@
    +

    + + React v0.4.0 + +

    + +

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

    + +
    + +
    +

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

    + +

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

    + +

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

    + +

    When you're ready, go download it!

    + +

    React

    + +
      +
    • Switch from using id attribute to data-reactid to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
      • +
    • Support for more DOM elements and attributes (e.g., <canvas>)
      • +
    • Improved server-side rendering APIs. React.renderComponentToString(<component>, callback) allows you to use React on the server and generate markup which can be sent down to the browser.
      • +
    • prop improvements: validation and default values. Read our blog post for details...
      • +
    • Support for the key prop, which allows for finer control over reconciliation. Read the docs for details...
      • +
    • Removed React.autoBind. Read our blog post for details...
      • +
    • Improvements to forms. We've written wrappers around <input>, <textarea>, <option>, and <select> in order to standardize many inconsistencies in browser implementations. This includes support for defaultValue, and improved implementation of the onChange event, and circuit completion. Read the docs for details...
      • +
    • We've implemented an improved synthetic event system that conforms to the W3C spec.
      • +
    • Updates to your component are batched now, which may result in a significantly faster re-render of components. this.setState now takes an optional callback as its second parameter. If you were using onClick={this.setState.bind(this, state)} previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
      • +
    + +

    JSX

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

    react-tools

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

    New in React v0.4: Prop Validation and Default Values @@ -456,57 +524,6 @@ -

    - -
    - - -

    - - React v0.3.3 - -

    - -

    - June 21, 2013 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

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

    - -

    react-tools

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

    React

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

    JSXTransformer

    - -
      -
    • Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
      • -
    - -
    - - -
    diff --git a/blog/page23/index.html b/blog/page23/index.html index 45333923ba..bd0b4e03e1 100644 --- a/blog/page23/index.html +++ b/blog/page23/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,57 @@
    +

    + + React v0.3.3 + +

    + +

    + June 21, 2013 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

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

    + +

    react-tools

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

    React

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

    JSXTransformer

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

    Community Round-up #2 diff --git a/blog/page3/index.html b/blog/page3/index.html index a6a64808ff..9811d65df6 100644 --- a/blog/page3/index.html +++ b/blog/page3/index.html @@ -63,7 +63,7 @@

    @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,599 @@
    +

    + + Mixins Considered Harmful + +

    + +

    + July 13, 2016 + by + + + Dan Abramov + + + +

    + +
    + +
    +

    “How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.

    + +

    It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.

    + +

    To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.

    + +

    Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.

    + +

    In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.

    + +

    Why Mixins are Broken

    + +

    At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.

    + +

    However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the same conclusions after writing my fair share of terrible mixins.

    + +

    This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.

    + +

    Mixins introduce implicit dependencies

    + +

    Sometimes a component relies on a certain method defined in the mixin, such as getClassName(). Sometimes it’s the other way around, and mixin calls a method like renderHeader() on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.

    + +

    Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?

    + +

    These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s render() method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.

    + +

    Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.

    + +

    Mixins cause name clashes

    + +

    There is no guarantee that two particular mixins can be used together. For example, if FluxListenerMixin defines handleChange() and WindowSizeMixin defines handleChange(), you can’t use them together. You also can’t define a method with this name on your own component.

    + +

    It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.

    + +

    If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.

    + +

    The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.

    + +

    Mixins cause snowballing complexity

    + +

    Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.

    + +

    A component needs some state to track mouse hover. To keep this logic reusable, you might extract handleMouseEnter(), handleMouseLeave() and isHovering() into a HoverMixin. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in HoverMixin so they create a TooltipMixin that uses HoverMixin. TooltipMixin reads isHovering() provided by HoverMixin in its componentDidUpdate() and either shows or hides the tooltip.

    + +

    A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called getTooltipOptions() to TooltipMixin. By this time, components that show popovers also use HoverMixin. However popovers need a different hover delay. To solve this, somebody adds support for an optional getHoverOptions() method and implements it in TooltipMixin. Those mixins are now tightly coupled.

    + +

    This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling TooltipMixin from HoverMixin. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.

    + +

    Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.

    + +

    These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.

    + +

    Migrating from Mixins

    + +

    Let’s make it clear that mixins are not technically deprecated. If you use React.createClass(), you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.

    + +

    Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.

    + +

    We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!

    + +

    Performance Optimizations

    + +

    One of the most commonly used mixins is PureRenderMixin. You might be using it in some components to prevent unnecessary re-renders when the props and state are shallowly equal to the previous props and state:

    +
    var PureRenderMixin = require('react-addons-pure-render-mixin');
+
+var Button = React.createClass({
+  mixins: [PureRenderMixin],
+
+  // ...
+
+});
+
    +

    Solution

    + +

    To express the same without mixins, you can use the shallowCompare function directly instead:

    +
    var shallowCompare = require('react-addons-shallow-compare');
+
+var Button = React.createClass({
+  shouldComponentUpdate: function(nextProps, nextState) {
+    return shallowCompare(this, nextProps, nextState);
+  },
+
+  // ...
+
+});
+
    +

    If you use a custom mixin implementing a shouldComponentUpdate function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.

    + +

    We understand that more typing can be annoying. For the most common case, we plan to introduce a new base class called React.PureComponent in the next minor release. It uses the same shallow comparison as PureRenderMixin does today.

    + +

    Subscriptions and Side Effects

    + +

    The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in componentDidMount, destroyed in componentWillUnmount, and the change handler calls this.setState().

    +
    var SubscriptionMixin = {
+  getInitialState: function() {
+    return {
+      comments: DataSource.getComments()
+    };
+  },
+
+  componentDidMount: function() {
+    DataSource.addChangeListener(this.handleChange);
+  },
+
+  componentWillUnmount: function() {
+    DataSource.removeChangeListener(this.handleChange);
+  },
+
+  handleChange: function() {
+    this.setState({
+      comments: DataSource.getComments()
+    });
+  }
+};
+
+var CommentList = React.createClass({
+  mixins: [SubscriptionMixin],
+
+  render: function() {
+    // Reading comments from state managed by mixin.
+    var comments = this.state.comments;
+    return (
+      <div>
+        {comments.map(function(comment) {
+          return <Comment comment={comment} key={comment.id} />
+        })}
+      </div>
+    )
+  }
+});
+
+module.exports = CommentList;
+
    +

    Solution

    + +

    If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.

    + +

    If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called “higher-order components”. It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.

    + +

    Higher-Order Components Explained

    + +

    Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:

    +
    function addAndLog(x, y) {
+  var result = x + y;
+  console.log('result:', result);
+  return result;
+}
+
+function multiplyAndLog(x, y) {
+  var result = x * y;
+  console.log('result:', result);
+  return result;
+}
+
    +

    These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.

    + +

    Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a higher-order function, that is, a function that takes a function as an argument and returns a function.

    + +

    Again, it sounds more intimidating than it really is:

    +
    function withLogging(wrappedFunction) {
+  // Return a function with the same API...
+  return function(x, y) {
+    // ... that calls the original function
+    var result = wrappedFunction(x, y);
+    // ... but also logs its result!
+    console.log('result:', result);
+    return result;
+  };
+}
+
    +

    The withLogging higher-order function lets us write add and multiply without the logging statements, and later wrap them to get addAndLog and multiplyAndLog with exactly the same signatures as before:

    +
    function add(x, y) {
+  return x + y;
+}
+
+function multiply(x, y) {
+  return x * y;
+}
+
+function withLogging(wrappedFunction) {
+  return function(x, y) {
+    var result = wrappedFunction(x, y);
+    console.log('result:', result);
+    return result;
+  };
+}
+
+// Equivalent to writing addAndLog by hand:
+var addAndLog = withLogging(add);
+
+// Equivalent to writing multiplyAndLog by hand:
+var multiplyAndLog = withLogging(multiply);
+
    +

    Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.

    + +

    As a first step, we will split our CommentList component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.

    +
    // This is a child component.
+// It only renders the comments it receives as props.
+var CommentList = React.createClass({
+  render: function() {
+    // Note: now reading from props rather than state.
+    var comments = this.props.comments;
+    return (
+      <div>
+        {comments.map(function(comment) {
+          return <Comment comment={comment} key={comment.id} />
+        })}
+      </div>
+    )
+  }
+});
+
+// This is a parent component.
+// It subscribes to the data source and renders <CommentList />.
+var CommentListWithSubscription = React.createClass({
+  getInitialState: function() {
+    return {
+      comments: DataSource.getComments()
+    };
+  },
+
+  componentDidMount: function() {
+    DataSource.addChangeListener(this.handleChange);
+  },
+
+  componentWillUnmount: function() {
+    DataSource.removeChangeListener(this.handleChange);
+  },
+
+  handleChange: function() {
+    this.setState({
+      comments: DataSource.getComments()
+    });
+  },
+
+  render: function() {
+    // We pass the current state as props to CommentList.
+    return <CommentList comments={this.state.comments} />;
+  }
+});
+
+module.exports = CommentListWithSubscription;
+
    +

    There is just one final step left to do.

    + +

    Remember how we made withLogging() take a function and return another function wrapping it? We can apply a similar pattern to React components.

    + +

    We will write a new function called withSubscription(WrappedComponent). Its argument could be any React component. We will pass CommentList as WrappedComponent, but we could also apply withSubscription() to any other component in our codebase.

    + +

    This function would return another component. The returned component would manage the subscription and render <WrappedComponent /> with the current data.

    + +

    We call this pattern a “higher-order component”.

    + +

    The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with createClass(), as an ES6 class or a function. If WrappedComponent is a React component, the component created by withSubscription() can render it.

    +
    // This function takes a component...
+function withSubscription(WrappedComponent) {
+  // ...and returns another component...
+  return React.createClass({
+    getInitialState: function() {
+      return {
+        comments: DataSource.getComments()
+      };
+    },
+
+    componentDidMount: function() {
+      // ... that takes care of the subscription...
+      DataSource.addChangeListener(this.handleChange);
+    },
+
+    componentWillUnmount: function() {
+      DataSource.removeChangeListener(this.handleChange);
+    },
+
+    handleChange: function() {
+      this.setState({
+        comments: DataSource.getComments()
+      });
+    },
+
+    render: function() {
+      // ... and renders the wrapped component with the fresh data!
+      return <WrappedComponent comments={this.state.comments} />;
+    }
+  });
+}
+
    +

    Now we can declare CommentListWithSubscription by applying withSubscription to CommentList:

    +
    var CommentList = React.createClass({
+  render: function() {
+    var comments = this.props.comments;
+    return (
+      <div>
+        {comments.map(function(comment) {
+          return <Comment comment={comment} key={comment.id} />
+        })}
+      </div>
+    )
+  }
+});
+
+// withSubscription() returns a new component that
+// is subscribed to the data source and renders
+// <CommentList /> with up-to-date data.
+var CommentListWithSubscription = withSubscription(CommentList);
+
+// The rest of the app is interested in the subscribed component
+// so we export it instead of the original unwrapped CommentList.
+module.exports = CommentListWithSubscription;
+
    +

    Solution, Revisited

    + +

    Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:

    +
    function withSubscription(WrappedComponent) {
+  return React.createClass({
+    getInitialState: function() {
+      return {
+        comments: DataSource.getComments()
+      };
+    },
+
+    componentDidMount: function() {
+      DataSource.addChangeListener(this.handleChange);
+    },
+
+    componentWillUnmount: function() {
+      DataSource.removeChangeListener(this.handleChange);
+    },
+
+    handleChange: function() {
+      this.setState({
+        comments: DataSource.getComments()
+      });
+    },
+
+    render: function() {
+      // Use JSX spread syntax to pass all props and state down automatically.
+      return <WrappedComponent {...this.props} {...this.state} />;
+    }
+  });
+}
+
+// Optional change: convert CommentList to a functional component
+// because it doesn't use lifecycle hooks or state.
+function CommentList(props) {
+  var comments = props.comments;
+  return (
+    <div>
+      {comments.map(function(comment) {
+        return <Comment comment={comment} key={comment.id} />
+      })}
+    </div>
+  )
+}
+
+// Instead of declaring CommentListWithSubscription,
+// we export the wrapped component right away.
+module.exports = withSubscription(CommentList);
+
    +

    Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.

    + +

    Like any solution, higher-order components have their own pitfalls. For example, if you heavily use refs, you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding ref forwarding to React to solve this annoyance.

    + +

    Rendering Logic

    + +

    The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.

    + +

    Here is a typical example of this pattern:

    +
    var RowMixin = {
+  // Called by components from render()
+  renderHeader: function() {
+    return (
+      <div className='row-header'>
+        <h1>
+          {this.getHeaderText() /* Defined by components */}
+        </h1>
+      </div>
+    );
+  }
+};
+
+var UserRow = React.createClass({
+  mixins: [RowMixin],
+
+  // Called by RowMixin.renderHeader()
+  getHeaderText: function() {
+    return this.props.user.fullName;
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.renderHeader() /* Defined by RowMixin */}
+        <h2>{this.props.user.biography}</h2>
+      </div>
+    )
+  }
+});
+
    +

    Multiple components may be sharing RowMixin to render the header, and each of them would need to define getHeaderText().

    + +

    Solution

    + +

    If you see rendering logic inside a mixin, it’s time to extract a component!

    + +

    Instead of RowMixin, we will define a <RowHeader> component. We will also replace the convention of defining a getHeaderText() method with the standard mechanism of top-data flow in React: passing props.

    + +

    Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:

    +
    function RowHeader(props) {
+  return (
+    <div className='row-header'>
+      <h1>{props.text}</h1>
+    </div>
+  );
+}
+
+function UserRow(props) {
+  return (
+    <div>
+      <RowHeader text={props.user.fullName} />
+      <h2>{props.user.biography}</h2>
+    </div>
+  );
+}
+
    +

    Props keep component dependencies explicit, easy to replace, and enforceable with tools like Flow and TypeScript.

    + +
    +

    Note:

    + +

    Defining components as functions is not required. There is also nothing wrong with using lifecycle hooks and state—they are first-class React features. We use functional components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.

    +
    + +

    Context

    + +

    Another group of mixins we discovered were helpers for providing and consuming React context. Context is an experimental unstable feature, has certain issues, and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.

    + +

    Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:

    +
    var RouterMixin = {
+  contextTypes: {
+    router: React.PropTypes.object.isRequired
+  },
+
+  // The mixin provides a method so that components
+  // don't have to use the context API directly.
+  push: function(path) {
+    this.context.router.push(path)
+  }
+};
+
+var Link = React.createClass({
+  mixins: [RouterMixin],
+
+  handleClick: function(e) {
+    e.stopPropagation();
+
+    // This method is defined in RouterMixin.
+    this.push(this.props.to);
+  },
+
+  render: function() {
+    return (
+      <a onClick={this.handleClick}>
+        {this.props.children}
+      </a>
+    );
+  }
+});
+
+module.exports = Link;
+
    +

    Solution

    + +

    We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.

    + +

    Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:

    +
    function withRouter(WrappedComponent) {
+  return React.createClass({
+    contextTypes: {
+      router: React.PropTypes.object.isRequired
+    },
+
+    render: function() {
+      // The wrapper component reads something from the context
+      // and passes it down as a prop to the wrapped component.
+      var router = this.context.router;
+      return <WrappedComponent {...this.props} router={router} />;
+    }
+  });
+};
+
+var Link = React.createClass({
+  handleClick: function(e) {
+    e.stopPropagation();
+
+    // The wrapped component uses props instead of context.
+    this.props.router.push(this.props.to);
+  },
+
+  render: function() {
+    return (
+      <a onClick={this.handleClick}>
+        {this.props.children}
+      </a>
+    );
+  }
+});
+
+// Don't forget to wrap the component!
+module.exports = withRouter(Link);
+
    +

    If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.

    + +

    Utility Methods

    + +

    Sometimes, mixins are used solely to share utility functions between components:

    +
    var ColorMixin = {
+  getLuminance(color) {
+    var c = parseInt(color, 16);
+    var r = (c & 0xFF0000) >> 16;
+    var g = (c & 0x00FF00) >> 8;
+    var b = (c & 0x0000FF);
+    return (0.299 * r + 0.587 * g + 0.114 * b);
+  }
+};
+
+var Button = React.createClass({
+  mixins: [ColorMixin],
+
+  render: function() {
+    var theme = this.getLuminance(this.props.color) > 160 ? 'dark' : 'light';
+    return (
+      <div className={theme}>
+        {this.props.children}
+      </div>
+    )
+  }
+});
+
    +

    Solution

    + +

    Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:

    +
    var getLuminance = require('../utils/getLuminance');
+
+var Button = React.createClass({
+  render: function() {
+    var theme = getLuminance(this.props.color) > 160 ? 'dark' : 'light';
+    return (
+      <div className={theme}>
+        {this.props.children}
+      </div>
+    )
+  }
+});
+
    +

    Other Use Cases

    + +

    Sometimes people use mixins to selectively add logging to lifecycle hooks in some components. In the future, we intend to provide an official DevTools API that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.

    + +

    If you can’t accomplish something with a component, a higher-order component, or a utility module, it could be mean that React should provide this out of the box. File an issue to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.

    + +

    Mixins are not deprecated in the traditional sense. You can keep using them with React.createClass(), as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split React.createClass() into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.

    + +

    We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.

    + +
    + + + +
    + +
    + +

    Introducing React's Error Code System @@ -530,67 +1123,6 @@ Minified build for production: - - -

    - - React v15.0 Release Candidate 2 - -

    - -

    - March 16, 2016 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

    Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.

    - -

    The most pressing change that was made is to fix a bug in our new code that removes <span>s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for DocumentFragments, resulting in text not appearing at all. Thanks to the several people who reported this.

    - -

    The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to some confusion with class vs className and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we might change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely let us know if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.

    - -

    Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!

    - -

    Installation

    - -

    We recommend using React from npm and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:

    - -
      -
    • npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2
      • -
    - -

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the NODE_ENV environment variable to production to use the production build of React which does not include the development warnings and runs significantly faster.

    - -

    If you can’t use npm yet, we provide pre-built browser builds for your convenience, which are also available in the react package on bower.

    - - - -
    - - -

    diff --git a/blog/page4/index.html b/blog/page4/index.html index 60a72ab663..e6db8e6a74 100644 --- a/blog/page4/index.html +++ b/blog/page4/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,67 @@
    +

    + + React v15.0 Release Candidate 2 + +

    + +

    + March 16, 2016 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

    Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.

    + +

    The most pressing change that was made is to fix a bug in our new code that removes <span>s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for DocumentFragments, resulting in text not appearing at all. Thanks to the several people who reported this.

    + +

    The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to some confusion with class vs className and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we might change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely let us know if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.

    + +

    Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!

    + +

    Installation

    + +

    We recommend using React from npm and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:

    + +
      +
    • npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2
      • +
    + +

    Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the NODE_ENV environment variable to production to use the production build of React which does not include the development warnings and runs significantly faster.

    + +

    If you can’t use npm yet, we provide pre-built browser builds for your convenience, which are also available in the react package on bower.

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

    React v15.0 Release Candidate @@ -428,79 +489,6 @@ Minified build for production: - - -

    - - React v0.14.4 - -

    - -

    - December 29, 2015 - by - - - Ben Alpert - - - -

    - -
    - -
    -

    Happy December! We have a minor point release today. It has just a few small bug fixes.

    - -

    The release is now available for download:

    - - - -

    We've also published version 0.14.4 of the react, react-dom, and addons packages on npm and the react package on bower.

    - -
    - -

    Changelog

    - -

    React

    - -
      -
    • Minor internal changes for better compatibility with React Native
      • -
    - -

    React DOM

    - -
      -
    • The autoCapitalize and autoCorrect props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
      • -
    • Fixed bug with controlled <select> elements not handling updates properly
      • -
    - -

    React Perf Add-on

    - -
      -
    • Some DOM operation names have been updated for clarity in the output of .printDOM()
      • -
    - -
    - - -

    diff --git a/blog/page5/index.html b/blog/page5/index.html index 2691836987..b76706629e 100644 --- a/blog/page5/index.html +++ b/blog/page5/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,79 @@
    +

    + + React v0.14.4 + +

    + +

    + December 29, 2015 + by + + + Ben Alpert + + + +

    + +
    + +
    +

    Happy December! We have a minor point release today. It has just a few small bug fixes.

    + +

    The release is now available for download:

    + + + +

    We've also published version 0.14.4 of the react, react-dom, and addons packages on npm and the react package on bower.

    + +
    + +

    Changelog

    + +

    React

    + +
      +
    • Minor internal changes for better compatibility with React Native
      • +
    + +

    React DOM

    + +
      +
    • The autoCapitalize and autoCorrect props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
      • +
    • Fixed bug with controlled <select> elements not handling updates properly
      • +
    + +

    React Perf Add-on

    + +
      +
    • Some DOM operation names have been updated for clarity in the output of .printDOM()
      • +
    + +
    + + + +
    + +
    + +

    React Components, Elements, and Instances @@ -729,67 +802,6 @@ Minified build for production: - - -

    - - React v0.14.2 - -

    - -

    - November 2, 2015 - by - - - Paul O’Shannessy - - - -

    - -
    - -
    -

    We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the react-dom package, we moved react from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using react as a peer dependency.

    - -

    The release is now available for download:

    - - - -

    We've also published version 0.14.2 of the react, react-dom, and addons packages on npm and the react package on bower.

    - -
    - -

    Changelog

    - -

    React DOM

    - -
      -
    • Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
      • -
    • Fixed bug with development build when using es5-sham in older versions of Internet Explorer
      • -
    • Added support for integrity attribute
      • -
    • Fixed bug resulting in children prop being coerced to a string for custom elements, which was not the desired behavior.
      • -
    • Moved react from dependencies to peerDependencies to match expectations and align with react-addons-* packages
      • -
    - -
    - - -

    diff --git a/blog/page6/index.html b/blog/page6/index.html index be3b7d81ab..19e5f7638a 100644 --- a/blog/page6/index.html +++ b/blog/page6/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,67 @@
    +

    + + React v0.14.2 + +

    + +

    + November 2, 2015 + by + + + Paul O’Shannessy + + + +

    + +
    + +
    +

    We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the react-dom package, we moved react from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using react as a peer dependency.

    + +

    The release is now available for download:

    + + + +

    We've also published version 0.14.2 of the react, react-dom, and addons packages on npm and the react package on bower.

    + +
    + +

    Changelog

    + +

    React DOM

    + +
      +
    • Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
      • +
    • Fixed bug with development build when using es5-sham in older versions of Internet Explorer
      • +
    • Added support for integrity attribute
      • +
    • Fixed bug resulting in children prop being coerced to a string for custom elements, which was not the desired behavior.
      • +
    • Moved react from dependencies to peerDependencies to match expectations and align with react-addons-* packages
      • +
    + +
    + + + +
    + +
    + +

    React v0.14.1 @@ -671,114 +732,6 @@ Minified build for production: h -

    - -
    - - -

    - - Community Round-up #27 – Relay Edition - -

    - -

    - September 14, 2015 - by - - - Steven Luscher - - - -

    - -
    - -
    -

    In the weeks following the open-source release of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!

    - -

    Teaching servers to speak GraphQL

    - -

    Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.

    - -

    Bryan Goldstein (brysgo) has built a tool to help you define a GraphQL schema that wraps a set of Bookshelf.JS models. Check out graphql-bookshelf.

    - -

    RisingStack (risingstack) created a GraphQL ORM called graffiti that you can plug into mongoose and serve using Express, Hapi, or Koa.

    - -

    David Mongeau-Petitpas (dmongeau) is working on a way to vend your Laravel models through a GraphQL endpoint, laravel-graphql.

    - -

    Gerald Monaco (devknoll) created graphql-schema to allow the creation of JavaScript GraphQL schemas using a fluent/chainable interface.

    - -

    Jason Dusek (solidsnack) dove deep into PostgreSQL to teach it how to respond to GraphQL query strings as though they were SQL queries. Check out GraphpostgresQL.

    - -

    Espen Hovlandsdal (rexxars) built a sql-to-graphql tool that can perform introspection on the tables of a MySQL or PostgreSQL database, and produce a queryable HTTP GraphQL endpoint out of it.

    - -

    Mick Hansen (mickhansen) offers a set of schema-building helpers for use with the Sequelize ORM for MySQL, PostgreSQL, SQLite, and MSSQL.

    - -

    GraphQL beyond JavaScript

    - -

    Robert Mosolgo (rmosolgo) brought the full set of schema-building and query execution tools to Ruby, in the form of graphql-ruby and graphql-relay-ruby. Check out his Rails-based demo.

    - -

    Andreas Marek (andimarek) has brewed up a Java implementation of GraphQL, graphql-java.

    - -

    vladar is hard at work on a PHP port of the GraphQL reference implementation, graphql-php.

    - -

    Taeho Kim (dittos) is bringing GraphQL to Python, with graphql-py.

    - -

    Oleg Ilyenko (OlegIlyenko) made a beautiful and delicious-looking website for a Scala implementation of GraphQL, sangria.

    - -

    Joe McBride (joemcbride) has an up-and-running example of GraphQL for .NET, graphql-dotnet.

    - -

    Show me, don't tell me

    - -

    Interact with this visual tour of Relay's architecture by Sam Gwilym (sgwilym).

    - -

    - Relay for visual learners -

    - -

    Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations – all atop a Ruby GraphQL server: new.comique.co

    - -

    Prototyping in the browser

    - -

    I (steveluscher) whipped up a prototyping tool that you can use to hack on a schema and a React/Relay app, from the comfort of your browser. Thanks to Jimmy Jia (taion) for supplying the local-only network layer, relay-local-schema.

    - -

    Skeletons in the closet

    - -

    Joseph Rollins (fortruce) created a hot-reloading, auto schema-regenerating, Relay skeleton that you can use to get up and running quickly.

    - -

    Michael Hart (mhart) built a simple-relay-starter kit using Browserify.

    - -

    Routing around

    - -

    Jimmy Jia (taion) and Gerald Monaco (devknoll) have been helping lost URLs find their way to Relay apps through their work on react-router-relay. Check out Christoph Pojer's (cpojer) blog post on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at taion/relay-todomvc.

    - -

    Chen Hung-Tu (transedward) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at transedward/relay-chat.

    - -

    In your words

    - -
    -
    - - - - - -
    -
    - - - - - -
    -
    - -
    - - -
    diff --git a/blog/page7/index.html b/blog/page7/index.html index 1e58d04dd7..e6393c6f5f 100644 --- a/blog/page7/index.html +++ b/blog/page7/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,114 @@
    +

    + + Community Round-up #27 – Relay Edition + +

    + +

    + September 14, 2015 + by + + + Steven Luscher + + + +

    + +
    + +
    +

    In the weeks following the open-source release of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!

    + +

    Teaching servers to speak GraphQL

    + +

    Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.

    + +

    Bryan Goldstein (brysgo) has built a tool to help you define a GraphQL schema that wraps a set of Bookshelf.JS models. Check out graphql-bookshelf.

    + +

    RisingStack (risingstack) created a GraphQL ORM called graffiti that you can plug into mongoose and serve using Express, Hapi, or Koa.

    + +

    David Mongeau-Petitpas (dmongeau) is working on a way to vend your Laravel models through a GraphQL endpoint, laravel-graphql.

    + +

    Gerald Monaco (devknoll) created graphql-schema to allow the creation of JavaScript GraphQL schemas using a fluent/chainable interface.

    + +

    Jason Dusek (solidsnack) dove deep into PostgreSQL to teach it how to respond to GraphQL query strings as though they were SQL queries. Check out GraphpostgresQL.

    + +

    Espen Hovlandsdal (rexxars) built a sql-to-graphql tool that can perform introspection on the tables of a MySQL or PostgreSQL database, and produce a queryable HTTP GraphQL endpoint out of it.

    + +

    Mick Hansen (mickhansen) offers a set of schema-building helpers for use with the Sequelize ORM for MySQL, PostgreSQL, SQLite, and MSSQL.

    + +

    GraphQL beyond JavaScript

    + +

    Robert Mosolgo (rmosolgo) brought the full set of schema-building and query execution tools to Ruby, in the form of graphql-ruby and graphql-relay-ruby. Check out his Rails-based demo.

    + +

    Andreas Marek (andimarek) has brewed up a Java implementation of GraphQL, graphql-java.

    + +

    vladar is hard at work on a PHP port of the GraphQL reference implementation, graphql-php.

    + +

    Taeho Kim (dittos) is bringing GraphQL to Python, with graphql-py.

    + +

    Oleg Ilyenko (OlegIlyenko) made a beautiful and delicious-looking website for a Scala implementation of GraphQL, sangria.

    + +

    Joe McBride (joemcbride) has an up-and-running example of GraphQL for .NET, graphql-dotnet.

    + +

    Show me, don't tell me

    + +

    Interact with this visual tour of Relay's architecture by Sam Gwilym (sgwilym).

    + +

    + Relay for visual learners +

    + +

    Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations – all atop a Ruby GraphQL server: new.comique.co

    + +

    Prototyping in the browser

    + +

    I (steveluscher) whipped up a prototyping tool that you can use to hack on a schema and a React/Relay app, from the comfort of your browser. Thanks to Jimmy Jia (taion) for supplying the local-only network layer, relay-local-schema.

    + +

    Skeletons in the closet

    + +

    Joseph Rollins (fortruce) created a hot-reloading, auto schema-regenerating, Relay skeleton that you can use to get up and running quickly.

    + +

    Michael Hart (mhart) built a simple-relay-starter kit using Browserify.

    + +

    Routing around

    + +

    Jimmy Jia (taion) and Gerald Monaco (devknoll) have been helping lost URLs find their way to Relay apps through their work on react-router-relay. Check out Christoph Pojer's (cpojer) blog post on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at taion/relay-todomvc.

    + +

    Chen Hung-Tu (transedward) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at transedward/relay-chat.

    + +

    In your words

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

    React v0.14 Release Candidate @@ -511,131 +619,6 @@ Minified build for production: - - -

    - - New React Devtools Beta - -

    - -

    - August 3, 2015 - by - - - Jared Forsyth - - - -

    - -
    - -
    -

    We've made an entirely new version of the devtools, and we want you to try it -out!

    - -

    The full devtools gif

    - -

    Why entirely new?

    - -

    Perhaps the biggest reason was to create a defined API for dealing with -internals, so that other tools could benefit as well and not have to depend on -implementation details. This gives us more freedom to refactor things -internally without worrying about breaking tooling.

    - -

    The current version of the devtools is a fork of Blink's "Elements" pane, and -is imperative, mutation-driven, and tightly integrated with Chrome-specific -APIs. The new devtools are much less coupled to Chrome, and easier to reason -about thanks to React.

    - -

    What are the benefits?

    - -
      -
    • 100% React
      • -
    • Firefox compatible
      • -
    • React Native compatible
      • -
    • more extensible & hackable
      • -
    - -

    Are there any new features?

    - -

    Yeah!

    - -

    The Tree View

    - -

    The new tree view of the devtools

    - -
      -
    • Much richer view of your props, including the contents of objects and arrays
      • -
    • Custom components are emphasized, native components are de-emphasized
      • -
    • Stateful components have a red collapser
      • -
    • Improved keyboard navigation (hjkl or arrow keys)
      • -
    • Selected component is available in the console as $r
      • -
    • Props that change highlight in green
      • -

    • Right-click menu

      - -
        -
      • Scroll node into view
        • -
      • Show the source for a component in the "Sources" pane
        • -
      • Show the element in the "Elements" pane
        • -
      • -
    - -

    Searching

    - -

    Select the search bar (or press "/"), and start searching for a component by -name.

    - -

    - -

    The Side Pane

    - -
      -
    • Now shows the context for a component
      • -
    • Right-click to store a prop/state value as a global variable
      • -
    - -

    - -

    How do I install it?

    - -

    First, disable the Chrome web store version, or it will break things. Then -download the .crx and -drag it into your chrome://extensions page. If it's not working to drag it -from the downloads bar, try opening your downloads folder and drag it from -there.

    - -

    Once we've determined that there aren't any major regressions, we'll update -the official web store version, and everyone will be automatically upgraded.

    - -

    Also Firefox!

    - -

    We also have an initial version of the devtools for Firefox, which you can -download from the same release page.

    - -

    Feedback welcome

    - -

    Let us know what issues you run into -on GitHub, and check out -the README -for more info.

    - -

    Update

    - -

    August 12, 2015

    - -

    A second beta is out, with a number of bugfixes. It is also listed on the -releases page.

    - -
    - - -

    diff --git a/blog/page8/index.html b/blog/page8/index.html index 0814c6c116..d9542c58f0 100644 --- a/blog/page8/index.html +++ b/blog/page8/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,131 @@
    +

    + + New React Devtools Beta + +

    + +

    + August 3, 2015 + by + + + Jared Forsyth + + + +

    + +
    + +
    +

    We've made an entirely new version of the devtools, and we want you to try it +out!

    + +

    The full devtools gif

    + +

    Why entirely new?

    + +

    Perhaps the biggest reason was to create a defined API for dealing with +internals, so that other tools could benefit as well and not have to depend on +implementation details. This gives us more freedom to refactor things +internally without worrying about breaking tooling.

    + +

    The current version of the devtools is a fork of Blink's "Elements" pane, and +is imperative, mutation-driven, and tightly integrated with Chrome-specific +APIs. The new devtools are much less coupled to Chrome, and easier to reason +about thanks to React.

    + +

    What are the benefits?

    + +
      +
    • 100% React
      • +
    • Firefox compatible
      • +
    • React Native compatible
      • +
    • more extensible & hackable
      • +
    + +

    Are there any new features?

    + +

    Yeah!

    + +

    The Tree View

    + +

    The new tree view of the devtools

    + +
      +
    • Much richer view of your props, including the contents of objects and arrays
      • +
    • Custom components are emphasized, native components are de-emphasized
      • +
    • Stateful components have a red collapser
      • +
    • Improved keyboard navigation (hjkl or arrow keys)
      • +
    • Selected component is available in the console as $r
      • +
    • Props that change highlight in green
      • +

    • Right-click menu

      + +
        +
      • Scroll node into view
        • +
      • Show the source for a component in the "Sources" pane
        • +
      • Show the element in the "Elements" pane
        • +
      • +
    + +

    Searching

    + +

    Select the search bar (or press "/"), and start searching for a component by +name.

    + +

    + +

    The Side Pane

    + +
      +
    • Now shows the context for a component
      • +
    • Right-click to store a prop/state value as a global variable
      • +
    + +

    + +

    How do I install it?

    + +

    First, disable the Chrome web store version, or it will break things. Then +download the .crx and +drag it into your chrome://extensions page. If it's not working to drag it +from the downloads bar, try opening your downloads folder and drag it from +there.

    + +

    Once we've determined that there aren't any major regressions, we'll update +the official web store version, and everyone will be automatically upgraded.

    + +

    Also Firefox!

    + +

    We also have an initial version of the devtools for Firefox, which you can +download from the same release page.

    + +

    Feedback welcome

    + +

    Let us know what issues you run into +on GitHub, and check out +the README +for more info.

    + +

    Update

    + +

    August 12, 2015

    + +

    A second beta is out, with a number of bugfixes. It is also listed on the +releases page.

    + +
    + + + +
    + +
    + +

    React v0.14 Beta 1 @@ -374,132 +499,6 @@ Minified build for production: - - -

    - - GraphQL Introduction - -

    - -

    - May 1, 2015 - by - - - Nick Schrock - - - -

    - -
    - -
    -

    At the React.js conference in late January 2015, we revealed our next major technology in the React family: Relay.

    - -

    Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a declarative data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.

    - -

    GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.

    - -

    We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.

    - -

    What is GraphQL?

    - -

    A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:

    -
    {
-  user(id: 3500401) {
-    id,
-    name,
-    isViewerFriend,
-    profilePicture(size: 50)  {
-      uri,
-      width,
-      height
-    }
-  }
-}
-
    -

    (Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)

    - -

    And here is the response to that query.

    -
    {
-  "user" : {
-    "id": 3500401,
-    "name": "Jing Chen",
-    "isViewerFriend": true,
-    "profilePicture": {
-      "uri": "http://someurl.cdn/pic.jpg",
-      "width": 50,
-      "height": 50
-    }
-  }
-}
-
    -

    We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:

    - -
      -
    • Hierarchical: Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
      • -
    • Product-centric: GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
      • -
    • Client-specified queries: In GraphQL, the specification for queries are encoded in the client rather than the server. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
      • -
    • Backwards Compatible: In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for at least two years. This means there are at a minimum 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
      • -
    • Structured, Arbitrary Code: Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by arbitrary code. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
      • -
    • Application-Layer Protocol: GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
      • -
    • Strongly-typed: GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
      • -
    • Introspective: GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
      • -
    - -

    Why invent something new?

    - -

    Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and ad hoc endpoints.

    - -

    REST

    - -

    REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that self-identify as REST, rather than systems which are formally REST.

    - -

    Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.

    - -

    We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:

    - -
      -
    • Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
      • -
    • Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
      • -
    • REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
      • -
    • Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” according to its inventor. This is not a requirement for APIs that serve a client app built within the same organization.
      • -
    - -

    Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all internal REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.

    - -

    Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building ad hoc endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to ad hoc endpoints.

    - -

    Ad Hoc Endpoints

    - -

    Many applications have no formalized client-server contract. Product developers access server capabilities through ad hoc endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.

    - -
      -
    • These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
      • -
    • Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
      • -
    • Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
      • -
    • Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of ad hoc endpoints remain.
      • -
    - -

    We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.

    - -

    This is a liberating platform for product developers. With GraphQL, no more contending with ad hoc endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from ad hoc endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.

    - -

    Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.

    - -

    What's next?

    - -

    Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.

    - -
    - - -

    diff --git a/blog/page9/index.html b/blog/page9/index.html index f520d46ac0..d21fcbf3f9 100644 --- a/blog/page9/index.html +++ b/blog/page9/index.html @@ -63,7 +63,7 @@ @@ -76,6 +76,8 @@

    Recent posts

    @@ -106,6 +106,132 @@
    +

    + + GraphQL Introduction + +

    + +

    + May 1, 2015 + by + + + Nick Schrock + + + +

    + +
    + +
    +

    At the React.js conference in late January 2015, we revealed our next major technology in the React family: Relay.

    + +

    Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a declarative data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.

    + +

    GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.

    + +

    We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.

    + +

    What is GraphQL?

    + +

    A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:

    +
    {
+  user(id: 3500401) {
+    id,
+    name,
+    isViewerFriend,
+    profilePicture(size: 50)  {
+      uri,
+      width,
+      height
+    }
+  }
+}
+
    +

    (Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)

    + +

    And here is the response to that query.

    +
    {
+  "user" : {
+    "id": 3500401,
+    "name": "Jing Chen",
+    "isViewerFriend": true,
+    "profilePicture": {
+      "uri": "http://someurl.cdn/pic.jpg",
+      "width": 50,
+      "height": 50
+    }
+  }
+}
+
    +

    We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:

    + +
      +
    • Hierarchical: Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
      • +
    • Product-centric: GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
      • +
    • Client-specified queries: In GraphQL, the specification for queries are encoded in the client rather than the server. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
      • +
    • Backwards Compatible: In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for at least two years. This means there are at a minimum 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
      • +
    • Structured, Arbitrary Code: Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by arbitrary code. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
      • +
    • Application-Layer Protocol: GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
      • +
    • Strongly-typed: GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
      • +
    • Introspective: GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
      • +
    + +

    Why invent something new?

    + +

    Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and ad hoc endpoints.

    + +

    REST

    + +

    REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that self-identify as REST, rather than systems which are formally REST.

    + +

    Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.

    + +

    We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:

    + +
      +
    • Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
      • +
    • Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
      • +
    • REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
      • +
    • Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” according to its inventor. This is not a requirement for APIs that serve a client app built within the same organization.
      • +
    + +

    Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all internal REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.

    + +

    Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building ad hoc endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to ad hoc endpoints.

    + +

    Ad Hoc Endpoints

    + +

    Many applications have no formalized client-server contract. Product developers access server capabilities through ad hoc endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.

    + +
      +
    • These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
      • +
    • Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
      • +
    • Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
      • +
    • Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of ad hoc endpoints remain.
      • +
    + +

    We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.

    + +

    This is a liberating platform for product developers. With GraphQL, no more contending with ad hoc endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from ad hoc endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.

    + +

    Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.

    + +

    What's next?

    + +

    Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.

    + +
    + + + +
    + +
    + +

    React v0.13.2 @@ -390,234 +516,6 @@ Minified build for production: - - -

    - - Building The Facebook News Feed With Relay - -

    - -

    - March 19, 2015 - by - - - Joseph Savona - - - -

    - -
    - -
    -

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

    - -

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

    - -


    - -

    The Relay Architecture

    - -

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

    - -

    Relay Architecture

    - -

    The main pieces are as follows:

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

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

    - -


    - -

    A Relay Application

    - -

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

    - -

    Sample News Feed

    - -


    - -

    The <Story> Begins

    - -

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

    -
    // Story.react.js
-export default class Story extends React.Component {
-  render() {
-    var story = this.props.story;
-    return (
-      <View>
-        <Image uri={story.author.profilePicture.uri} />
-        <Text>{story.author.name}</Text>
-        <Text>{story.text}</Text>
-      </View>
-    );
-  }
-}
-
    -


    - -

    What's the <Story>?

    - -

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

    -
    // Story.react.js
-class Story extends React.Component { ... }
-
-export default Relay.createContainer(Story, {
-  fragments: {
-    story: /* TODO */
-  }
-});
-
    -

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

    - -

    React Container Data Flow

    - -

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

    -
    // Story.react.js
-class Story extends React.Component { ... }
-
-export default Relay.createContainer(Story, {
-  fragments: {
-    story: () => Relay.QL`
-      fragment on Story {
-        author {
-          name
-          profilePicture {
-            uri
-          }
-        }
-        text
-      }
-    `,
-  },
-});
-
    -

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

    - -


    - -

    <Story>s on Demand

    - -

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

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

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

    - -

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

    - -

    Relay Container Data Flow

    - -


    - -

    <NewsFeed> Worthy

    - -

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

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


    - -

    All the News Fit to be Relayed

    - -

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

    - -

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

    -
    // NewsFeed.react.js
-class NewsFeed extends React.Component { ... }
-
-export default Relay.createContainer(NewsFeed, {
-  initialVariables: {
-    count: 3                                /* default to 3 stories */
-  },
-  fragments: {
-    viewer: () => Relay.QL`
-      fragment on Viewer {
-        stories(first: $count) {            /* fetch viewer's stories */
-          edges {                           /* traverse the graph */
-            node {
-              ${Story.getFragment('story')} /* compose child fragment */
-            }
-          }
-        }
-      }
-    `,
-  },
-});
-
    -

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

    - -

    Query variables are available to components as props.relay.variables and can be modified with props.relay.setVariables(nextVariables). We can use these to implement pagination:

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

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

    - -


    - -

    In Conclusion

    - -

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

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

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

    - -
    - - -

    diff --git a/community/conferences.html b/community/conferences.html index c6844fb94e..bf647f9b19 100644 --- a/community/conferences.html +++ b/community/conferences.html @@ -63,7 +63,7 @@ diff --git a/community/support.html b/community/support.html index 727523f1b0..5c802bceac 100644 --- a/community/support.html +++ b/community/support.html @@ -63,7 +63,7 @@ diff --git a/community/videos.html b/community/videos.html index b6c198041a..6ac6c7bd9b 100644 --- a/community/videos.html +++ b/community/videos.html @@ -63,7 +63,7 @@ diff --git a/contributing/codebase-overview.html b/contributing/codebase-overview.html index 93cff542ed..93df926a04 100644 --- a/contributing/codebase-overview.html +++ b/contributing/codebase-overview.html @@ -63,7 +63,7 @@ diff --git a/contributing/design-principles.html b/contributing/design-principles.html index b8f33b430e..98fabfb685 100644 --- a/contributing/design-principles.html +++ b/contributing/design-principles.html @@ -63,7 +63,7 @@ diff --git a/contributing/how-to-contribute.html b/contributing/how-to-contribute.html index b9c02f0af8..079088e150 100644 --- a/contributing/how-to-contribute.html +++ b/contributing/how-to-contribute.html @@ -63,7 +63,7 @@ @@ -231,7 +231,7 @@ You can check the status of your code styling by simply running npm run li

    License

    -

    By contributing to React, you agree that your contributions will be licensed under its BSD license.

    +

    By contributing to React, you agree that your contributions will be licensed under its MIT license.

    What Next?

    diff --git a/contributing/implementation-notes.html b/contributing/implementation-notes.html index 15f307d16a..9582e4cebe 100644 --- a/contributing/implementation-notes.html +++ b/contributing/implementation-notes.html @@ -63,7 +63,7 @@ diff --git a/docs/accessibility.html b/docs/accessibility.html index 665a325d94..4efc059b39 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -63,7 +63,7 @@ diff --git a/docs/addons.html b/docs/addons.html index 0887290c85..cbed88dc04 100644 --- a/docs/addons.html +++ b/docs/addons.html @@ -63,7 +63,7 @@ diff --git a/docs/animation.html b/docs/animation.html index b87ef1b377..f8843f48f2 100644 --- a/docs/animation.html +++ b/docs/animation.html @@ -63,7 +63,7 @@ diff --git a/docs/components-and-props.html b/docs/components-and-props.html index 9b52d7a165..bbf7f925e8 100644 --- a/docs/components-and-props.html +++ b/docs/components-and-props.html @@ -63,7 +63,7 @@ diff --git a/docs/composition-vs-inheritance.html b/docs/composition-vs-inheritance.html index 079a2b738f..d9764670d9 100644 --- a/docs/composition-vs-inheritance.html +++ b/docs/composition-vs-inheritance.html @@ -63,7 +63,7 @@ diff --git a/docs/conditional-rendering.html b/docs/conditional-rendering.html index 76c58dc9e7..6c3e7c06fe 100644 --- a/docs/conditional-rendering.html +++ b/docs/conditional-rendering.html @@ -63,7 +63,7 @@ diff --git a/docs/conferences-it-IT.html b/docs/conferences-it-IT.html index 4253aae7cc..7b2efc09fa 100644 --- a/docs/conferences-it-IT.html +++ b/docs/conferences-it-IT.html @@ -63,7 +63,7 @@ diff --git a/docs/conferences-ko-KR.html b/docs/conferences-ko-KR.html index 563cb7bb6a..2dfcbed29f 100644 --- a/docs/conferences-ko-KR.html +++ b/docs/conferences-ko-KR.html @@ -63,7 +63,7 @@ diff --git a/docs/conferences-zh-CN.html b/docs/conferences-zh-CN.html index 2da75089ac..21e133e17b 100644 --- a/docs/conferences-zh-CN.html +++ b/docs/conferences-zh-CN.html @@ -63,7 +63,7 @@ diff --git a/docs/context.html b/docs/context.html index 3225073189..8bbf8c6bb4 100644 --- a/docs/context.html +++ b/docs/context.html @@ -63,7 +63,7 @@ diff --git a/docs/create-fragment.html b/docs/create-fragment.html index eaa99d3ff3..a2644572f8 100644 --- a/docs/create-fragment.html +++ b/docs/create-fragment.html @@ -63,7 +63,7 @@ diff --git a/docs/cross-origin-errors.html b/docs/cross-origin-errors.html index d382c6b8a7..66725efd19 100644 --- a/docs/cross-origin-errors.html +++ b/docs/cross-origin-errors.html @@ -63,7 +63,7 @@ diff --git a/docs/dom-elements.html b/docs/dom-elements.html index bb9b82b4a3..7dc88c7917 100644 --- a/docs/dom-elements.html +++ b/docs/dom-elements.html @@ -63,7 +63,7 @@ @@ -157,8 +157,8 @@ 
    accept acceptCharset accessKey action allowFullScreen allowTransparency alt
 async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
 charSet checked cite classID className colSpan cols content contentEditable
-contextMenu controls coords crossOrigin data dateTime default defer dir
-disabled download draggable encType form formAction formEncType formMethod
+contextMenu controls controlsList coords crossOrigin data dateTime default defer
+dir disabled download draggable encType form formAction formEncType formMethod
 formNoValidate formTarget frameBorder headers height hidden high href hrefLang
 htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
 lang list loop low manifest marginHeight marginWidth max maxLength media
diff --git a/docs/error-decoder.html b/docs/error-decoder.html
index 512897a24b..c3269d22f4 100644
--- a/docs/error-decoder.html
+++ b/docs/error-decoder.html
@@ -63,7 +63,7 @@
    diff --git a/docs/events.html b/docs/events.html index 70d74fce72..f08e7fdce3 100644 --- a/docs/events.html +++ b/docs/events.html @@ -63,7 +63,7 @@ diff --git a/docs/forms.html b/docs/forms.html index d9acb4c408..f157289d59 100644 --- a/docs/forms.html +++ b/docs/forms.html @@ -63,7 +63,7 @@ diff --git a/docs/handling-events.html b/docs/handling-events.html index 1a8b480d72..1f63578f0d 100644 --- a/docs/handling-events.html +++ b/docs/handling-events.html @@ -63,7 +63,7 @@ diff --git a/docs/hello-world.html b/docs/hello-world.html index 82cc89071a..bbe4f2108f 100644 --- a/docs/hello-world.html +++ b/docs/hello-world.html @@ -63,7 +63,7 @@ diff --git a/docs/higher-order-components.html b/docs/higher-order-components.html index 2bfe37217f..d31412215d 100644 --- a/docs/higher-order-components.html +++ b/docs/higher-order-components.html @@ -63,7 +63,7 @@ diff --git a/docs/installation.html b/docs/installation.html index 065f361980..dc1cd3a94e 100644 --- a/docs/installation.html +++ b/docs/installation.html @@ -63,7 +63,7 @@ diff --git a/docs/integrating-with-other-libraries.html b/docs/integrating-with-other-libraries.html index ba9f10f1b5..93aba486b2 100644 --- a/docs/integrating-with-other-libraries.html +++ b/docs/integrating-with-other-libraries.html @@ -63,7 +63,7 @@ diff --git a/docs/introducing-jsx.html b/docs/introducing-jsx.html index 6c19ef3ed5..816ed26f08 100644 --- a/docs/introducing-jsx.html +++ b/docs/introducing-jsx.html @@ -63,7 +63,7 @@ diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html index 74ac7182d7..be59d17366 100644 --- a/docs/jsx-in-depth.html +++ b/docs/jsx-in-depth.html @@ -63,7 +63,7 @@ diff --git a/docs/lifting-state-up.html b/docs/lifting-state-up.html index b2e303399c..116bcd9223 100644 --- a/docs/lifting-state-up.html +++ b/docs/lifting-state-up.html @@ -63,7 +63,7 @@ diff --git a/docs/lists-and-keys.html b/docs/lists-and-keys.html index 6d767b7aa1..51c574920d 100644 --- a/docs/lists-and-keys.html +++ b/docs/lists-and-keys.html @@ -63,7 +63,7 @@ diff --git a/docs/optimizing-performance.html b/docs/optimizing-performance.html index e88b59c9f1..569e8950ff 100644 --- a/docs/optimizing-performance.html +++ b/docs/optimizing-performance.html @@ -63,7 +63,7 @@ diff --git a/docs/perf.html b/docs/perf.html index 23bbe198d8..0ac58b1bb9 100644 --- a/docs/perf.html +++ b/docs/perf.html @@ -63,7 +63,7 @@ diff --git a/docs/pure-render-mixin.html b/docs/pure-render-mixin.html index 35b3566c93..04700ddfe5 100644 --- a/docs/pure-render-mixin.html +++ b/docs/pure-render-mixin.html @@ -63,7 +63,7 @@ diff --git a/docs/react-api.html b/docs/react-api.html index ccb3cb0b85..d6a58c5f1f 100644 --- a/docs/react-api.html +++ b/docs/react-api.html @@ -63,7 +63,7 @@ diff --git a/docs/react-component.html b/docs/react-component.html index 4996f8a4e7..c53c9cebc0 100644 --- a/docs/react-component.html +++ b/docs/react-component.html @@ -63,7 +63,7 @@ diff --git a/docs/react-dom-server.html b/docs/react-dom-server.html index ae9f30b8c4..9fc574c3b6 100644 --- a/docs/react-dom-server.html +++ b/docs/react-dom-server.html @@ -63,7 +63,7 @@ diff --git a/docs/react-dom.html b/docs/react-dom.html index 3e2d86c993..14b9f3d905 100644 --- a/docs/react-dom.html +++ b/docs/react-dom.html @@ -63,7 +63,7 @@ diff --git a/docs/react-without-es6.html b/docs/react-without-es6.html index 39a8a4b80c..bd7d0fdebd 100644 --- a/docs/react-without-es6.html +++ b/docs/react-without-es6.html @@ -63,7 +63,7 @@ diff --git a/docs/react-without-jsx.html b/docs/react-without-jsx.html index 055d15efcc..cfae5ca1ac 100644 --- a/docs/react-without-jsx.html +++ b/docs/react-without-jsx.html @@ -63,7 +63,7 @@ diff --git a/docs/reconciliation.html b/docs/reconciliation.html index b329042633..9291e5ec02 100644 --- a/docs/reconciliation.html +++ b/docs/reconciliation.html @@ -63,7 +63,7 @@ diff --git a/docs/refs-and-the-dom.html b/docs/refs-and-the-dom.html index 6e57133329..6de728142c 100644 --- a/docs/refs-and-the-dom.html +++ b/docs/refs-and-the-dom.html @@ -63,7 +63,7 @@ diff --git a/docs/rendering-elements.html b/docs/rendering-elements.html index 65e7c9b2ea..58d8559bd5 100644 --- a/docs/rendering-elements.html +++ b/docs/rendering-elements.html @@ -63,7 +63,7 @@ diff --git a/docs/shallow-compare.html b/docs/shallow-compare.html index c2930dd089..e86fdf9aec 100644 --- a/docs/shallow-compare.html +++ b/docs/shallow-compare.html @@ -63,7 +63,7 @@ diff --git a/docs/shallow-renderer.html b/docs/shallow-renderer.html index 0422506576..299a342c1c 100644 --- a/docs/shallow-renderer.html +++ b/docs/shallow-renderer.html @@ -63,7 +63,7 @@ diff --git a/docs/state-and-lifecycle.html b/docs/state-and-lifecycle.html index 6abd699c6c..4cfd237e57 100644 --- a/docs/state-and-lifecycle.html +++ b/docs/state-and-lifecycle.html @@ -63,7 +63,7 @@ diff --git a/docs/test-utils.html b/docs/test-utils.html index baff8dead0..0b59f474f8 100644 --- a/docs/test-utils.html +++ b/docs/test-utils.html @@ -63,7 +63,7 @@ diff --git a/docs/thinking-in-react.html b/docs/thinking-in-react.html index f86e8b52a5..5831cc30ff 100644 --- a/docs/thinking-in-react.html +++ b/docs/thinking-in-react.html @@ -63,7 +63,7 @@ diff --git a/docs/two-way-binding-helpers.html b/docs/two-way-binding-helpers.html index 294ae9786f..55c2287df2 100644 --- a/docs/two-way-binding-helpers.html +++ b/docs/two-way-binding-helpers.html @@ -63,7 +63,7 @@ diff --git a/docs/typechecking-with-proptypes.html b/docs/typechecking-with-proptypes.html index e9308f4dd1..1a34146260 100644 --- a/docs/typechecking-with-proptypes.html +++ b/docs/typechecking-with-proptypes.html @@ -63,7 +63,7 @@ diff --git a/docs/uncontrolled-components.html b/docs/uncontrolled-components.html index 9862f348d3..db808a8b52 100644 --- a/docs/uncontrolled-components.html +++ b/docs/uncontrolled-components.html @@ -63,7 +63,7 @@ diff --git a/docs/update.html b/docs/update.html index 79bd650089..73509399a6 100644 --- a/docs/update.html +++ b/docs/update.html @@ -63,7 +63,7 @@ diff --git a/docs/videos-it-IT.html b/docs/videos-it-IT.html index dbe16e81a3..fb1a2b6053 100644 --- a/docs/videos-it-IT.html +++ b/docs/videos-it-IT.html @@ -63,7 +63,7 @@ diff --git a/docs/videos-ko-KR.html b/docs/videos-ko-KR.html index 81eec30b80..8c7877eef4 100644 --- a/docs/videos-ko-KR.html +++ b/docs/videos-ko-KR.html @@ -63,7 +63,7 @@ diff --git a/docs/videos-zh-CN.html b/docs/videos-zh-CN.html index e22dd11bc3..012f04522a 100644 --- a/docs/videos-zh-CN.html +++ b/docs/videos-zh-CN.html @@ -63,7 +63,7 @@ diff --git a/docs/web-components.html b/docs/web-components.html index f9540a0704..fd3ebd62d3 100644 --- a/docs/web-components.html +++ b/docs/web-components.html @@ -63,7 +63,7 @@ diff --git a/feed.xml b/feed.xml index 67eab34144..f08764a37f 100644 --- a/feed.xml +++ b/feed.xml @@ -6,6 +6,67 @@ https://facebook.github.io/react + + React v15.6.2 + <p>Today we&#39;re sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we&#39;ve also included a few more fixes to improve the stability of React across all browsers.</p> + +<p>Additionally, 15.6.2 adds support for the <a href="https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist"><code>controlList</code></a> attribute, and CSS columns are no longer appended with a <code>px</code> suffix.</p> + +<h2>Installation</h2> + +<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you&#39;re new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p> + +<p>To install React with Yarn, run:</p> +<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@^15.6.2 react-dom@^15.6.2 +</code></pre></div> +<p>To install React with npm, run:</p> +<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@^15.6.2 react-dom@^15.6.2 +</code></pre></div> +<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p> + +<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to <a href="/react/docs/optimizing-performance.html#use-the-production-build">use the production build</a>.</p> + +<p>In case you don&#39;t use a bundler, we also provide pre-built bundles in the npm packages which you can <a href="/react/docs/installation.html#using-a-cdn">include as script tags</a> on your page:</p> + +<ul> +<li><strong>React</strong><br/> +Dev build with warnings: <a href="https://unpkg.com/react@15.6.2/dist/react.js">react/dist/react.js</a><br/> +Minified build for production: <a href="https://unpkg.com/react@15.6.2/dist/react.min.js">react/dist/react.min.js</a><br/></li> +<li><strong>React with Add-Ons</strong><br/> +Dev build with warnings: <a href="https://unpkg.com/react@15.6.2/dist/react-with-addons.js">react/dist/react-with-addons.js</a><br/> +Minified build for production: <a href="https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js">react/dist/react-with-addons.min.js</a><br/></li> +<li><strong>React DOM</strong> (include React in the page before React DOM)<br/> +Dev build with warnings: <a href="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js">react-dom/dist/react-dom.js</a><br/> +Minified build for production: <a href="https://unpkg.com/react-dom@15.6.2/dist/react-dom.min.js">react-dom/dist/react-dom.min.js</a><br/></li> +<li><strong>React DOM Server</strong> (include React in the page before React DOM Server)<br/> +Dev build with warnings: <a href="https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.js">react-dom/dist/react-dom-server.js</a><br/> +Minified build for production: <a href="https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.min.js">react-dom/dist/react-dom-server.min.js</a><br/></li> +</ul> + +<p>We&#39;ve also published version <code>15.6.2</code> of <code>react</code> and <code>react-dom</code> on npm, and the <code>react</code> package on bower.</p> + +<hr> + +<h2>Changelog</h2> + +<h2>15.6.2 (September 25th, 2017)</h2> + +<h3>React DOM</h3> + +<ul> +<li>Fix a bug where modifying document.documentMode would trigger IE detection in other browsers, breaking change events (<a href="https://github.com/aweary">@aweary</a> in <a href="https://github.com/facebook/react/pull/10032">#10032</a></li> +<li>CSS Columns are treated as unitless numbers (<a href="https://github.com/aweary">@aweary</a> in <a href="https://github.com/facebook/react/pull/10115">#10115</a></li> +<li>Fix bug in QtWebKit when wrapping synthetic events in proxies (<a href="https://github.com/walrusfruitcake">@walrusfruitcake</a> in <a href="https://github.com/facebook/react/pull/10011">#10115</a></li> +<li>Prevent event handlers from receiving extra argument (dev only) (<a href="https://github.com/aweary">@aweary</a> in <a href="https://github.com/facebook/react/pull/8363">#10115</a></li> +<li>Fix cases where onChange would not fire with defaultChecked on radio inputs (<a href="https://github.com/jquense">@jquense</a> in <a href="https://github.com/facebook/react/pull/10156">#10156</a>)</li> +<li>Add support for controlList attribute to DOM property whitelist (<a href="https://github.com/nhunzaker">@nhunzaker</a> in <a href="https://github.com/facebook/react/pull/9940">#9940</a>)</li> +</ul> + + 2017-09-25T00:00:00-07:00 + https://facebook.github.io/react/blog/2017/09/25/react-v15.6.2.html + https://facebook.github.io/react/blog/2017/09/25/react-v15.6.2.html + + DOM Attributes in React 16 <p>In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn&#39;t recognize, React would just skip it. For example, this:</p> @@ -1366,576 +1427,5 @@ The console output is tuned to be minimal to help you focus on the problems:< https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html - - Mixins Considered Harmful - <p>“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.</p> - -<p>It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.</p> - -<p>To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.</p> - -<p>Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.</p> - -<p>In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.</p> - -<h2>Why Mixins are Broken</h2> - -<p>At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.</p> - -<p>However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the <a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">same conclusions</a> after writing my fair share of terrible mixins.</p> - -<p>This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.</p> - -<h3>Mixins introduce implicit dependencies</h3> - -<p>Sometimes a component relies on a certain method defined in the mixin, such as <code>getClassName()</code>. Sometimes it’s the other way around, and mixin calls a method like <code>renderHeader()</code> on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.</p> - -<p>Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?</p> - -<p>These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s <code>render()</code> method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.</p> - -<p>Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.</p> - -<h3>Mixins cause name clashes</h3> - -<p>There is no guarantee that two particular mixins can be used together. For example, if <code>FluxListenerMixin</code> defines <code>handleChange()</code> and <code>WindowSizeMixin</code> defines <code>handleChange()</code>, you can’t use them together. You also can’t define a method with this name on your own component.</p> - -<p>It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.</p> - -<p>If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.</p> - -<p>The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.</p> - -<h3>Mixins cause snowballing complexity</h3> - -<p>Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.</p> - -<p>A component needs some state to track mouse hover. To keep this logic reusable, you might extract <code>handleMouseEnter()</code>, <code>handleMouseLeave()</code> and <code>isHovering()</code> into a <code>HoverMixin</code>. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in <code>HoverMixin</code> so they create a <code>TooltipMixin</code> that uses <code>HoverMixin</code>. <code>TooltipMixin</code> reads <code>isHovering()</code> provided by <code>HoverMixin</code> in its <code>componentDidUpdate()</code> and either shows or hides the tooltip.</p> - -<p>A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called <code>getTooltipOptions()</code> to <code>TooltipMixin</code>. By this time, components that show popovers also use <code>HoverMixin</code>. However popovers need a different hover delay. To solve this, somebody adds support for an optional <code>getHoverOptions()</code> method and implements it in <code>TooltipMixin</code>. Those mixins are now tightly coupled.</p> - -<p>This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling <code>TooltipMixin</code> from <code>HoverMixin</code>. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.</p> - -<p>Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.</p> - -<p>These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.</p> - -<h2>Migrating from Mixins</h2> - -<p>Let’s make it clear that mixins are not technically deprecated. If you use <code>React.createClass()</code>, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.</p> - -<p>Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.</p> - -<p>We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!</p> - -<h3>Performance Optimizations</h3> - -<p>One of the most commonly used mixins is <a href="/react/docs/pure-render-mixin.html"><code>PureRenderMixin</code></a>. You might be using it in some components to <a href="/react/docs/advanced-performance.html#shouldcomponentupdate-in-action">prevent unnecessary re-renders</a> when the props and state are shallowly equal to the previous props and state:</p> -<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">PureRenderMixin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-addons-pure-render-mixin&#39;</span><span class="p">);</span> - -<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">PureRenderMixin</span><span class="p">],</span> - - <span class="c1">// ...</span> - -<span class="p">});</span> -</code></pre></div> -<h4>Solution</h4> - -<p>To express the same without mixins, you can use the <a href="/react/docs/shallow-compare.html"><code>shallowCompare</code></a> function directly instead:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">shallowCompare</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-addons-shallow-compare&#39;</span><span class="p">);</span> - -<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="nx">shallowCompare</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">);</span> - <span class="p">},</span> - - <span class="c1">// ...</span> - -<span class="p">});</span> -</code></pre></div> -<p>If you use a custom mixin implementing a <code>shouldComponentUpdate</code> function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.</p> - -<p>We understand that more typing can be annoying. For the most common case, we plan to <a href="https://github.com/facebook/react/pull/7195">introduce a new base class</a> called <code>React.PureComponent</code> in the next minor release. It uses the same shallow comparison as <code>PureRenderMixin</code> does today.</p> - -<h3>Subscriptions and Side Effects</h3> - -<p>The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in <code>componentDidMount</code>, destroyed in <code>componentWillUnmount</code>, and the change handler calls <code>this.setState()</code>.</p> -<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SubscriptionMixin</span> <span class="o">=</span> <span class="p">{</span> - <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">{</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">};</span> - <span class="p">},</span> - - <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">});</span> - <span class="p">}</span> -<span class="p">};</span> - -<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">SubscriptionMixin</span><span class="p">],</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// Reading comments from state managed by mixin.</span> - <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span> - <span class="p">})}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentList</span><span class="p">;</span> -</code></pre></div> -<h4>Solution</h4> - -<p>If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.</p> - -<p>If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called <a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">“higher-order components”</a>. It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.</p> - -<h4>Higher-Order Components Explained</h4> - -<p>Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">addAndLog</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> - <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span> - <span class="k">return</span> <span class="nx">result</span><span class="p">;</span> -<span class="p">}</span> - -<span class="kd">function</span> <span class="nx">multiplyAndLog</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span> - <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span> - <span class="k">return</span> <span class="nx">result</span><span class="p">;</span> -<span class="p">}</span> -</code></pre></div> -<p>These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.</p> - -<p>Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a <a href="https://en.wikipedia.org/wiki/Higher-order_function">higher-order function</a>, that is, a function that takes a function as an argument and returns a function.</p> - -<p>Again, it sounds more intimidating than it really is:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">wrappedFunction</span><span class="p">)</span> <span class="p">{</span> - <span class="c1">// Return a function with the same API...</span> - <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="c1">// ... that calls the original function</span> - <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">wrappedFunction</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> - <span class="c1">// ... but also logs its result!</span> - <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span> - <span class="k">return</span> <span class="nx">result</span><span class="p">;</span> - <span class="p">};</span> -<span class="p">}</span> -</code></pre></div> -<p>The <code>withLogging</code> higher-order function lets us write <code>add</code> and <code>multiply</code> without the logging statements, and later wrap them to get <code>addAndLog</code> and <code>multiplyAndLog</code> with exactly the same signatures as before:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span> -<span class="p">}</span> - -<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span> -<span class="p">}</span> - -<span class="kd">function</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">wrappedFunction</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">wrappedFunction</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span> - <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span> - <span class="k">return</span> <span class="nx">result</span><span class="p">;</span> - <span class="p">};</span> -<span class="p">}</span> - -<span class="c1">// Equivalent to writing addAndLog by hand:</span> -<span class="kd">var</span> <span class="nx">addAndLog</span> <span class="o">=</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">add</span><span class="p">);</span> - -<span class="c1">// Equivalent to writing multiplyAndLog by hand:</span> -<span class="kd">var</span> <span class="nx">multiplyAndLog</span> <span class="o">=</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">multiply</span><span class="p">);</span> -</code></pre></div> -<p>Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.</p> - -<p>As a first step, we will split our <code>CommentList</code> component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a child component.</span> -<span class="c1">// It only renders the comments it receives as props.</span> -<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// Note: now reading from props rather than state.</span> - <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span> - <span class="p">})}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="c1">// This is a parent component.</span> -<span class="c1">// It subscribes to the data source and renders &lt;CommentList /&gt;.</span> -<span class="kd">var</span> <span class="nx">CommentListWithSubscription</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">{</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">};</span> - <span class="p">},</span> - - <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">});</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// We pass the current state as props to CommentList.</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">CommentList</span> <span class="nx">comments</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentListWithSubscription</span><span class="p">;</span> -</code></pre></div> -<p>There is just one final step left to do.</p> - -<p>Remember how we made <code>withLogging()</code> take a function and return another function wrapping it? We can apply a similar pattern to React components.</p> - -<p>We will write a new function called <code>withSubscription(WrappedComponent)</code>. Its argument could be any React component. We will pass <code>CommentList</code> as <code>WrappedComponent</code>, but we could also apply <code>withSubscription()</code> to any other component in our codebase.</p> - -<p>This function would return another component. The returned component would manage the subscription and render <code>&lt;WrappedComponent /&gt;</code> with the current data.</p> - -<p>We call this pattern a “higher-order component”.</p> - -<p>The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with <code>createClass()</code>, as an ES6 class or a function. If <code>WrappedComponent</code> is a React component, the component created by <code>withSubscription()</code> can render it.</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This function takes a component...</span> -<span class="kd">function</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span> - <span class="c1">// ...and returns another component...</span> - <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">{</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">};</span> - <span class="p">},</span> - - <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// ... that takes care of the subscription...</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">});</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// ... and renders the wrapped component with the fresh data!</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="nx">comments</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span> - <span class="p">}</span> - <span class="p">});</span> -<span class="p">}</span> -</code></pre></div> -<p>Now we can declare <code>CommentListWithSubscription</code> by applying <code>withSubscription</code> to <code>CommentList</code>:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span> - <span class="p">})}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="c1">// withSubscription() returns a new component that</span> -<span class="c1">// is subscribed to the data source and renders</span> -<span class="c1">// &lt;CommentList /&gt; with up-to-date data.</span> -<span class="kd">var</span> <span class="nx">CommentListWithSubscription</span> <span class="o">=</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">CommentList</span><span class="p">);</span> - -<span class="c1">// The rest of the app is interested in the subscribed component</span> -<span class="c1">// so we export it instead of the original unwrapped CommentList.</span> -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentListWithSubscription</span><span class="p">;</span> -</code></pre></div> -<h4>Solution, Revisited</h4> - -<p>Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">{</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">};</span> - <span class="p">},</span> - - <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> - <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span> - <span class="p">});</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// Use JSX spread syntax to pass all props and state down automatically.</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span> - <span class="p">}</span> - <span class="p">});</span> -<span class="p">}</span> - -<span class="c1">// Optional change: convert CommentList to a functional component</span> -<span class="c1">// because it doesn&#39;t use lifecycle hooks or state.</span> -<span class="kd">function</span> <span class="nx">CommentList</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span> - <span class="p">})}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> -<span class="p">}</span> - -<span class="c1">// Instead of declaring CommentListWithSubscription,</span> -<span class="c1">// we export the wrapped component right away.</span> -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">CommentList</span><span class="p">);</span> -</code></pre></div> -<p>Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.</p> - -<p>Like any solution, higher-order components have their own pitfalls. For example, if you heavily use <a href="/react/docs/more-about-refs.html">refs</a>, you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding <a href="https://github.com/facebook/react/issues/4213">ref forwarding</a> to React to solve this annoyance.</p> - -<h3>Rendering Logic</h3> - -<p>The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.</p> - -<p>Here is a typical example of this pattern:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">RowMixin</span> <span class="o">=</span> <span class="p">{</span> - <span class="c1">// Called by components from render()</span> - <span class="nx">renderHeader</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s1">&#39;row-header&#39;</span><span class="o">&gt;</span> - <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">getHeaderText</span><span class="p">()</span> <span class="cm">/* Defined by components */</span><span class="p">}</span> - <span class="o">&lt;</span><span class="err">/h1&gt;</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">);</span> - <span class="p">}</span> -<span class="p">};</span> - -<span class="kd">var</span> <span class="nx">UserRow</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">RowMixin</span><span class="p">],</span> - - <span class="c1">// Called by RowMixin.renderHeader()</span> - <span class="nx">getHeaderText</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">fullName</span><span class="p">;</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">renderHeader</span><span class="p">()</span> <span class="cm">/* Defined by RowMixin */</span><span class="p">}</span> - <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">biography</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> -</code></pre></div> -<p>Multiple components may be sharing <code>RowMixin</code> to render the header, and each of them would need to define <code>getHeaderText()</code>.</p> - -<h4>Solution</h4> - -<p>If you see rendering logic inside a mixin, it’s time to extract a component!</p> - -<p>Instead of <code>RowMixin</code>, we will define a <code>&lt;RowHeader&gt;</code> component. We will also replace the convention of defining a <code>getHeaderText()</code> method with the standard mechanism of top-data flow in React: passing props.</p> - -<p>Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">RowHeader</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s1">&#39;row-header&#39;</span><span class="o">&gt;</span> - <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">);</span> -<span class="p">}</span> - -<span class="kd">function</span> <span class="nx">UserRow</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span> - <span class="o">&lt;</span><span class="nx">RowHeader</span> <span class="nx">text</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">fullName</span><span class="p">}</span> <span class="o">/&gt;</span> - <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">biography</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">);</span> -<span class="p">}</span> -</code></pre></div> -<p>Props keep component dependencies explicit, easy to replace, and enforceable with tools like <a href="https://flowtype.org/">Flow</a> and <a href="https://www.typescriptlang.org/">TypeScript</a>.</p> - -<blockquote> -<p><strong>Note:</strong></p> - -<p>Defining components as functions is not required. There is also nothing wrong with using lifecycle hooks and state—they are first-class React features. We use functional components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.</p> -</blockquote> - -<h3>Context</h3> - -<p>Another group of mixins we discovered were helpers for providing and consuming <a href="/react/docs/context.html">React context</a>. Context is an experimental unstable feature, has <a href="https://github.com/facebook/react/issues/2517">certain issues</a>, and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.</p> - -<p>Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">RouterMixin</span> <span class="o">=</span> <span class="p">{</span> - <span class="nx">contextTypes</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">router</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">isRequired</span> - <span class="p">},</span> - - <span class="c1">// The mixin provides a method so that components</span> - <span class="c1">// don&#39;t have to use the context API directly.</span> - <span class="nx">push</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span> - <span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> - <span class="p">}</span> -<span class="p">};</span> - -<span class="kd">var</span> <span class="nx">Link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">RouterMixin</span><span class="p">],</span> - - <span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> - <span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span> - - <span class="c1">// This method is defined in RouterMixin.</span> - <span class="k">this</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">to</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span> - <span class="o">&lt;</span><span class="err">/a&gt;</span> - <span class="p">);</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Link</span><span class="p">;</span> -</code></pre></div> -<h4>Solution</h4> - -<p>We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.</p> - -<p>Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withRouter</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span> - <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">contextTypes</span><span class="o">:</span> <span class="p">{</span> - <span class="nx">router</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">isRequired</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="c1">// The wrapper component reads something from the context</span> - <span class="c1">// and passes it down as a prop to the wrapped component.</span> - <span class="kd">var</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">router</span><span class="p">;</span> - <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="nx">router</span><span class="o">=</span><span class="p">{</span><span class="nx">router</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span> - <span class="p">}</span> - <span class="p">});</span> -<span class="p">};</span> - -<span class="kd">var</span> <span class="nx">Link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> - <span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span> - - <span class="c1">// The wrapped component uses props instead of context.</span> - <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">to</span><span class="p">);</span> - <span class="p">},</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span> - <span class="o">&lt;</span><span class="err">/a&gt;</span> - <span class="p">);</span> - <span class="p">}</span> -<span class="p">});</span> - -<span class="c1">// Don&#39;t forget to wrap the component!</span> -<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">withRouter</span><span class="p">(</span><span class="nx">Link</span><span class="p">);</span> -</code></pre></div> -<p>If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.</p> - -<h3>Utility Methods</h3> - -<p>Sometimes, mixins are used solely to share utility functions between components:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">ColorMixin</span> <span class="o">=</span> <span class="p">{</span> - <span class="nx">getLuminance</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span> - <span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0xFF0000</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="mi">16</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0x00FF00</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="mi">8</span><span class="p">;</span> - <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0x0000FF</span><span class="p">);</span> - <span class="k">return</span> <span class="p">(</span><span class="mf">0.299</span> <span class="o">*</span> <span class="nx">r</span> <span class="o">+</span> <span class="mf">0.587</span> <span class="o">*</span> <span class="nx">g</span> <span class="o">+</span> <span class="mf">0.114</span> <span class="o">*</span> <span class="nx">b</span><span class="p">);</span> - <span class="p">}</span> -<span class="p">};</span> - -<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ColorMixin</span><span class="p">],</span> - - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">theme</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">160</span> <span class="o">?</span> <span class="s1">&#39;dark&#39;</span> <span class="o">:</span> <span class="s1">&#39;light&#39;</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">theme</span><span class="p">}</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> -</code></pre></div> -<h4>Solution</h4> - -<p>Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:</p> -<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">getLuminance</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../utils/getLuminance&#39;</span><span class="p">);</span> - -<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span> - <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> - <span class="kd">var</span> <span class="nx">theme</span> <span class="o">=</span> <span class="nx">getLuminance</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">160</span> <span class="o">?</span> <span class="s1">&#39;dark&#39;</span> <span class="o">:</span> <span class="s1">&#39;light&#39;</span><span class="p">;</span> - <span class="k">return</span> <span class="p">(</span> - <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">theme</span><span class="p">}</span><span class="o">&gt;</span> - <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span> - <span class="o">&lt;</span><span class="err">/div&gt;</span> - <span class="p">)</span> - <span class="p">}</span> -<span class="p">});</span> -</code></pre></div> -<h3>Other Use Cases</h3> - -<p>Sometimes people use mixins to selectively add logging to lifecycle hooks in some components. In the future, we intend to provide an <a href="https://github.com/facebook/react/issues/5306">official DevTools API</a> that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.</p> - -<p>If you can’t accomplish something with a component, a higher-order component, or a utility module, it could be mean that React should provide this out of the box. <a href="https://github.com/facebook/react/issues/new">File an issue</a> to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.</p> - -<p>Mixins are not deprecated in the traditional sense. You can keep using them with <code>React.createClass()</code>, as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split <code>React.createClass()</code> into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.</p> - -<p>We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.</p> - - 2016-07-13T00:00:00-07:00 - https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html - https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html - - diff --git a/index.html b/index.html index 2a76aa8802..88df801e90 100644 --- a/index.html +++ b/index.html @@ -63,7 +63,7 @@ diff --git a/js/ErrorDecoderComponent.js b/js/ErrorDecoderComponent.js index ad46a7e7e6..090fb9d151 100644 --- a/js/ErrorDecoderComponent.js +++ b/js/ErrorDecoderComponent.js @@ -1,10 +1,8 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. */ /* global React ReactDOM errorMap:true */ 'use strict'; @@ -36,7 +34,7 @@ function urlify(str) { 'a', { key: i, target: '_blank', href: segments[i], __source: { fileName: _jsxFileName, - lineNumber: 27 + lineNumber: 25 } }, segments[i] @@ -80,7 +78,7 @@ function ErrorResult(props) { { __source: { fileName: _jsxFileName, - lineNumber: 63 + lineNumber: 61 } }, 'When you encounter an error, you\'ll receive a link to this page for that specific error and we\'ll show you the full error text.' @@ -92,7 +90,7 @@ function ErrorResult(props) { { __source: { fileName: _jsxFileName, - lineNumber: 68 + lineNumber: 66 } }, React.createElement( @@ -100,7 +98,7 @@ function ErrorResult(props) { { __source: { fileName: _jsxFileName, - lineNumber: 69 + lineNumber: 67 } }, 'The full text of the error you just encountered is:' @@ -110,7 +108,7 @@ function ErrorResult(props) { { __source: { fileName: _jsxFileName, - lineNumber: 70 + lineNumber: 68 } }, urlify(errorMsg) @@ -158,7 +156,7 @@ var ErrorDecoder = function (_React$Component) { msg: this.state.errorMsg, __source: { fileName: _jsxFileName, - lineNumber: 100 + lineNumber: 98 } }); }; @@ -169,6 +167,6 @@ var ErrorDecoder = function (_React$Component) { ReactDOM.render(React.createElement(ErrorDecoder, { __source: { fileName: _jsxFileName, - lineNumber: 109 + lineNumber: 107 } }), document.querySelector('.error-decoder-container')); \ No newline at end of file diff --git a/jsx-compiler.html b/jsx-compiler.html index cc9848c148..ca9934cdce 100644 --- a/jsx-compiler.html +++ b/jsx-compiler.html @@ -63,7 +63,7 @@ diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 67d20ab936..8971ef05ee 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -63,7 +63,7 @@ diff --git a/warnings/dont-call-proptypes.html b/warnings/dont-call-proptypes.html index 0cb6c00858..eb4fb56c01 100644 --- a/warnings/dont-call-proptypes.html +++ b/warnings/dont-call-proptypes.html @@ -63,7 +63,7 @@ diff --git a/warnings/invalid-aria-prop.html b/warnings/invalid-aria-prop.html index f2fbcbb822..5a127977fa 100644 --- a/warnings/invalid-aria-prop.html +++ b/warnings/invalid-aria-prop.html @@ -63,7 +63,7 @@ diff --git a/warnings/legacy-factories.html b/warnings/legacy-factories.html index 9cde198ed3..23134a53cf 100644 --- a/warnings/legacy-factories.html +++ b/warnings/legacy-factories.html @@ -63,7 +63,7 @@ diff --git a/warnings/refs-must-have-owner.html b/warnings/refs-must-have-owner.html index b2fbb89021..43168fa0ad 100644 --- a/warnings/refs-must-have-owner.html +++ b/warnings/refs-must-have-owner.html @@ -63,7 +63,7 @@ diff --git a/warnings/special-props.html b/warnings/special-props.html index 8f8a5cf8da..04636f1abd 100644 --- a/warnings/special-props.html +++ b/warnings/special-props.html @@ -63,7 +63,7 @@ diff --git a/warnings/unknown-prop.html b/warnings/unknown-prop.html index 6ec335faa4..f5cf17995d 100644 --- a/warnings/unknown-prop.html +++ b/warnings/unknown-prop.html @@ -63,7 +63,7 @@