diff --git a/blog/2016/11/16/react-v15.4.0.html b/blog/2016/11/16/react-v15.4.0.html index b5eb23410b..92601e93f7 100644 --- a/blog/2016/11/16/react-v15.4.0.html +++ b/blog/2016/11/16/react-v15.4.0.html @@ -181,7 +181,7 @@

To install React with npm, run:

npm install --save react@15.4.0 react-dom@15.4.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.

+

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.

diff --git a/blog/index.html b/blog/index.html index 641d814eed..d781560506 100644 --- a/blog/index.html +++ b/blog/index.html @@ -211,7 +211,7 @@

To install React with npm, run:

npm install --save react@15.4.0 react-dom@15.4.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.

+

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.

diff --git a/css/react.css b/css/react.css index 1b598ca10c..66947dd225 100644 --- a/css/react.css +++ b/css/react.css @@ -1 +1 @@ -html{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:16px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}input{font-family:inherit}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#859900}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#657b83}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#268bd2}.cm-s-solarized-light span.cm-tag{color:#268bd2}.cm-s-solarized-light span.cm-attribute{color:#586e75}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;width:100%}.wrap{max-width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}@media (max-width: 960px){.wrap{padding-left:10px;padding-right:10px}}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}li+li{margin-top:10px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:after{content:"";display:table;clear:both}@media (max-width: 960px){.nav-main{height:auto}}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{display:inline-flex;flex:1}.nav-main .nav-site li{margin:0}.nav-main .nav-site li>a{box-sizing:content-box;padding:0 10px;line-height:50px;display:inline-block;height:50px;color:#ddd;white-space:nowrap}@media (max-width: 960px){.nav-main .nav-site li>a{display:flex;justify-content:center;align-items:center;padding:0 5px;line-height:inherit}}.nav-main .nav-site li>a:hover{color:#fff}.nav-main .nav-site li>a.active{position:relative;color:#fafafa;background:#333}.nav-main .nav-site li>a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:3px solid #cc7a6f}@media (max-width: 960px){.nav-main .nav-site li>a.active{background:inherit}}@media (max-width: 960px){.nav-main .nav-site .nav-site-item--hidden-sm{display:none}}@media (max-width: 960px){.nav-main .nav-site .nav-site-search{position:absolute;z-index:1;right:0;top:0;margin:0 10px}.nav-main .nav-site .nav-site-search:focus{width:170px}}.nav-main .nav-site-internal{margin:0 0 0 20px}@media (max-width: 960px){.nav-main .nav-site-internal{margin:0}}.nav-main .nav-site-external{float:right;margin:0}@media (max-width: 960px){.nav-main .nav-site-external{position:absolute;top:0;right:55px;float:none}}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px;height:50px;display:inline-block}@media (max-width: 960px){.nav-main .nav-home{font-size:20px}}.nav-main .nav-logo{vertical-align:middle;display:inline-block}@media (max-width: 960px){.nav-main .nav-logo{height:30px;width:auto}}.nav-main ul{display:inline-block;vertical-align:top}.nav-main li{display:inline}.nav-lists{display:inline-block;vertical-align:top;width:calc(100% - 120px)}@media (max-width: 960px){.nav-lists{display:flex;width:calc(100% + 20px);margin:0 -10px;font-size:0.9em}.nav-lists li{display:flex;flex:1 0 auto;align-items:center}.nav-lists li a{flex:1;text-align:center;line-height:1.2}}.hero{min-height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{display:flex;justify-content:center;flex-wrap:wrap;margin-top:60px;text-align:center;font-size:1em}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}@media (max-width: 960px){.buttons-unit .button{margin:5px;font-size:1em}}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}@media (max-width: 640px){.nav-docs{width:100%;padding-bottom:40px}}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:0 0 6px 20px}.nav-docs li{line-height:16px;margin:0 0 6px}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs a.external:after{content:"";display:inline-block;width:10px;height:10px;padding-left:5px;background-image:url("../img/external.png");background-position:100% 0;background-repeat:no-repeat;font-size:10px;line-height:1em;opacity:0.5}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-docs a.external:after{background-image:url("../img/external_2x.png");background-size:10px 10px}}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}@media (max-width: 640px){.nav-docs .nav-docs-section>ul{columns:2}}@media (max-width: 480px){.nav-docs .nav-docs-section>ul{columns:1}}.nav-docs .nav-docs-section>ul li{margin:0}.nav-docs .nav-docs-section>ul li a{padding:0;line-height:1.6}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:100%;max-width:400px}.skinny-row:after{content:"";display:table;clear:both}.skinny-col{float:left;margin-left:40px;width:305px}.skinny-col:first-child{margin-left:0}.marketing-row{margin:50px 0}.marketing-row:after{content:"";display:table;clear:both}.marketing-col{float:left;margin-left:40px;width:280px}@media (max-width: 960px){.marketing-col{margin:0;width:100%}}.marketing-col h3{color:#2d2d2d;font-size:24px;line-height:28px;font-weight:normal}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev:after{content:"";display:table;clear:both}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler label.compiler-option{display:block;margin-top:5px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px;word-wrap:break-word}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.jsxCompiler .playgroundError{padding:15px 20px}.docs-prev{float:left}.docs-next{float:right}section.black content{padding-bottom:18px}.blogContent{padding-top:20px;padding-bottom:80px}.blogContent:after{content:"";display:table;clear:both}@media (max-width: 640px){.blogContent{padding-bottom:0}}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.blogContent h2>code{font-size:inherit;line-height:inherit;color:#555;background-color:rgba(0,0,0,0.04)}.documentationContent{padding-top:20px;padding-bottom:80px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}@media (max-width: 640px){.documentationContent{padding-bottom:0}}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(248,245,236,0.5);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.button{background:-webkit-linear-gradient(#9a9a9a, #646464);background:linear-gradient(#9a9a9a, #646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient(#77a3d2, #4783c2);background:linear-gradient(#77a3d2, #4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:100%;max-width:650px}@media (max-width: 960px){.inner-content{width:calc(100% - 240px);max-width:100%}}@media (max-width: 640px){.inner-content{width:100%}}.nosidebar .inner-content{float:none;margin:0 auto}h1:after{content:"";display:table;clear:both}.edit-page-link{float:right;font-size:16px;font-weight:normal;line-height:20px;margin-top:17px}@media (max-width: 640px){.edit-page-link{float:left;width:100%}}.communityContent{padding-top:20px}.communityContent:after{content:"";display:table;clear:both}.communityContent h3{margin-top:30px}.communityContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.communityContent th{padding-right:6px;text-align:right;vertical-align:top;font-weight:normal;font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.communityContent td{vertical-align:top;text-align:left}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}div.CodeMirror-linenumber{text-align:right}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}small a code,li a code,p a code{color:inherit}.cm-s-default span.cm-string-2{color:inherit}.playground:after{content:"";display:table;clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:100%;max-width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px;word-wrap:break-word}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.MarkdownEditor .content{white-space:pre-wrap;word-break:break-word}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0;float:left;min-width:100%}.highlight pre code{display:block;background:none;padding:0}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media (max-width: 960px){.nav-main{position:relative}.container{padding-top:0}}.post{margin-bottom:30px}.post img{max-width:100%;height:auto}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important;width:100% !important}.fb_iframe_widget{max-width:100%}.fb_iframe_widget *{max-width:100%}@media (max-width: 960px){#twitter-widget-0{display:none !important}}.three-column:after{content:"";display:table;clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}input#algolia-doc-search{background:transparent url("/react/img/search.png") no-repeat 10px center;background-size:16px 16px;position:relative;vertical-align:top;margin-left:10px;padding:0 10px;padding-left:35px;height:30px;margin-top:10px;font-size:16px;line-height:20px;background-color:#333;border-radius:4px;color:white;outline:none;width:170px;transition:width .2s ease}input#algolia-doc-search:focus{width:240px}@media (max-width: 960px){input#algolia-doc-search{background-color:transparent;width:0;cursor:pointer}input#algolia-doc-search:focus{width:200px;background-color:#333}}.algolia-autocomplete .aa-dropdown-menu{margin-left:-110px;margin-top:-4px}.algolia-autocomplete{vertical-align:top;height:53px}.algolia-docsearch-suggestion{border-bottom-color:#c05b4d}.algolia-docsearch-suggestion--category-header{background-color:#cc7a6f}.algolia-docsearch-suggestion--highlight{color:#c05b4d}.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion--content{color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion{background:#f1f3f5}footer.nav-footer{box-sizing:border-box;border:none;font-weight:300;color:#202020;font-size:15px;line-height:24px;background:#2D2D2D;box-shadow:inset 0 10px 10px -5px #0d1116;padding-top:2em;padding-bottom:2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}footer .sitemap{display:flex;justify-content:space-between;max-width:1080px;margin:0 auto 3em}footer .sitemap div{flex:1}footer .sitemap .nav-home{display:table;margin:-12px 20px 0 0;padding:10px;width:60px;height:60px;transition:opacity 0.15s ease-in-out;background:url("../img/logo_small_gray.png") no-repeat content-box}footer .sitemap .nav-home:hover,footer .sitemap .nav-home:focus{background-image:url("../img/logo_small.png")}@media screen and (max-width: 740px){footer .sitemap{display:none}}footer .sitemap a{color:white;display:table;margin:2px -10px;padding:3px 10px}footer .sitemap a:hover,footer .sitemap a:focus{color:#61dafb;text-decoration:none}footer .sitemap h6>a:hover,footer .sitemap h6>a:focus{color:#61dafb;text-decoration:none}footer .sitemap h5,footer .sitemap h6{margin:0 0 10px}footer .sitemap h5,footer .sitemap h6,footer .sitemap h5>a,footer .sitemap h6>a{color:white}footer .sitemap h5>a,footer .sitemap h6>a{margin:0 -10px}footer .fbOpenSource{display:block;margin:1em auto;opacity:0.4;transition:opacity 0.15s ease-in-out;width:170px}footer .fbOpenSource:hover{opacity:1.0}footer .copyright{color:rgba(255,255,255,0.4);text-align:center} +html{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:16px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#c05b4d;text-decoration:none}a:hover,a:focus{color:#a5473a;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}input{font-family:inherit}html *{color-profile:sRGB;rendering-intent:auto}.cm-s-solarized-light{background-color:#f8f5ec;color:#637c84}.cm-s-solarized-light .emphasis{font-weight:bold}.cm-s-solarized-light .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-light .CodeMirror-gutter{background-color:#eee8d5;border-right:3px solid #eee8d5}.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text{color:#93a1a1}.cm-s-solarized-light .CodeMirror-cursor{border-left-color:#002b36 !important}.cm-s-solarized-light .CodeMirror-matchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold}.cm-s-solarized-light .CodeMirror-nonmatchingbracket{color:#002b36;background-color:#eee8d5;box-shadow:0 0 10px #eee8d5;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-keyword{color:#859900}.cm-s-solarized-light span.cm-atom{color:#2aa198}.cm-s-solarized-light span.cm-number{color:#586e75}.cm-s-solarized-light span.cm-def{color:#637c84}.cm-s-solarized-light span.cm-variable{color:#637c84}.cm-s-solarized-light span.cm-variable-2{color:#b58900}.cm-s-solarized-light span.cm-variable-3{color:#cb4b16}.cm-s-solarized-light span.cm-comment{color:#93a1a1}.cm-s-solarized-light span.cm-property{color:#657b83}.cm-s-solarized-light span.cm-operator{color:#657b83}.cm-s-solarized-light span.cm-string{color:#36958e}.cm-s-solarized-light span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-light span.cm-bracket{color:#268bd2}.cm-s-solarized-light span.cm-tag{color:#268bd2}.cm-s-solarized-light span.cm-attribute{color:#586e75}.cm-s-solarized-light span.cm-meta{color:#268bd2}.cm-s-solarized-dark{background-color:#002b36;color:#839496}.cm-s-solarized-dark .emphasis{font-weight:bold}.cm-s-solarized-dark .dotted{border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark .CodeMirror-gutter{background-color:#073642;border-right:3px solid #073642}.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text{color:#586e75}.cm-s-solarized-dark .CodeMirror-cursor{border-left-color:#fdf6e3 !important}.cm-s-solarized-dark .CodeMirror-matchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold}.cm-s-solarized-dark .CodeMirror-nonmatchingbracket{color:#fdf6e3;background-color:#073642;box-shadow:0 0 10px #073642;font-weight:bold;color:#dc322f;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-keyword{color:#839496;font-weight:bold}.cm-s-solarized-dark span.cm-atom{color:#2aa198}.cm-s-solarized-dark span.cm-number{color:#93a1a1}.cm-s-solarized-dark span.cm-def{color:#268bd2}.cm-s-solarized-dark span.cm-variable{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-2{color:#cb4b16}.cm-s-solarized-dark span.cm-variable-3{color:#cb4b16}.cm-s-solarized-dark span.cm-comment{color:#586e75}.cm-s-solarized-dark span.cm-property{color:#b58900}.cm-s-solarized-dark span.cm-operator{color:#839496}.cm-s-solarized-dark span.cm-string{color:#6c71c4}.cm-s-solarized-dark span.cm-error{font-weight:bold;border-bottom:1px dotted #cb4b16}.cm-s-solarized-dark span.cm-bracket{color:#cb4b16}.cm-s-solarized-dark span.cm-tag{color:#839496}.cm-s-solarized-dark span.cm-attribute{color:#93a1a1}.cm-s-solarized-dark span.cm-meta{color:#268bd2}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;width:100%}.wrap{max-width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}@media (max-width: 960px){.wrap{padding-left:10px;padding-right:10px}}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}li+li{margin-top:10px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none}.nav-main{background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:after{content:"";display:table;clear:both}@media (max-width: 960px){.nav-main{height:auto}}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{display:inline-flex;display:-ms-flexbox;flex:1;-ms-flex:1}.nav-main .nav-site li{margin:0}.nav-main .nav-site li>a{box-sizing:content-box;padding:0 10px;line-height:50px;display:inline-block;height:50px;color:#ddd;white-space:nowrap}@media (max-width: 960px){.nav-main .nav-site li>a{display:flex;display:-ms-flex;justify-content:center;align-items:center;padding:0 5px;line-height:inherit}}.nav-main .nav-site li>a:hover{color:#fff}.nav-main .nav-site li>a.active{position:relative;color:#fafafa;background:#333}.nav-main .nav-site li>a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:3px solid #cc7a6f}@media (max-width: 960px){.nav-main .nav-site li>a.active{background:inherit}}@media (max-width: 960px){.nav-main .nav-site .nav-site-item--hidden-sm{display:none}}@media (max-width: 960px){.nav-main .nav-site .nav-site-search{position:absolute;z-index:1;right:0;top:0;margin:0 10px}.nav-main .nav-site .nav-site-search:focus{width:170px}}.nav-main .nav-site-internal{margin:0 0 0 20px}@media (max-width: 960px){.nav-main .nav-site-internal{margin:0}}.nav-main .nav-site-external{float:right;margin:0}@media (max-width: 960px){.nav-main .nav-site-external{position:absolute;top:0;right:55px;float:none}}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px;height:50px;display:inline-block}@media (max-width: 960px){.nav-main .nav-home{font-size:20px}}.nav-main .nav-logo{vertical-align:middle;display:inline-block}@media (max-width: 960px){.nav-main .nav-logo{height:30px;width:auto}}.nav-main ul{display:inline-block;vertical-align:top}.nav-main li{display:inline}.nav-lists{display:inline-block;vertical-align:top;width:calc(100% - 120px)}@media (max-width: 960px){.nav-lists{display:flex;display:-ms-flex;width:calc(100% + 20px);margin:0 -10px;font-size:0.9em}.nav-lists li{display:flex;display:-ms-flex;-ms-flex:1 0 auto;align-items:center}.nav-lists li a{-ms-flex:1;text-align:center;line-height:1.2}}.hero{min-height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#61dafb;font-weight:400}.buttons-unit{display:flex;display:flex;justify-content:center;flex-wrap:wrap;margin-top:60px;text-align:center;font-size:1em}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}@media (max-width: 960px){.buttons-unit .button{margin:5px;font-size:1em}}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}@media (max-width: 640px){.nav-docs{width:100%;padding-bottom:40px}}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:0 0 6px 20px}.nav-docs li{line-height:16px;margin:0 0 6px}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#cc7a6f}.nav-docs a.active{color:#cc7a6f}.nav-docs a.external:after{content:"";display:inline-block;width:10px;height:10px;padding-left:5px;background-image:url("../img/external.png");background-position:100% 0;background-repeat:no-repeat;font-size:10px;line-height:1em;opacity:0.5}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-docs a.external:after{background-image:url("../img/external_2x.png");background-size:10px 10px}}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}@media (max-width: 640px){.nav-docs .nav-docs-section>ul{columns:2}}@media (max-width: 480px){.nav-docs .nav-docs-section>ul{columns:1}}.nav-docs .nav-docs-section>ul li{margin:0}.nav-docs .nav-docs-section>ul li a{padding:0;line-height:1.6}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:100%;max-width:400px}.skinny-row:after{content:"";display:table;clear:both}.skinny-col{float:left;margin-left:40px;width:305px}.skinny-col:first-child{margin-left:0}.marketing-row{margin:50px 0}.marketing-row:after{content:"";display:table;clear:both}.marketing-col{float:left;margin-left:40px;width:280px}@media (max-width: 960px){.marketing-col{margin:0;width:100%}}.marketing-col h3{color:#2d2d2d;font-size:24px;line-height:28px;font-weight:normal}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#examples h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#examples p{margin:0 0 25px 0;max-width:600px}#examples .example{margin-top:60px}#examples #todoExample{font-size:14px}#examples #todoExample ul{list-style-type:square;margin:0 0 10px 0}#examples #todoExample input{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;padding:3px;width:150px}#examples #todoExample button{font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-left:5px;padding:4px 10px}#examples #markdownExample textarea{border:1px solid #ccc;font:14px proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;margin-bottom:10px;padding:5px}.home-bottom-section{margin-bottom:100px}.docs-nextprev:after{content:"";display:table;clear:both}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler label.compiler-option{display:block;margin-top:5px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px;word-wrap:break-word}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.jsxCompiler .playgroundError{padding:15px 20px}.docs-prev{float:left}.docs-next{float:right}section.black content{padding-bottom:18px}.blogContent{padding-top:20px;padding-bottom:80px}.blogContent:after{content:"";display:table;clear:both}@media (max-width: 640px){.blogContent{padding-bottom:0}}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.blogContent h2>code{font-size:inherit;line-height:inherit;color:#555;background-color:rgba(0,0,0,0.04)}.documentationContent{padding-top:20px;padding-bottom:80px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}@media (max-width: 640px){.documentationContent{padding-bottom:0}}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(248,245,236,0.5);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.button{background:-webkit-linear-gradient(#9a9a9a, #646464);background:linear-gradient(#9a9a9a, #646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.hero .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:-webkit-linear-gradient(#77a3d2, #4783c2);background:linear-gradient(#77a3d2, #4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.inner-content{float:right;width:100%;max-width:650px}@media (max-width: 960px){.inner-content{width:calc(100% - 240px);max-width:100%}}@media (max-width: 640px){.inner-content{width:100%}}.nosidebar .inner-content{float:none;margin:0 auto}h1:after{content:"";display:table;clear:both}.edit-page-link{float:right;font-size:16px;font-weight:normal;line-height:20px;margin-top:17px}@media (max-width: 640px){.edit-page-link{float:left;width:100%}}.communityContent{padding-top:20px}.communityContent:after{content:"";display:table;clear:both}.communityContent h3{margin-top:30px}.communityContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.communityContent th{padding-right:6px;text-align:right;vertical-align:top;font-weight:normal;font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.communityContent td{vertical-align:top;text-align:left}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}div.CodeMirror-linenumber{text-align:right}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}small a code,li a code,p a code{color:inherit}.cm-s-default span.cm-string-2{color:inherit}.playground:after{content:"";display:table;clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:100%;max-width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px;word-wrap:break-word}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.MarkdownEditor .content{white-space:pre-wrap;word-break:break-word}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0;float:left;min-width:100%}.highlight pre code{display:block;background:none;padding:0}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media (max-width: 960px){.nav-main{position:relative}.container{padding-top:0}}.post{margin-bottom:30px}.post img{max-width:100%;height:auto}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important;width:100% !important}.fb_iframe_widget{max-width:100%}.fb_iframe_widget *{max-width:100%}@media (max-width: 960px){#twitter-widget-0{display:none !important}}.three-column:after{content:"";display:table;clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}input#algolia-doc-search{background:transparent url("/react/img/search.png") no-repeat 10px center;background-size:16px 16px;position:relative;vertical-align:top;margin-left:10px;padding:0 10px;padding-left:35px;height:30px;margin-top:10px;font-size:16px;line-height:20px;background-color:#333;border-radius:4px;color:white;outline:none;width:170px;transition:width .2s ease}input#algolia-doc-search:focus{width:240px}@media (max-width: 960px){input#algolia-doc-search{background-color:transparent;width:0;cursor:pointer}input#algolia-doc-search:focus{width:200px;background-color:#333}}.algolia-autocomplete .aa-dropdown-menu{margin-left:-110px;margin-top:-4px}.algolia-autocomplete{vertical-align:top;height:53px}.algolia-docsearch-suggestion{border-bottom-color:#c05b4d}.algolia-docsearch-suggestion--category-header{background-color:#cc7a6f}.algolia-docsearch-suggestion--highlight{color:#c05b4d}.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion--content{color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion{background:#f1f3f5}footer.nav-footer{box-sizing:border-box;border:none;font-weight:300;color:#202020;font-size:15px;line-height:24px;background:#2D2D2D;box-shadow:inset 0 10px 10px -5px #0d1116;padding-top:2em;padding-bottom:2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}footer .sitemap{display:flex;display:-ms-flexbox;justify-content:space-between;max-width:1080px;margin:0 auto 3em}footer .sitemap div{flex:1;-ms-flex:1}footer .sitemap .nav-home{display:table;margin:-12px 20px 0 0;padding:10px;width:60px;height:60px;transition:opacity 0.15s ease-in-out;background:url("../img/logo_small_gray.png") no-repeat content-box}footer .sitemap .nav-home:hover,footer .sitemap .nav-home:focus{background-image:url("../img/logo_small.png")}@media screen and (max-width: 740px){footer .sitemap{display:none}}footer .sitemap a{color:white;display:table;margin:2px -10px;padding:3px 10px}footer .sitemap a:hover,footer .sitemap a:focus{color:#61dafb;text-decoration:none}footer .sitemap h6>a:hover,footer .sitemap h6>a:focus{color:#61dafb;text-decoration:none}footer .sitemap h5,footer .sitemap h6{margin:0 0 10px}footer .sitemap h5,footer .sitemap h6,footer .sitemap h5>a,footer .sitemap h6>a{color:white}footer .sitemap h5>a,footer .sitemap h6>a{margin:0 -10px}footer .fbOpenSource{display:block;margin:1em auto;opacity:0.4;transition:opacity 0.15s ease-in-out;width:170px}footer .fbOpenSource:hover{opacity:1.0}footer .copyright{color:rgba(255,255,255,0.4);text-align:center} diff --git a/docs/context.html b/docs/context.html index 030c3cfbc2..3fa93e7f3e 100644 --- a/docs/context.html +++ b/docs/context.html @@ -170,8 +170,10 @@ You can do this directly in React with the powerful "context" API.

If contextTypes is not defined, then context will be an empty object.

Parent-Child Coupling #

-

Context can also let you build an API where parents and children communicate. For example, one library that works this way is React Router V4:

-
const BasicExample = () => (
+
Context can also let you build an API where parents and children communicate. For example, one library that works this way is React Router V4:

+
import { Router, Route, Link } from 'react-router-dom';
+
+const BasicExample = () => (
   <Router>
     <div>
       <ul>
@@ -180,16 +182,16 @@ You can do this directly in React with the powerful "context" API.

         <li><Link to="/topics">Topics</Link></li>
       </ul>
 
-      <hr/>
+      <hr />
 
-      <Match exactly pattern="/" component={Home} />
-      <Match pattern="/about" component={About} />
-      <Match pattern="/topics" component={Topics} />
+      <Route exact path="/" component={Home} />
+      <Route path="/about" component={About} />
+      <Route path="/topics" component={Topics} />
     </div>
   </Router>
-)
+);
 

-
By passing down some information from the Router component, each Link and Match can communicate back to the containing Router.

+
By passing down some information from the Router component, each Link and Route can communicate back to the containing Router.

 
 
Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React component as props if you'd like to.

 
Referencing Context in Lifecycle Methods #

diff --git a/docs/installation.html b/docs/installation.html
index 7a5dd76d12..f6ac68c86c 100644
--- a/docs/installation.html
+++ b/docs/installation.html
@@ -94,7 +94,7 @@ npm start
 
Adding React to an Existing Application #

 
You don't need to rewrite your app to start using React.

 
-
We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case.

+
We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.

 
 
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:

 
@@ -140,12 +140,6 @@ npm install --save react react-dom
 
If you use Create React App, npm run build will create an optimized build of your app in the build folder.

 
Webpack #

 
Include both DefinePlugin and UglifyJsPlugin into your production Webpack configuration as described in this guide.

-
-

-
Note:

-
-
This guide works with Webpack 1.x and 2, but is hosted on the new Webpack 2 site. If you're not using the Webpack 2 beta, refer to the Webpack 1.x website for all other documentation.

-

 
Browserify #

 
Run Browserify with NODE_ENV environment variable set to production and use UglifyJS as the last build step so that development-only code gets stripped out.

 
Rollup #

diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html
index 918e1a6bab..e9d65892b8 100644
--- a/docs/jsx-in-depth.html
+++ b/docs/jsx-in-depth.html
@@ -337,6 +337,8 @@
 
 <div>{null}</div>
 
+<div>{undefined}</div>
+
 <div>{true}</div>

This can be useful to conditionally render React elements. This JSX only renders a <Header /> if showHeader is true:

diff --git a/docs/perf.html b/docs/perf.html index 67b3d3167a..4395b675b3 100644 --- a/docs/perf.html +++ b/docs/perf.html @@ -87,11 +87,12 @@

In addition to giving you an overview of your app's overall performance, Perf is a profiling tool that tells you exactly where you need to put these hooks.

-

See these articles by the Benchling Engineering Team for a in-depth introduction to performance tooling:

+

See these articles for an introduction to React performance tooling:

Development vs. Production Builds #

If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the minified production build. The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.

diff --git a/feed.xml b/feed.xml index 75b1d31178..5c6ad8d972 100644 --- a/feed.xml +++ b/feed.xml @@ -93,7 +93,7 @@ <p>To install React with npm, run:</p> <div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.4.0 react-dom@15.4.0 </code></pre></div> -<p>We recommend using a bundler like <a href="https://webpack.github.io/">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>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/installation.html#development-and-production-versions">compile it in production mode</a>.</p> diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 56153e3f2d..1575467533 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -179,7 +179,7 @@

What We're Building #

Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.

-

If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.

+

If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.

What is React? #

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

@@ -311,6 +311,8 @@

Now we're passing down two props from Board to Square: value and onClick. The latter is a function that Square can call. So let's do that by changing render in Square to have:

<button className="square" onClick={() => this.props.onClick()}>
+  {this.props.value}
+</button>

This means that when the square is clicked, it calls the onClick function that was passed by the parent. The onClick doesn't have any special meaning here, but it's popular to name handler props starting with on and their implementations with handle. Try clicking a square – you should get an error because we haven't defined handleClick yet. Add it to the Board class:

handleClick(i) {
@@ -383,7 +385,10 @@
 }

Now X and O take turns. Next, change the "status" text in Board's render so that it also displays who is next.

-

Declaring a Winner #

+
render() {
+  const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+  ...
+

Declaring a Winner #

Let's show when the game is won. A calculateWinner(squares) helper function that takes the list of 9 values has been provided for you at the bottom of the file. You can call it in Board's render function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins:

render() {
   const winner = calculateWinner(this.state.squares);
@@ -462,7 +467,9 @@
   <ol>{/* TODO */}</ol>
 </div>
-

Its handleClick can push a new entry onto the stack by concatenating the new history entry to make a new history array:

+

Since Game is now rendering the status, we can delete <div className="status">{status}</div> from the Board's render function.

+ +

Game's handleClick can push a new entry onto the stack by concatenating the new history entry to make a new history array:

handleClick(i) {
   const history = this.state.history;
   const current = history[history.length - 1];