From 4c758f484ee305cbcbabbf8fcf44ec2c79c16e19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= Date: Wed, 4 Feb 2015 15:36:53 -0800 Subject: [PATCH] Update to latest Includes #3036, #3032, #3016, #3013, #3011, #3007, #3001, #2999, #2997, #2987, #2969, #2965, #2962, #2961 --- blog/2014/09/24/testing-flux-applications.html | 4 +++- blog/index.html | 2 +- blog/page3/index.html | 4 +++- css/react.css | 2 +- docs/component-api.html | 4 ++-- docs/glossary.html | 13 ++++++++----- docs/jsx-in-depth.html | 4 ++-- docs/multiple-components.html | 2 +- docs/test-utils.html | 3 +++ docs/thinking-in-react.html | 8 +++++++- docs/tooling-integration.html | 6 +++++- docs/tutorial.html | 6 ++---- feed.xml | 2 +- 13 files changed, 39 insertions(+), 21 deletions(-) diff --git a/blog/2014/09/24/testing-flux-applications.html b/blog/2014/09/24/testing-flux-applications.html index 37e962402a..bde3b9f728 100644 --- a/blog/2014/09/24/testing-flux-applications.html +++ b/blog/2014/09/24/testing-flux-applications.html @@ -95,7 +95,9 @@
-

Flux is the application architecture that Facebook uses to build web applications with React. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the basic structure and data flow, more closely examined the dispatcher and action creators, and shown how to put it all together with a tutorial. Now let's look at how to do formal unit testing of Flux applications with Jest, Facebook's auto-mocking testing framework.

+

A more up-to-date version of this post is available as part of the Flux documentation.

+ +

Flux is the application architecture that Facebook uses to build web applications with React. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the basic structure and data flow, more closely examined the dispatcher and action creators, and shown how to put it all together with a tutorial. Now let's look at how to do formal unit testing of Flux applications with Jest, Facebook's auto-mocking testing framework.

Testing with Jest #

For a unit test to operate on a truly isolated unit of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our example TodoMVC application.

diff --git a/blog/index.html b/blog/index.html index b6a96c86d3..ef3e865d6d 100644 --- a/blog/index.html +++ b/blog/index.html @@ -116,7 +116,7 @@ React.render(<HelloMessage name="Sebastian" />, mountNode);
-

The API is mostly what you would expect, which the exception for getInitialState. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise getDefaultProps and propTypes are really just properties on the constructor.

+

The API is mostly what you would expect, with the exception for getInitialState. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise getDefaultProps and propTypes are really just properties on the constructor.

export class Counter extends React.Component {
   constructor(props) {
     super(props);
diff --git a/blog/page3/index.html b/blog/page3/index.html
index 33c7af868c..19ed1d4cfd 100644
--- a/blog/page3/index.html
+++ b/blog/page3/index.html
@@ -95,7 +95,9 @@
         
September 24, 2014 by Bill Fisher

         

         

-         
Flux is the application architecture that Facebook uses to build web applications with React. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the basic structure and data flow, more closely examined the dispatcher and action creators, and shown how to put it all together with a tutorial. Now let's look at how to do formal unit testing of Flux applications with Jest, Facebook's auto-mocking testing framework.

+         
A more up-to-date version of this post is available as part of the Flux documentation.

+
+
Flux is the application architecture that Facebook uses to build web applications with React. It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the basic structure and data flow, more closely examined the dispatcher and action creators, and shown how to put it all together with a tutorial. Now let's look at how to do formal unit testing of Flux applications with Jest, Facebook's auto-mocking testing framework.

 
Testing with Jest #

 
For a unit test to operate on a truly isolated unit of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our example TodoMVC application.

 
diff --git a/css/react.css b/css/react.css
index 72813861f4..03c92a01f3 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:17px}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}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:#268bd2}.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:#637c84}.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:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.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;font-weight:bold}.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;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.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}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}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px;height:50px;display:inline-block}.nav-main .nav-logo{vertical-align:middle;display:inline-block}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{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{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:6px 0 0 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 .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}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;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}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.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}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{padding-top:20px}.blogContent:after{content:"";display:table;clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{padding-top:20px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);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}.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}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;font-size:0.8em;line-height:1.5}.jsxCompiler .playgroundError{padding:15px 20px}.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:650px}.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}.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;font-size:0.8em;line-height:1.5}div.CodeMirror-linenumber:after{content:'.'}.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}.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:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.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}.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 screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !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}
+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:17px}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}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:#268bd2}.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:#637c84}.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:#cb4b16}.cm-s-solarized-light span.cm-tag{color:#657b83}.cm-s-solarized-light span.cm-attribute{color:#586e75;font-weight:bold}.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;font-weight:bold}.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;min-width:960px}.wrap{width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.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}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}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{float:right;margin:0}.nav-main .nav-site li{margin:0}.nav-main .nav-site a{padding:0 8px;text-transform:uppercase;letter-spacing:1px;line-height:50px;display:inline-block;height:50px;color:#aaa}.nav-main .nav-site a:hover{color:#fafafa}.nav-main .nav-site a.active{color:#fafafa;border-bottom:3px solid #cc7a6f;background:#333}.nav-main .nav-home{color:#00d8ff;font-size:24px;line-height:50px;height:50px;display:inline-block}.nav-main .nav-logo{vertical-align:middle;display:inline-block}.nav-main ul{display:inline}.nav-main li{display:inline}.hero{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{margin-top:60px;text-align:center}.buttons-unit a{color:#61dafb}.buttons-unit .button{font-size:24px;background:#cc7a6f;color:#fafafa}.buttons-unit .button:active{background:#c5695c}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:6px 0 0 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 .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}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;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}.marketing-col h3{color:#2d2d2d;font-size:24px;font-weight:normal;text-transform:uppercase}.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}.docs-prev{float:left}.docs-next{float:right}footer{font-size:13px;font-weight:600;margin-top:36px;margin-bottom:18px;overflow:auto}section.black content{padding-bottom:18px}.blogContent{padding-top:20px}.blogContent:after{content:"";display:table;clear:both}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.documentationContent{padding-top:20px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(204,122,111,0.1);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}.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}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;font-size:13px;line-height:1.5}.jsxCompiler .playgroundError{padding:15px 20px}.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:650px}.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}.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;font-size:13px;line-height:1.5}div.CodeMirror-linenumber:after{content:'.'}.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}.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:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px}.playgroundError{color:#c5695c;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.MarkdownEditor .content{white-space:pre-wrap}.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}.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 screen and (max-width: 960px){.nav-main{position:static}.container{padding-top:0}}.post{margin-bottom:30px}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !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}
diff --git a/docs/component-api.html b/docs/component-api.html
index a46701b29c..a75d2c4779 100644
--- a/docs/component-api.html
+++ b/docs/component-api.html
@@ -403,7 +403,7 @@
 
replaceState #
replaceState(object nextState[, function callback])
 

 
Like setState() but deletes any pre-existing state keys that are not in nextState.

-
forceUpdate() #
forceUpdate([function callback])
+
forceUpdate #
forceUpdate([function callback])
 

 
If your render() method reads from something other than this.props or this.state, you'll need to tell React when it needs to re-run render() by calling forceUpdate(). You'll also need to call forceUpdate() if you mutate this.state directly.

 
@@ -413,7 +413,7 @@
 
getDOMNode #
DOMElement getDOMNode()
 

 
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When render returns null or false, this.getDOMNode() returns null.

-
isMounted() #
bool isMounted()
+
isMounted #
bool isMounted()
 

 
isMounted() returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate().

 
setProps #
setProps(object nextProps[, function callback])
diff --git a/docs/glossary.html b/docs/glossary.html
index 19fcbe0d72..82f8005ffb 100644
--- a/docs/glossary.html
+++ b/docs/glossary.html
@@ -429,11 +429,14 @@
 

 
If you are using JSX you have no need for factories. JSX already provides a convenient short-hand for creating ReactElements.

 
React Nodes #

-
A ReactNode can be either:
-- ReactElement
-- string (aka ReactText)
-- number (aka ReactText)
-- Array of ReactNodes (aka ReactFragment)

+
A ReactNode can be either:

+
+
    
+
  • ReactElement
    • 
+
  • string (aka ReactText)
    • 
+
  • number (aka ReactText)
    • 
+
  • Array of ReactNodes (aka ReactFragment)
    • 
+

 
 
These are used as properties of other ReactElements to represent children. Effectively they create a tree of ReactElements.

 
React Components #

diff --git a/docs/jsx-in-depth.html b/docs/jsx-in-depth.html
index 6bca4287d6..f15c497bb5 100644
--- a/docs/jsx-in-depth.html
+++ b/docs/jsx-in-depth.html
@@ -414,7 +414,7 @@ as XML attribute names. Instead, React DOM components expect DOM property
 names like className and htmlFor, respectively.

 
 
The Transform #

-
React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments to React.createElement.

+
React JSX transforms from an XML-like syntax into native JavaScript. XML elements, attributes and children are transformed into arguments that are passed to React.createElement.

 
var Nav;
 // Input (JSX):
 var app = <Nav color="blue" />;
@@ -484,7 +484,7 @@ ReactElement as an object literal to bypass the validation code in
 MyFormComponent.Label = React.createClass({ ... });
 MyFormComponent.Input = React.createClass({ ... });
 

-
JSX will take care to make the things right when compile your code.

+
JSX will handle this properly when compiling your code.

 
var App = (
   React.createElement(Form, null, 
     React.createElement(Form.Row, null, 
diff --git a/docs/multiple-components.html b/docs/multiple-components.html
index b405bb8d72..82c13c0eb4 100644
--- a/docs/multiple-components.html
+++ b/docs/multiple-components.html
@@ -509,7 +509,7 @@
   }
 });
 

-
You can also key children by passing an object. The object keys will be used as key for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order except for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:

+
You can also key children by passing an object. The object keys will be used as key for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order except for properties that can be parsed as 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:

 
  render: function() {
     var items = {};
 
diff --git a/docs/test-utils.html b/docs/test-utils.html
index 66107a66fc..90b998377d 100644
--- a/docs/test-utils.html
+++ b/docs/test-utils.html
@@ -401,6 +401,9 @@
 
mockComponent #
object mockComponent(function componentClass, string? mockTagName)
 

 
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple <div> (or other tag if mockTagName is provided) containing any provided children.

+
isElement #
boolean isElement(ReactElement element)
+

+
Returns true if element is any ReactElement.

 
isElementOfType #
boolean isElementOfType(ReactElement element, function componentClass)
 

 
Returns true if element is a ReactElement whose type is of a React componentClass.

diff --git a/docs/thinking-in-react.html b/docs/thinking-in-react.html
index e80444ad15..8a9d08c981 100644
--- a/docs/thinking-in-react.html
+++ b/docs/thinking-in-react.html
@@ -387,7 +387,13 @@
 
 
React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

 
-
One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React. Note if you can't see the embeded jsfiddles on this page make sure your browser is pointing to the http version of this page not https

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

+
+

+
Note:

+
+
If you can't see the embedded code snippets on this page, make sure you're NOT loading this page on https.

+

 
Start with a mock #

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

 
diff --git a/docs/tooling-integration.html b/docs/tooling-integration.html
index bf0fefa03b..1988518425 100644
--- a/docs/tooling-integration.html
+++ b/docs/tooling-integration.html
@@ -397,7 +397,11 @@
 
The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.

 
 
Productionizing: Precompiled JSX #

-
If you have npm, you can simply run npm install -g react-tools to install our command-line jsx tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: jsx --watch src/ build/. Run jsx --help for more information on how to use this tool.

+
If you have npm, you can simply run npm install -g react-tools to install our command-line jsx tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: jsx --watch src/ build/.

+
+
By default JSX files with a .js extension are transformed. Use jsx --extension jsx src/ build/ to transform files with a .jsx extension.

+
+
Run jsx --help for more information on how to use this tool.

 
Helpful Open-Source Projects #

 
The open-source community has built tools that integrate JSX with several editors and build systems. See JSX integrations for the full list.

 
diff --git a/docs/tutorial.html b/docs/tutorial.html
index add4af66eb..fee371ab29 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -383,7 +383,7 @@
     
     

 
-    
We'll be building a simple, but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.

+    
We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.

 
 
We'll provide:

 
@@ -691,7 +691,7 @@
 

 
We'll use jQuery to help make an asynchronous request to the server.

 
-
Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. As mentioned above, we have provided serveral servers you can use on GitHub. They provide the functionality you need for the rest of this tutorial.

+
Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. As mentioned above, we have provided several servers you can use on GitHub. They provide the functionality you need for the rest of this tutorial.

 
// tutorial13.js
 var CommentBox = React.createClass({
   getInitialState: function() {
@@ -787,7 +787,6 @@
     // TODO: send request to the server
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
-    return;
   },
   render: function() {
     return (
@@ -857,7 +856,6 @@
     this.props.onCommentSubmit({author: author, text: text});
     this.refs.author.getDOMNode().value = '';
     this.refs.text.getDOMNode().value = '';
-    return;
   },
   render: function() {
     return (
diff --git a/feed.xml b/feed.xml
index 3a47961145..f9b49739b5 100644
--- a/feed.xml
+++ b/feed.xml
@@ -29,7 +29,7 @@
 
 <span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;Sebastian&quot;</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
 </code></pre></div>
-<p>The API is mostly what you would expect, which the exception for <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
+<p>The API is mostly what you would expect, with the exception for <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
 <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
   <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
     <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>