Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild website

Browse Source
This commit is contained in:
Travis CI
2016-01-08 18:33:53 +00:00
parent e97536deb5
commit 58ccca7f75
126 changed files with 2833 additions and 2443 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/05/why-react.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/12/community-roundup.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/19/community-roundup-2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/21/react-v0-3-3.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/27/community-roundup-3.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/03/community-roundup-4.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/17/react-v0-4-0.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/23/community-roundup-5.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/26/react-v0-4-1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/05/community-roundup-6.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/26/community-roundup-7.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/09/24/community-roundup-8.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/03/community-roundup-9.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/16/react-v0.5.0.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/29/react-v0-5-1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/06/community-roundup-10.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/18/community-roundup-11.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/18/react-v0.5.2-v0.4.2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/19/react-v0.8.0.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/23/community-roundup-12.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/30/community-roundup-13.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/02/react-chrome-developer-tools.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/06/community-roundup-14.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/05/community-roundup-15.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/15/community-roundup-16.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/16/react-v0.9-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/20/react-v0.9.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/24/community-roundup-17.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/14/community-roundup-18.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/19/react-v0.10-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/21/react-v0.10.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/28/the-road-to-1.0.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/04/04/reactnet.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/06/flux.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/29/one-year-of-open-source-react.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/06/27/community-roundup-19.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/13/react-v0.11-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/17/react-v0.11.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/25/react-v0.11.1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/28/community-roundup-20.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/30/flux-actions-and-the-dispatcher.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/08/03/community-roundup-21.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/03/introducing-the-jsx-specification.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/12/community-round-up-22.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/16/react-v0.11.2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/24/testing-flux-applications.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/14/introducing-react-elements.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/16/react-v0.12-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/17/community-roundup-23.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/27/react-js-conf.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/28/react-v0.12.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/11/24/react-js-conf-updates.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/11/25/community-roundup-24.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/12/18/react-v0.12.2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/12/19/react-js-conf-diversity-scholarship.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/01/27/react-v0.13.0-beta-1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/18/react-conf-roundup-2015.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/20/introducing-relay-and-graphql.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/24/react-v0.13-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/24/streamlining-react-elements.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/03/react-v0.13-rc2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/04/community-roundup-25.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/10/react-v0.13.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/16/react-v0.13.1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/19/building-the-facebook-news-feed-with-relay.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/26/introducing-react-native.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/30/community-roundup-26.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/04/17/react-native-v0.4.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/04/18/react-v0.13.2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/01/graphql-introduction.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/08/react-v0.13.3.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/22/react-native-release-process.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/06/12/deprecating-jstransform-and-react-tools.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/07/03/react-v0.14-beta-1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/08/03/new-react-devtools-beta.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/08/11/relay-technical-preview.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/08/13/reacteurope-roundup.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/09/02/new-react-developer-tools.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/09/10/react-v0.14-rc1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/09/14/community-roundup-27.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/10/01/react-render-and-top-level-api.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html" class="active">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/10/07/react-v0.14.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html" class="active">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/10/19/reactiflux-is-moving-to-discord.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/10/28/react-v0.14.1.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/11/02/react-v0.14.2.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/11/18/react-v0.14.3.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/12/16/ismounted-antipattern.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/12/18/react-components-elements-and-instances.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html" class="active">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/12/29/react-v0.14.4.html
+2 -2
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html" class="active">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html
+211
View File
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>(A => B) !=> (B => A) | React</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="(A => B) !=> (B => A) | React">
<meta property="og:type" content="website">
<meta property="og:url" content="https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
<meta property="og:description" content="A JavaScript library for building user interfaces">
<meta property="fb:app_id" content="623268441017527">
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script src="//use.typekit.net/vqa1hcx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script src="/react/js/html5shiv.min.js"></script>
<script src="/react/js/es5-shim.min.js"></script>
<script src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script src="/react/js/codemirror.js"></script>
<script src="/react/js/javascript.js"></script>
<script src="/react/js/react.js"></script>
<script src="/react/js/react-dom.js"></script>
<script src="/react/js/babel-browser.min.js"></script>
<script src="/react/js/live_editor.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
React
</a>
<ul class="nav-site nav-site-internal">
<li><a href="/react/docs/getting-started.html">Docs</a></li>
<li><a href="/react/support.html">Support</a></li>
<li><a href="/react/downloads.html">Download</a></li>
<li><a href="/react/blog/" class="active">Blog</a></li>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a></li>
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html" class="active">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
<li><a href="/react/blog/2015/12/16/ismounted-antipattern.html">isMounted is an Antipattern</a></li>
<li><a href="/react/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html">React.js Conf 2016 Diversity Scholarship</a></li>
<li><a href="/react/blog/2015/11/18/react-v0.14.3.html">React v0.14.3</a></li>
<li><a href="/react/blog/2015/11/02/react-v0.14.2.html">React v0.14.2</a></li>
<li><a href="/react/blog/2015/10/28/react-v0.14.1.html">React v0.14.1</a></li>
<li><a href="/react/blog/2015/10/19/reactiflux-is-moving-to-discord.html">Reactiflux is moving to Discord</a></li>
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>
(A => B) !=> (B => A)
</h1>
<p class="meta">
January 8, 2016
by
<a href="http://www.jimsproch.com">Jim Sproch</a>
</p>
<hr>
<div class="post">
<p>The documentation for <code>componentWillReceiveProps</code> states that <code>componentWillReceiveProps</code> will be invoked when the props change as the result of a rerender. Some people assume this means &quot;if <code>componentWillReceiveProps</code> is called, then the props must have changed&quot;, but that conclusion is logically incorrect.</p>
<p>The guiding principle is one of my favorites from formal logic/mathematics:</p>
<blockquote>
<p>A implies B does not imply B implies A</p>
</blockquote>
<p>Example: &quot;If I eat moldy food, then I will get sick&quot; does not imply &quot;if I am sick, then I must have eaten moldy food&quot;. There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that <code>componentWillReceiveProps</code> might get called, even if the props didn’t change.</p>
<p>If you don’t believe me, call <code>ReactDOM.render()</code> three times with the exact same props, and try to predict the number of times <code>componentWillReceiveProps</code> will get called:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">Component</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">componentWillReceiveProps</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentWillReceiveProps&#39;</span><span class="p">,</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Bar</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">}</span><span class="o">!&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;container&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>In this case, the answer is &quot;2&quot;. React calls <code>componentWillReceiveProps</code> twice (once for each of the two updates). Both times, the value of &quot;drinks&quot; is printed (ie. the props didn’t change).</p>
<p>To understand why, we need to think about what <em>could</em> have happened. The data <em>could</em> have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;food&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;noise&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>React has no way of knowing that the data didn’t change. Therefore, React needs to call <code>componentWillReceiveProps</code>, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).</p>
<p>You might think that React could just use smarter checks for equality, but there are some issues with this idea:</p>
<ul>
<li>The old <code>mydata</code> and the new <code>mydata</code> are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).</li>
<li>The <code>mydata</code> object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.</li>
<li>The <code>mydata</code> object might contain references to objects which are re-instantiated during the parent&#39;s render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.</li>
</ul>
<p>Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call <code>componentWillReceiveProps</code> (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.</p>
<p>As a result, your implementation of <code>componentWillReceiveProps</code> MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your <code>componentWillReceiveProps</code> code needs to check to see if the props actually changed.</p>
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">
&copy; 2013&ndash;2016 Facebook Inc.<br>
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
blog/all.html
+7
View File
@@ -65,6 +65,13 @@
<div class="inner-content">
<h1>All Posts</h1>
<p><strong><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></strong> on January 8, 2016 by
Jim Sproch
</p>
<p><strong><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></strong> on December 29, 2015 by
Ben Alpert
blog/index.html
+82 -71
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,86 @@
<div class="post-list-item">
<h1>
<a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a>
</h1>
<p class="meta">
January 8, 2016
by
<a href="http://www.jimsproch.com">Jim Sproch</a>
</p>
<hr>
<div class="post">
<p>The documentation for <code>componentWillReceiveProps</code> states that <code>componentWillReceiveProps</code> will be invoked when the props change as the result of a rerender. Some people assume this means &quot;if <code>componentWillReceiveProps</code> is called, then the props must have changed&quot;, but that conclusion is logically incorrect.</p>
<p>The guiding principle is one of my favorites from formal logic/mathematics:</p>
<blockquote>
<p>A implies B does not imply B implies A</p>
</blockquote>
<p>Example: &quot;If I eat moldy food, then I will get sick&quot; does not imply &quot;if I am sick, then I must have eaten moldy food&quot;. There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that <code>componentWillReceiveProps</code> might get called, even if the props didn’t change.</p>
<p>If you don’t believe me, call <code>ReactDOM.render()</code> three times with the exact same props, and try to predict the number of times <code>componentWillReceiveProps</code> will get called:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">Component</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">componentWillReceiveProps</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentWillReceiveProps&#39;</span><span class="p">,</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Bar</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">bar</span><span class="p">}</span><span class="o">!&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;container&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>In this case, the answer is &quot;2&quot;. React calls <code>componentWillReceiveProps</code> twice (once for each of the two updates). Both times, the value of &quot;drinks&quot; is printed (ie. the props didn’t change).</p>
<p>To understand why, we need to think about what <em>could</em> have happened. The data <em>could</em> have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">mydata</span> <span class="o">=</span> <span class="p">{</span><span class="nx">bar</span><span class="o">:</span> <span class="s1">&#39;drinks&#39;</span><span class="p">};</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;food&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
<span class="nx">mydata</span><span class="p">.</span><span class="nx">bar</span> <span class="o">=</span> <span class="s1">&#39;noise&#39;</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Component</span> <span class="nx">data</span><span class="o">=</span><span class="p">{</span><span class="nx">mydata</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">container</span><span class="p">);</span>
</code></pre></div>
<p>React has no way of knowing that the data didn’t change. Therefore, React needs to call <code>componentWillReceiveProps</code>, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).</p>
<p>You might think that React could just use smarter checks for equality, but there are some issues with this idea:</p>
<ul>
<li>The old <code>mydata</code> and the new <code>mydata</code> are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).</li>
<li>The <code>mydata</code> object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.</li>
<li>The <code>mydata</code> object might contain references to objects which are re-instantiated during the parent&#39;s render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.</li>
</ul>
<p>Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call <code>componentWillReceiveProps</code> (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.</p>
<p>As a result, your implementation of <code>componentWillReceiveProps</code> MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your <code>componentWillReceiveProps</code> code needs to check to see if the props actually changed.</p>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a>
@@ -681,75 +761,6 @@ Minified build for production: <a href="https://fb.me/react-dom-server-0.14.4.mi
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/11/18/react-v0.14.3.html">React v0.14.3</a>
</h1>
<p class="meta">
November 18, 2015
by
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>It&#39;s time for another installment of React patch releases! We didn&#39;t break anything in v0.14.2 but we do have a couple of other bugs we&#39;re fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it&#39;s still valuable to support. So we&#39;re now building <code>react-dom-server.js</code>, which will be shipped to Bower and in the <code>dist/</code> directory of the <code>react-dom</code> package on npm. This file works the same way as <code>react-dom.js</code> and therefore requires that the primary React build has already been included on the page.</p>
<p>The release is now available for download:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.14.3.js">https://fb.me/react-0.14.3.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.14.3.min.js">https://fb.me/react-0.14.3.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.14.3.js">https://fb.me/react-with-addons-0.14.3.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.14.3.min.js">https://fb.me/react-with-addons-0.14.3.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-0.14.3.js">https://fb.me/react-dom-0.14.3.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-0.14.3.min.js">https://fb.me/react-dom-0.14.3.min.js</a><br></li>
<li><strong>React DOM Server</strong> (include React in the page before React DOM Server)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-server-0.14.3.js">https://fb.me/react-dom-server-0.14.3.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-server-0.14.3.min.js">https://fb.me/react-dom-server-0.14.3.min.js</a><br></li>
</ul>
<p>We&#39;ve also published version <code>0.14.3</code> of the <code>react</code>, <code>react-dom</code>, and addons packages on npm and the <code>react</code> package on bower.</p>
<hr>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-dom"></a>React DOM <a class="hash-link" href="#react-dom">#</a></h3>
<ul>
<li>Added support for <code>nonce</code> attribute for <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> elements</li>
<li>Added support for <code>reversed</code> attribute for <code>&lt;ol&gt;</code> elements</li>
</ul>
<h3><a class="anchor" name="react-testutils-add-on"></a>React TestUtils Add-on <a class="hash-link" href="#react-testutils-add-on">#</a></h3>
<ul>
<li>Fixed bug with shallow rendering and function refs</li>
</ul>
<h3><a class="anchor" name="react-csstransitiongroup-add-on"></a>React CSSTransitionGroup Add-on <a class="hash-link" href="#react-csstransitiongroup-add-on">#</a></h3>
<ul>
<li>Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly</li>
</ul>
<h3><a class="anchor" name="react-on-bower"></a>React on Bower <a class="hash-link" href="#react-on-bower">#</a></h3>
<ul>
<li>Added <code>react-dom-server.js</code> to expose <code>renderToString</code> and <code>renderToStaticMarkup</code> for usage in the browser</li>
</ul>
</div>
</div>
blog/page10/index.html
+297 -57
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,301 @@
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/09/24/testing-flux-applications.html">Testing Flux Applications</a>
</h1>
<p class="meta">
September 24, 2014
by
<a href="https://twitter.com/fisherwebdev">Bill Fisher</a>
</p>
<hr>
<div class="post">
<p><strong>A more up-to-date version of this post is available as part of the <a href="https://facebook.github.io/flux/docs/testing-flux-applications.html">Flux documentation</a>.</strong></p>
<p><a href="https://facebook.github.io/flux/">Flux</a> is the application architecture that Facebook uses to build web applications with <a href="/react/">React</a>. It&#39;s based on a unidirectional data flow. In previous blog posts and documentation articles, we&#39;ve shown the <a href="https://facebook.github.io/flux/docs/overview.html">basic structure and data flow</a>, more closely examined the <a href="/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">dispatcher and action creators</a>, and shown how to put it all together with a <a href="https://facebook.github.io/flux/docs/todo-list.html">tutorial</a>. Now let&#39;s look at how to do formal unit testing of Flux applications with <a href="https://facebook.github.io/jest/">Jest</a>, Facebook&#39;s auto-mocking testing framework.</p>
<h2><a class="anchor" name="testing-with-jest"></a>Testing with Jest <a class="hash-link" href="#testing-with-jest">#</a></h2>
<p>For a unit test to operate on a truly isolated <em>unit</em> 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&#39;ll return to our <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">example TodoMVC application</a>.</p>
<p>The first steps toward working with Jest are as follows:</p>
<ol>
<li>Get the module dependencies for the application installed by running <code>npm install</code>.</li>
<li>Create a directory <code>__tests__/</code> with a test file, in this case TodoStore-test.js</li>
<li>Run <code>npm install jest-cli —save-dev</code></li>
<li>Add the following to your package.json</li>
</ol>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
<span class="p">...</span>
<span class="s2">&quot;scripts&quot;</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;test&quot;</span><span class="o">:</span> <span class="s2">&quot;jest&quot;</span>
<span class="p">}</span>
<span class="p">...</span>
<span class="p">}</span>
</code></pre></div>
<p>Now you&#39;re ready to run your tests from the command line with <code>npm test</code>.</p>
<p>By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest&#39;s <code>dontMock()</code> method.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;TodoStore&#39;</span><span class="p">);</span>
</code></pre></div>
<p>This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.</p>
<h2><a class="anchor" name="testing-stores"></a>Testing Stores <a class="hash-link" href="#testing-stores">#</a></h2>
<p>At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it&#39;s not entirely obvious how to test them.</p>
<p>By design, stores can&#39;t be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.</p>
<p>We therefore need to simulate the Flux data flow with this <em>one weird trick</em>.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">mockRegister</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">mockRegisterInfo</span> <span class="o">=</span> <span class="nx">mockRegister</span><span class="p">.</span><span class="nx">mock</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">callsToRegister</span> <span class="o">=</span> <span class="nx">mockRegisterInfo</span><span class="p">.</span><span class="nx">calls</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">firstCall</span> <span class="o">=</span> <span class="nx">callsToRegister</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">firstArgument</span> <span class="o">=</span> <span class="nx">firstCall</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">callback</span> <span class="o">=</span> <span class="nx">firstArgument</span><span class="p">;</span>
</code></pre></div>
<p>We now have the store&#39;s registered callback, the sole mechanism by which data can enter the store.</p>
<p>For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let&#39;s look at each part of it a bit more closely. We start out by looking at the <code>register()</code> method of our application&#39;s dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the <code>register()</code> method just as we would normally refer to that method in our production code. But we can get additional information about that method with the <code>mock</code> <em>property</em> of that method. We don&#39;t often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to <code>register()</code> is available with the <code>calls</code> property of <code>mock</code>, and each of these calls has a list of the arguments that were used in each method call.</p>
<p>So in this code, we are really saying, &quot;Give me a reference to the first argument of the first call to MyDispatcher&#39;s <code>register()</code> method.&quot; That first argument is the store&#39;s callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">callback</span> <span class="o">=</span> <span class="nx">MyDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
</code></pre></div>
<p>We can invoke that callback whenever we like, independent of our application&#39;s dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we&#39;ll create directly in our test.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">payload</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">payload</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="putting-it-all-together"></a>Putting it All Together <a class="hash-link" href="#putting-it-all-together">#</a></h2>
<p>The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let&#39;s look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store&#39;s registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;../TodoStore&#39;</span><span class="p">);</span>
<span class="nx">jest</span><span class="p">.</span><span class="nx">dontMock</span><span class="p">(</span><span class="s1">&#39;react/lib/merge&#39;</span><span class="p">);</span>
<span class="nx">describe</span><span class="p">(</span><span class="s1">&#39;TodoStore&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">TodoConstants</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../constants/TodoConstants&#39;</span><span class="p">);</span>
<span class="c1">// mock actions inside dispatch payloads</span>
<span class="kd">var</span> <span class="nx">actionTodoCreate</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_CREATE</span><span class="p">,</span>
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">actionTodoDestroy</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_DESTROY</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;replace me in test&#39;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">AppDispatcher</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">TodoStore</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">callback</span><span class="p">;</span>
<span class="nx">beforeEach</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../dispatcher/AppDispatcher&#39;</span><span class="p">);</span>
<span class="nx">TodoStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../TodoStore&#39;</span><span class="p">);</span>
<span class="nx">callback</span> <span class="o">=</span> <span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">];</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;registers a callback with the dispatcher&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">AppDispatcher</span><span class="p">.</span><span class="nx">register</span><span class="p">.</span><span class="nx">mock</span><span class="p">.</span><span class="nx">calls</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;initializes with no to-do items&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">({});</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;creates a to-do item&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]].</span><span class="nx">text</span><span class="p">).</span><span class="nx">toEqual</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">it</span><span class="p">(</span><span class="s1">&#39;destroys a to-do item&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoCreate</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">all</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">keys</span><span class="p">.</span><span class="nx">length</span><span class="p">).</span><span class="nx">toBe</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">actionTodoDestroy</span><span class="p">.</span><span class="nx">action</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">actionTodoDestroy</span><span class="p">);</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">all</span><span class="p">[</span><span class="nx">keys</span><span class="p">[</span><span class="mi">0</span><span class="p">]]).</span><span class="nx">toBeUndefined</span><span class="p">();</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div>
<p>You can take a look at all this code in the <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js">TodoStore&#39;s tests on GitHub</a> as well. </p>
<h2><a class="anchor" name="mocking-data-derived-from-other-stores"></a>Mocking Data Derived from Other Stores <a class="hash-link" href="#mocking-data-derived-from-other-stores">#</a></h2>
<p>Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we&#39;ll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyOtherStore</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../MyOtherStore&#39;</span><span class="p">);</span>
<span class="nx">MyOtherStore</span><span class="p">.</span><span class="nx">getState</span><span class="p">.</span><span class="nx">mockReturnValue</span><span class="p">({</span>
<span class="s1">&#39;123&#39;</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;123&#39;</span><span class="p">,</span>
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;foo&#39;</span>
<span class="p">},</span>
<span class="s1">&#39;456&#39;</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">id</span><span class="o">:</span> <span class="s1">&#39;456&#39;</span><span class="p">,</span>
<span class="nx">text</span><span class="o">:</span> <span class="s1">&#39;bar&#39;</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store&#39;s registered callback.</p>
<p>A brief example of this technique is up on GitHub within the Flux Chat example&#39;s <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js">UnreadThreadStore-test.js</a>.</p>
<p>For more information about the <code>mock</code> property of mocked methods or Jest&#39;s ability to provide custom mock values, see Jest&#39;s documentation on <a href="https://facebook.github.io/jest/docs/mock-functions.html">mock functions</a>.</p>
<h2><a class="anchor" name="moving-logic-from-react-to-stores"></a>Moving Logic from React to Stores <a class="hash-link" href="#moving-logic-from-react-to-stores">#</a></h2>
<p>What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application&#39;s behavior, and when application logic slips into our view layer, this becomes more difficult.</p>
<p>For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the &quot;Mark all as complete&quot; checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection&#39;s <code>render()</code> method:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">allTodos</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">allTodos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">allChecked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">...</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;main&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">input</span>
<span class="nx">id</span><span class="o">=</span><span class="s2">&quot;toggle-all&quot;</span>
<span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span>
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="nx">allChecked</span> <span class="o">?</span> <span class="s1">&#39;checked&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span>
<span class="o">/&gt;</span>
<span class="p">...</span>
<span class="o">&lt;</span><span class="err">/section&gt;</span>
<span class="p">);</span>
</code></pre></div>
<p>While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can&#39;t be described in our spec-style TodoStore test. Let&#39;s take that logic and move it to the store. First, we&#39;ll create a public method on the store that will encapsulate that logic:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">areAllComplete</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="nx">_todos</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_todos</span><span class="p">[</span><span class="nx">id</span><span class="p">].</span><span class="nx">complete</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">},</span>
</code></pre></div>
<p>Now we have the application logic where it belongs, and we can write the following test:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">it</span><span class="p">(</span><span class="s1">&#39;determines whether all to-do items are complete&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">mockTodoCreate</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">all</span> <span class="o">=</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">();</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">all</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callback</span><span class="p">({</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_COMPLETE</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="nx">callback</span><span class="p">({</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">actionType</span><span class="o">:</span> <span class="nx">TodoConstants</span><span class="p">.</span><span class="nx">TODO_UNDO_COMPLETE</span><span class="p">,</span>
<span class="nx">id</span><span class="o">:</span> <span class="nx">key</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">expect</span><span class="p">(</span><span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()).</span><span class="nx">toBe</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div>
<p>Finally, we revise our view layer. We&#39;ll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">getTodoState</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">allTodos</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">getAll</span><span class="p">(),</span>
<span class="nx">areAllComplete</span><span class="o">:</span> <span class="nx">TodoStore</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">()</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">TodoApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="p">...</span>
<span class="cm">/**</span>
<span class="cm"> * @return {object}</span>
<span class="cm"> */</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p">...</span>
<span class="o">&lt;</span><span class="nx">MainSection</span>
<span class="nx">allTodos</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">allTodos</span><span class="p">}</span>
<span class="nx">areAllComplete</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">areAllComplete</span><span class="p">}</span>
<span class="o">/&gt;</span>
<span class="p">...</span>
<span class="p">);</span>
<span class="p">},</span>
<span class="cm">/**</span>
<span class="cm"> * Event handler for &#39;change&#39; events coming from the TodoStore</span>
<span class="cm"> */</span>
<span class="nx">_onChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">getTodoState</span><span class="p">());</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>And then we&#39;ll utilize that property for the rendering of the checkbox.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="p">...</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">section</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;main&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">input</span>
<span class="nx">id</span><span class="o">=</span><span class="s2">&quot;toggle-all&quot;</span>
<span class="nx">type</span><span class="o">=</span><span class="s2">&quot;checkbox&quot;</span>
<span class="nx">checked</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">areAllComplete</span> <span class="o">?</span> <span class="s1">&#39;checked&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span>
<span class="o">/&gt;</span>
<span class="p">...</span>
<span class="o">&lt;</span><span class="err">/section&gt;</span>
<span class="p">);</span>
<span class="p">},</span>
</code></pre></div>
<p>To learn how to test React components themselves, check out the <a href="https://facebook.github.io/jest/docs/tutorial-react.html">Jest tutorial for React</a> and the <a href="/react/docs/test-utils.html">ReactTestUtils documentation</a>.</p>
<h2><a class="anchor" name="further-reading"></a>Further Reading <a class="hash-link" href="#further-reading">#</a></h2>
<ul>
<li><a href="http://martinfowler.com/articles/mocksArentStubs.html">Mocks Aren&#39;t Stubs</a> by Martin Fowler</li>
<li><a href="https://facebook.github.io/jest/docs/api.html">Jest API Reference</a></li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/09/16/react-v0.11.2.html">React v0.11.2</a>
@@ -425,61 +720,6 @@ This is not the intended way to use React but can be useful as last resort if yo
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">Flux: Actions and the Dispatcher</a>
</h1>
<p class="meta">
July 30, 2014
by
<a href="https://twitter.com/fisherwebdev">Bill Fisher</a>
</p>
<hr>
<div class="post">
<p>Flux is the application architecture Facebook uses to build JavaScript applications. It&#39;s based on a unidirectional data flow. We&#39;ve built everything from small widgets to huge applications with Flux, and it&#39;s handled everything we&#39;ve thrown at it. Because we&#39;ve found it to be a great way to structure our code, we&#39;re excited to share it with the open source community. <a href="http://youtu.be/nYkdrAPrdcw?t=10m20s">Jing Chen presented Flux</a> at the F8 conference, and since that time we&#39;ve seen a lot of interest in it. We&#39;ve also published an <a href="https://facebook.github.io/flux/docs/overview.html">overview of Flux</a> and a <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/">TodoMVC example</a>, with an accompanying <a href="https://facebook.github.io/flux/docs/todo-list.html">tutorial</a>.</p>
<p>Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven&#39;t released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new <a href="https://github.com/facebook/flux">Flux code repository</a> and <a href="https://facebook.github.io/flux/">Flux website</a>, we&#39;ve now open sourced the same <a href="https://facebook.github.io/flux/docs/dispatcher.html">dispatcher</a> we use in our production applications.</p>
<h2><a class="anchor" name="where-the-dispatcher-fits-in-the-flux-data-flow"></a>Where the Dispatcher Fits in the Flux Data Flow <a class="hash-link" href="#where-the-dispatcher-fits-in-the-flux-data-flow">#</a></h2>
<p>The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each <em>store</em> registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.</p>
<h2><a class="anchor" name="actions-and-actioncreators"></a>Actions and ActionCreators <a class="hash-link" href="#actions-and-actioncreators">#</a></h2>
<p>When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an <em>action</em> — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.</p>
<p>Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.</p>
<p>Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the <a href="https://en.wikipedia.org/wiki/Law_of_Demeter">Law of Demeter</a>, the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.</p>
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.</p>
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
<p>Further, the waitFor() method may be used in different ways for different actions, within the same store&#39;s callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.</p>
<p>Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.</p>
<h2><a class="anchor" name="example-chat-app"></a>Example Chat App <a class="hash-link" href="#example-chat-app">#</a></h2>
<p>Along with the same dispatcher that Facebook uses in its production applications, we&#39;ve also published a new example <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat">chat app</a>, slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.</p>
<p>We&#39;re hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!</p>
</div>
</div>
blog/page11/index.html
+57 -74
View File
@@ -67,6 +67,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
@@ -85,8 +87,6 @@
<li><a href="/react/blog/2015/10/07/react-v0.14.html">React v0.14</a></li>
<li><a href="/react/blog/2015/10/01/react-render-and-top-level-api.html">ReactDOM.render and the Top Level React API</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,61 @@
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html">Flux: Actions and the Dispatcher</a>
</h1>
<p class="meta">
July 30, 2014
by
<a href="https://twitter.com/fisherwebdev">Bill Fisher</a>
</p>
<hr>
<div class="post">
<p>Flux is the application architecture Facebook uses to build JavaScript applications. It&#39;s based on a unidirectional data flow. We&#39;ve built everything from small widgets to huge applications with Flux, and it&#39;s handled everything we&#39;ve thrown at it. Because we&#39;ve found it to be a great way to structure our code, we&#39;re excited to share it with the open source community. <a href="http://youtu.be/nYkdrAPrdcw?t=10m20s">Jing Chen presented Flux</a> at the F8 conference, and since that time we&#39;ve seen a lot of interest in it. We&#39;ve also published an <a href="https://facebook.github.io/flux/docs/overview.html">overview of Flux</a> and a <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/">TodoMVC example</a>, with an accompanying <a href="https://facebook.github.io/flux/docs/todo-list.html">tutorial</a>.</p>
<p>Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven&#39;t released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new <a href="https://github.com/facebook/flux">Flux code repository</a> and <a href="https://facebook.github.io/flux/">Flux website</a>, we&#39;ve now open sourced the same <a href="https://facebook.github.io/flux/docs/dispatcher.html">dispatcher</a> we use in our production applications.</p>
<h2><a class="anchor" name="where-the-dispatcher-fits-in-the-flux-data-flow"></a>Where the Dispatcher Fits in the Flux Data Flow <a class="hash-link" href="#where-the-dispatcher-fits-in-the-flux-data-flow">#</a></h2>
<p>The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each <em>store</em> registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.</p>
<h2><a class="anchor" name="actions-and-actioncreators"></a>Actions and ActionCreators <a class="hash-link" href="#actions-and-actioncreators">#</a></h2>
<p>When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an <em>action</em> — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.</p>
<p>Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.</p>
<p>Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the <a href="https://en.wikipedia.org/wiki/Law_of_Demeter">Law of Demeter</a>, the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.</p>
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.</p>
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
<p>Further, the waitFor() method may be used in different ways for different actions, within the same store&#39;s callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.</p>
<p>Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.</p>
<h2><a class="anchor" name="example-chat-app"></a>Example Chat App <a class="hash-link" href="#example-chat-app">#</a></h2>
<p>Along with the same dispatcher that Facebook uses in its production applications, we&#39;ve also published a new example <a href="https://github.com/facebook/flux/tree/master/examples/flux-chat">chat app</a>, slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.</p>
<p>We&#39;re hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!</p>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/07/28/community-roundup-20.html">Community Round-up #20</a>
@@ -595,78 +650,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.11.0-r
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a>
</h1>
<p class="meta">
June 27, 2014
by
<a href="https://twitter.com/_chenglou">Cheng Lou</a>
</p>
<hr>
<div class="post">
<h2><a class="anchor" name="react-meetups"></a>React Meetups! <a class="hash-link" href="#react-meetups">#</a></h2>
<p>Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in <a href="http://www.meetup.com/ReactJS-San-Francisco/">San Francisco</a> (courtesy of <a href="http://www.telmate.com">Telmate</a>), and one in <a href="http://www.meetup.com/London-React-User-Group/">London</a> (courtesy of <a href="http://www.meetup.com/London-React-User-Group/members/105837542/">Stuart Harris</a>, <a href="http://www.meetup.com/London-React-User-Group/members/15509971/">Cain Ullah</a> and <a href="http://www.meetup.com/London-React-User-Group/members/137058242/">Zoe Merchant</a>). These two events have been big successes; a second one in London is <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">already planned</a>.</p>
<p>If you don&#39;t live near San Francisco or London, why not start one in your community?</p>
<h2><a class="anchor" name="complementary-tools"></a>Complementary Tools <a class="hash-link" href="#complementary-tools">#</a></h2>
<p>In case you haven&#39;t seen it, we&#39;ve consolidated the tooling solution around React on <a href="https://github.com/facebook/react/wiki/Complementary-Tools">this wiki page</a>. Some of the notable recent entries include:</p>
<ul>
<li><p><a href="https://github.com/rpflorence">Ryan Florence</a> and <a href="https://github.com/mjackson">Michael Jackson</a>&#39;s <a href="https://github.com/rpflorence/react-nested-router">react-nested-router</a>, which is a translation of the Ember router API to React.</p></li>
<li><p><a href="https://github.com/stevoland">Stephen J. Collings</a>&#39;s <a href="https://github.com/react-bootstrap/react-bootstrap">react-bootstrap</a>, which wraps the popular framework with a bit of React goodness. The <a href="https://react-bootstrap.github.io/components.html">website</a> features live-editable demos.</p></li>
<li><p><a href="https://github.com/andreypopp">Andrey Popp</a>&#39;s <a href="https://github.com/andreypopp/react-quickstart">react-quickstart</a>, which gives you a quick template for server-side rendering and routing, among other features.</p></li>
</ul>
<p>These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!</p>
<h2><a class="anchor" name="react-in-interesting-places"></a>React in Interesting Places <a class="hash-link" href="#react-in-interesting-places">#</a></h2>
<p>The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn&#39;t have imagined something like <a href="http://rigsomelight.com">Bruce Hauman</a>&#39;s <a href="http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html">Flappy Bird ClojureScript port</a>, whose interactive programming has been made possible through React:</p>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
<p>And don&#39;t forget <a href="https://github.com/petehunt">Pete Hunt</a>&#39;s Wolfenstein 3D rendering engine in React (<a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">source code</a>). While it&#39;s nearly a year old, it&#39;s still a nice demo.</p>
<p><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></p>
<p>Give us a shoutout on IRC or <a href="https://groups.google.com/forum/#!forum/reactjs">React Google Groups</a> if you&#39;ve used React in some Interesting places.</p>
<h2><a class="anchor" name="even-more-people-using-react"></a>Even More People Using React <a class="hash-link" href="#even-more-people-using-react">#</a></h2><h3><a class="anchor" name="prismatic"></a>Prismatic <a class="hash-link" href="#prismatic">#</a></h3>
<p><a href="http://getprismatic.com/home">Prismatic</a> recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, <a href="https://github.com/swannodette/om">Om</a>. They detailed their very positive experience <a href="http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/">here</a>.</p>
<blockquote>
<p>Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.</p>
</blockquote>
<h3><a class="anchor" name="adobe-brackets"></a>Adobe Brackets <a class="hash-link" href="#adobe-brackets">#</a></h3>
<p><a href="http://www.kevindangoor.com">Kevin Dangoor</a> works on <a href="http://brackets.io/?lang=en">Brackets</a>, the open-source code editor. After writing <a href="http://www.kevindangoor.com/2014/05/simplifying-code-with-react/">his first impression on React</a>, he followed up with another insightful <a href="http://www.kevindangoor.com/2014/05/react-in-brackets/">article</a> on how to gradually make the code transition, how to preserve the editor&#39;s good parts, and how to tune Brackets&#39; tooling around JSX.</p>
<blockquote>
<p>We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.</p>
</blockquote>
<h3><a class="anchor" name="storehouse"></a>Storehouse <a class="hash-link" href="#storehouse">#</a></h3>
<p><a href="https://www.storehouse.co">Storehouse</a> (Apple Design Award 2014)&#39;s web presence is build with React. Here&#39;s <a href="https://www.storehouse.co/stories/y2ad-mexico-city-clouds">an example story</a>. Congratulations on the award!</p>
<h3><a class="anchor" name="vim-awesome"></a>Vim Awesome <a class="hash-link" href="#vim-awesome">#</a></h3>
<p><a href="http://vimawesome.com">Vim Awesome</a>, an open-source Vim plugins directory built on React, was just launched. Be sure to <a href="https://github.com/divad12/vim-awesome">check out the source code</a> if you&#39;re curious to see an example of how to build a small single-page React app.</p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we&#39;ve been doing JS frameworks wrong until now. React makes me happy.</p>&mdash; Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More