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

0.10 blog post

Browse Source
This commit is contained in:
Paul O’Shannessy
2014-03-21 14:55:09 -07:00
parent 7e16bb70b1
commit 8a98319d58
47 changed files with 1028 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/05/thinking-in-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html" class="active">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html" class="active">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</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
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html" class="active">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/19/react-v0.10-rc1.html
+13 -12
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html" class="active">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -100,13 +100,13 @@
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong>
Dev build with warnings: <a href="http://fb.me/react-0.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a>
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0-rc1.js">http://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
</ul>
@@ -137,11 +137,12 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>) - <code>React.renderComponentToStaticMarkup</code></li>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to images at different pixel ratios</li>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
@@ -153,7 +154,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data.</li>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
blog/2014/03/21/react-v0.10.html
+201
View File
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | React v0.10</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | React v0.10" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html" />
<meta property="og:image" content="http://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="http://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 type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<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>
<li><a href="http://github.com/facebook/react">github</a>
</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/2014/03/21/react-v0.10.html" class="active">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
<li><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></li>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>React v0.10</h1>
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
<hr>
<div class="post">
<p>Hot on the heels of the <a href="/react/blog/2014/02/20/react-v0.10rc.html">release candidate earlier this week</a>, we&#39;re ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We&#39;ve copied over the changelog from the RC with some small clarifying changes.</p>
<p>The release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0.js">http://fb.me/react-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0.min.js">http://fb.me/react-0.10.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0.js">http://fb.me/react-with-addons-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.min.js">http://fb.me/react-with-addons-0.10.0.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0.js">http://fb.me/JSXTransformer-0.10.0.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.10.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html"></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; 2014 Facebook Inc.</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
+2
View File
@@ -61,6 +61,8 @@
<div class="inner-content">
<h1>All Posts</h1>
<p><strong><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></strong> on March 21, 2014 by Paul O’Shannessy</p>
<p><strong><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></strong> on March 19, 2014 by Paul O’Shannessy</p>
<p><strong><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></strong> on March 14, 2014 by Jonas Gebhardt</p>
blog/index.html
+87 -138
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,80 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></h1>
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
<hr />
<div class="post">
<p>Hot on the heels of the <a href="/react/blog/2014/02/20/react-v0.10rc.html">release candidate earlier this week</a>, we&#39;re ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We&#39;ve copied over the changelog from the RC with some small clarifying changes.</p>
<p>The release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0.js">http://fb.me/react-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0.min.js">http://fb.me/react-0.10.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0.js">http://fb.me/react-with-addons-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.min.js">http://fb.me/react-with-addons-0.10.0.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0.js">http://fb.me/JSXTransformer-0.10.0.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.10.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></h1>
<p class="meta">March 19, 2014 by Paul O’Shannessy</p>
@@ -100,13 +174,13 @@
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong>
Dev build with warnings: <a href="http://fb.me/react-0.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a>
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0-rc1.js">http://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
</ul>
@@ -137,11 +211,12 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>) - <code>React.renderComponentToStaticMarkup</code></li>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to images at different pixel ratios</li>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
@@ -153,7 +228,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data.</li>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
@@ -436,132 +511,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
<p class="meta">February 16, 2014 by Ben Alpert</p>
<hr />
<div class="post">
<p>We&#39;re almost ready to release React v0.9! We&#39;re posting a release candidate so that you can test your apps on it; we&#39;d much prefer to find show-stopping bugs now rather than after we release.</p>
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.9.0-rc1.js">http://fb.me/react-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.9.0-rc1.min.js">http://fb.me/react-0.9.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0-rc1.js">http://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1.min.js">http://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.9.0-rc1.js">http://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{&quot;Monkeys: &quot;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:
<ul>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>
</div>
</div>
<div class="pagination">
blog/page2/index.html
+128 -99
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,132 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
<p class="meta">February 16, 2014 by Ben Alpert</p>
<hr />
<div class="post">
<p>We&#39;re almost ready to release React v0.9! We&#39;re posting a release candidate so that you can test your apps on it; we&#39;d much prefer to find show-stopping bugs now rather than after we release.</p>
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.9.0-rc1.js">http://fb.me/react-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.9.0-rc1.min.js">http://fb.me/react-0.9.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0-rc1.js">http://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1.min.js">http://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.9.0-rc1.js">http://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{&quot;Monkeys: &quot;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:
<ul>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
@@ -364,103 +490,6 @@ rails s
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></h1>
<p class="meta">December 30, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!</p>
<h2><a class="anchor" name="react-touch"></a>React Touch <a class="hash-link" href="#react-touch">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.</p>
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
<p><a href="http://petehunt.github.io/react-touch/">Try out the demos!</a></p>
<h2><a class="anchor" name="introduction-to-react"></a>Introduction to React <a class="hash-link" href="#introduction-to-react">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.</p>
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="jsx-e4x-the-good-parts"></a>JSX: E4X The Good Parts <a class="hash-link" href="#jsx-e4x-the-good-parts">#</a></h2>
<p>JSX is often compared to the now defunct E4X, <a href="http://blog.vjeux.com/">Vjeux</a> went over all the E4X features and explained how JSX is different and hopefully doesn&#39;t repeat the same mistakes.</p>
<blockquote>
<p>E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I&#39;m going to go over all the features of E4X and explain the design decisions behind JSX.</p>
<p><strong>Historical Context</strong></p>
<p>E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.</p>
<p><a href="http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html">Continue reading ...</a></p>
</blockquote>
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</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">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">nodePath</span><span class="p">(</span><span class="nx">root</span><span class="p">);</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeHandler</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">componentWillUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="p">,</span> <span class="nx">state</span><span class="o">:</span> <span class="nx">state</span> <span class="p">});</span>
<span class="p">},</span>
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">removeListener</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">change</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<span class="nx">MyComponent</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* myapp.js */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-tools/build/modules/React&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">Styles</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./styles.css&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">Styles</span><span class="p">.</span><span class="nx">MyComponent</span><span class="p">}</span><span class="o">&gt;</span>
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span>
<span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="p">)</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p><a href="https://github.com/andreypopp/cssobjectify">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="ngreact"></a>ngReact <a class="hash-link" href="#ngreact">#</a></h2>
<p><a href="http://davidandsuzi.com/">David Chang</a> working at <a href="http://www.hasoffers.com/">HasOffer</a> wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular&#39;s transclusion it is 450% slower.</p>
<blockquote>
<p>Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that&#39;s 67% faster). You&#39;ll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it&#39;s 433ms, which is more than half of the total time!
<figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/react/img/blog/ngreact.png" alt=""></a></figure></p>
<p><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="vim-jsx"></a>vim-jsx <a class="hash-link" href="#vim-jsx">#</a></h2>
<p><a href="https://github.com/mxw">Max Wang</a> made a vim syntax highlighting and indentation plugin for vim.</p>
<blockquote>
<p>Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.</p>
<p>This bundle requires pangloss&#39;s <a href="https://github.com/pangloss/vim-javascript">vim-javascript</a> syntax highlighting.</p>
<p>Vim support for inline XML in JS is remarkably similar to the same for PHP.</p>
<p><a href="https://github.com/mxw/vim-jsx">View on GitHub...</a></p>
</blockquote>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p><center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center></p>
</div>
</div>
<div class="pagination">
blog/page3/index.html
+99 -119
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,103 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></h1>
<p class="meta">December 30, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!</p>
<h2><a class="anchor" name="react-touch"></a>React Touch <a class="hash-link" href="#react-touch">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.</p>
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
<p><a href="http://petehunt.github.io/react-touch/">Try out the demos!</a></p>
<h2><a class="anchor" name="introduction-to-react"></a>Introduction to React <a class="hash-link" href="#introduction-to-react">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.</p>
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="jsx-e4x-the-good-parts"></a>JSX: E4X The Good Parts <a class="hash-link" href="#jsx-e4x-the-good-parts">#</a></h2>
<p>JSX is often compared to the now defunct E4X, <a href="http://blog.vjeux.com/">Vjeux</a> went over all the E4X features and explained how JSX is different and hopefully doesn&#39;t repeat the same mistakes.</p>
<blockquote>
<p>E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I&#39;m going to go over all the features of E4X and explain the design decisions behind JSX.</p>
<p><strong>Historical Context</strong></p>
<p>E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.</p>
<p><a href="http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html">Continue reading ...</a></p>
</blockquote>
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</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">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">root</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">=</span> <span class="nx">utils</span><span class="p">.</span><span class="nx">nodePath</span><span class="p">(</span><span class="nx">root</span><span class="p">);</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeHandler</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">componentWillUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">state</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">path</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span><span class="p">,</span> <span class="nx">state</span><span class="o">:</span> <span class="nx">state</span> <span class="p">});</span>
<span class="p">},</span>
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">socket</span><span class="p">.</span><span class="nx">removeListener</span><span class="p">(</span><span class="s1">&#39;component-change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">change</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<span class="nx">MyComponent</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/* myapp.js */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-tools/build/modules/React&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">Styles</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./styles.css&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">Styles</span><span class="p">.</span><span class="nx">MyComponent</span><span class="p">}</span><span class="o">&gt;</span>
<span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!</span>
<span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="p">)</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p><a href="https://github.com/andreypopp/cssobjectify">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="ngreact"></a>ngReact <a class="hash-link" href="#ngreact">#</a></h2>
<p><a href="http://davidandsuzi.com/">David Chang</a> working at <a href="http://www.hasoffers.com/">HasOffer</a> wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular&#39;s transclusion it is 450% slower.</p>
<blockquote>
<p>Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that&#39;s 67% faster). You&#39;ll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it&#39;s 433ms, which is more than half of the total time!
<figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="/react/img/blog/ngreact.png" alt=""></a></figure></p>
<p><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="vim-jsx"></a>vim-jsx <a class="hash-link" href="#vim-jsx">#</a></h2>
<p><a href="https://github.com/mxw">Max Wang</a> made a vim syntax highlighting and indentation plugin for vim.</p>
<blockquote>
<p>Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.</p>
<p>This bundle requires pangloss&#39;s <a href="https://github.com/pangloss/vim-javascript">vim-javascript</a> syntax highlighting.</p>
<p>Vim support for inline XML in JS is remarkably similar to the same for PHP.</p>
<p><a href="https://github.com/mxw/vim-jsx">View on GitHub...</a></p>
</blockquote>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p><center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>&mdash; Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center></p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
<p class="meta">December 23, 2013 by Vjeux</p>
@@ -320,123 +417,6 @@ Is this some sort of template language? Specifically no. This might have been th
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></h1>
<p class="meta">November 6, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>
<p>The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.</p>
<h2><a class="anchor" name="khan-academy---officially-moving-to-react"></a>Khan Academy - Officially moving to React <a class="hash-link" href="#khan-academy---officially-moving-to-react">#</a></h2>
<p><a href="http://joelburget.com/">Joel Burget</a> announced at Hack Reactor that new front-end code at Khan Academy should be written in React!</p>
<blockquote>
<p>How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren&#39;t looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.</p>
<p>Since the first React checkin on June 5, we&#39;ve somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that&#39;s a lot of code - but also really exciting that it was picked up so quickly.</p>
<p>We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.</p>
<p>I&#39;m excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We&#39;re trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we&#39;ve done is introduce more fragmentation. We won&#39;t be gratuitously updating working code (if it ain&#39;t broke, don&#39;t fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.</p>
<p><a href="http://joelburget.com/backbone-to-react/">Read the full article</a></p>
</blockquote>
<h2><a class="anchor" name="react-rethinking-best-practices"></a>React: Rethinking best practices <a class="hash-link" href="#react-rethinking-best-practices">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a>&#39;s talk at JSConf EU 2013 is now available in video.</p>
<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="server-side-react-with-php"></a>Server-side React with PHP <a class="hash-link" href="#server-side-react-with-php">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a>&#39;s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.</p>
<blockquote>
<p>This post is an initial hack to have React components render server-side in PHP.</p>
<ul>
<li>Problem: Build web UIs</li>
<li>Solution: React</li>
<li>Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)</li>
<li>Solution: <a href="https://github.com/facebook/react-page">React page</a> to render the first view</li>
<li>Problem: Can&#39;t host node.js apps / I have tons of PHP code</li>
<li>Solution: Use PHP then!</li>
</ul>
<p><a href="http://www.phpied.com/server-side-react-with-php/"><strong>Read part 1 ...</strong></a></p>
<p><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><strong>Read part 2 ...</strong></a></p>
<p>Rendered markup on the server:
<figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/react/img/blog/react-php.png" alt=""></a></figure></p>
</blockquote>
<h2><a class="anchor" name="todomvc-benchmarks"></a>TodoMVC Benchmarks <a class="hash-link" href="#todomvc-benchmarks">#</a></h2>
<p>Webkit has a <a href="https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench">TodoMVC Benchmark</a> that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):</p>
<ul>
<li><strong>AngularJS:</strong> 4043ms</li>
<li><strong>AngularJSPerf:</strong> 3227ms</li>
<li><strong>BackboneJS:</strong> 1874ms</li>
<li><strong>EmberJS:</strong> 6822ms</li>
<li><strong>jQuery:</strong> 14628ms</li>
<li><strong>React:</strong> 2864ms</li>
<li><strong>VanillaJS:</strong> 5567ms</li>
</ul>
<p><a href="http://www.petehunt.net/react/tastejs/benchmark.html">Try it yourself!</a></p>
<p>Please don&#39;t take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn&#39;t written with performance in mind.</p>
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
<span class="cm"> * of how little code it takes to get an order of magnitude performance improvement.</span>
<span class="cm"> */</span>
<span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</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">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">||</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</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">todo</span> <span class="o">||</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">editing</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">editing</span> <span class="o">||</span>
<span class="nx">nextState</span><span class="p">.</span><span class="nx">editText</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">editText</span>
<span class="p">);</span>
<span class="p">},</span>
</code></pre></div>
<p>By default, React &quot;re-renders&quot; all the components when anything changes. This is usually fast enough that you don&#39;t need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.</p>
<p>The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.</p>
<h2><a class="anchor" name="guess-the-filter"></a>Guess the filter <a class="hash-link" href="#guess-the-filter">#</a></h2>
<p><a href="http://conr.me">Connor McSheffrey</a> implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
<figure><a href="http://guessthefilter.com/"><img src="/react/img/blog/guess_filter.jpg" alt=""></a></figure></p>
<h2><a class="anchor" name="react-vs-fruitmachine"></a>React vs FruitMachine <a class="hash-link" href="#react-vs-fruitmachine">#</a></h2>
<p><a href="http://trib.tv/">Andrew Betts</a>, director of the <a href="http://labs.ft.com/">Financial Times Labs</a>, posted an article comparing <a href="https://github.com/ftlabs/fruitmachine">FruitMachine</a> and React.</p>
<blockquote>
<p>Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We&#39;re graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.</p>
<p><a href="http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/">Read the full article...</a></p>
</blockquote>
<p>Even though we weren&#39;t inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it&#39;s great to see similar technologies emerging and becoming popular.</p>
<h2><a class="anchor" name="react-brunch"></a>React Brunch <a class="hash-link" href="#react-brunch">#</a></h2>
<p><a href="http://elucidata.net/">Matthew McCray</a> implemented <a href="https://npmjs.org/package/react-brunch">react-brunch</a>, a JSX compilation step for <a href="http://brunch.io/">Brunch</a>.</p>
<blockquote>
<p>Adds React support to brunch by automatically compiling <code>*.jsx</code> files.</p>
<p>You can configure react-brunch to automatically insert a react header (<code>/** @jsx React.DOM */</code>) into all <code>*.jsx</code> files. Disabled by default.</p>
<p>Install the plugin via npm with <code>npm install --save react-brunch</code>.</p>
<p><a href="https://npmjs.org/package/react-brunch">Read more...</a></p>
</blockquote>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p>I&#39;m going to start adding a tweet at the end of each round-up. We&#39;ll start with this one:</p>
<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
</div>
</div>
<div class="pagination">
blog/page4/index.html
+119 -64
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,123 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></h1>
<p class="meta">November 6, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.</p>
<p>The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.</p>
<h2><a class="anchor" name="khan-academy---officially-moving-to-react"></a>Khan Academy - Officially moving to React <a class="hash-link" href="#khan-academy---officially-moving-to-react">#</a></h2>
<p><a href="http://joelburget.com/">Joel Burget</a> announced at Hack Reactor that new front-end code at Khan Academy should be written in React!</p>
<blockquote>
<p>How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren&#39;t looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.</p>
<p>Since the first React checkin on June 5, we&#39;ve somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that&#39;s a lot of code - but also really exciting that it was picked up so quickly.</p>
<p>We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.</p>
<p>I&#39;m excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We&#39;re trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we&#39;ve done is introduce more fragmentation. We won&#39;t be gratuitously updating working code (if it ain&#39;t broke, don&#39;t fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.</p>
<p><a href="http://joelburget.com/backbone-to-react/">Read the full article</a></p>
</blockquote>
<h2><a class="anchor" name="react-rethinking-best-practices"></a>React: Rethinking best practices <a class="hash-link" href="#react-rethinking-best-practices">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a>&#39;s talk at JSConf EU 2013 is now available in video.</p>
<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="server-side-react-with-php"></a>Server-side React with PHP <a class="hash-link" href="#server-side-react-with-php">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a>&#39;s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.</p>
<blockquote>
<p>This post is an initial hack to have React components render server-side in PHP.</p>
<ul>
<li>Problem: Build web UIs</li>
<li>Solution: React</li>
<li>Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)</li>
<li>Solution: <a href="https://github.com/facebook/react-page">React page</a> to render the first view</li>
<li>Problem: Can&#39;t host node.js apps / I have tons of PHP code</li>
<li>Solution: Use PHP then!</li>
</ul>
<p><a href="http://www.phpied.com/server-side-react-with-php/"><strong>Read part 1 ...</strong></a></p>
<p><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><strong>Read part 2 ...</strong></a></p>
<p>Rendered markup on the server:
<figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="/react/img/blog/react-php.png" alt=""></a></figure></p>
</blockquote>
<h2><a class="anchor" name="todomvc-benchmarks"></a>TodoMVC Benchmarks <a class="hash-link" href="#todomvc-benchmarks">#</a></h2>
<p>Webkit has a <a href="https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench">TodoMVC Benchmark</a> that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):</p>
<ul>
<li><strong>AngularJS:</strong> 4043ms</li>
<li><strong>AngularJSPerf:</strong> 3227ms</li>
<li><strong>BackboneJS:</strong> 1874ms</li>
<li><strong>EmberJS:</strong> 6822ms</li>
<li><strong>jQuery:</strong> 14628ms</li>
<li><strong>React:</strong> 2864ms</li>
<li><strong>VanillaJS:</strong> 5567ms</li>
</ul>
<p><a href="http://www.petehunt.net/react/tastejs/benchmark.html">Try it yourself!</a></p>
<p>Please don&#39;t take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn&#39;t written with performance in mind.</p>
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
<span class="cm"> * of how little code it takes to get an order of magnitude performance improvement.</span>
<span class="cm"> */</span>
<span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</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">todo</span><span class="p">.</span><span class="nx">id</span> <span class="o">||</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">todo</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">todo</span> <span class="o">||</span>
<span class="nx">nextProps</span><span class="p">.</span><span class="nx">editing</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">editing</span> <span class="o">||</span>
<span class="nx">nextState</span><span class="p">.</span><span class="nx">editText</span> <span class="o">!==</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">editText</span>
<span class="p">);</span>
<span class="p">},</span>
</code></pre></div>
<p>By default, React &quot;re-renders&quot; all the components when anything changes. This is usually fast enough that you don&#39;t need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.</p>
<p>The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.</p>
<h2><a class="anchor" name="guess-the-filter"></a>Guess the filter <a class="hash-link" href="#guess-the-filter">#</a></h2>
<p><a href="http://conr.me">Connor McSheffrey</a> implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
<figure><a href="http://guessthefilter.com/"><img src="/react/img/blog/guess_filter.jpg" alt=""></a></figure></p>
<h2><a class="anchor" name="react-vs-fruitmachine"></a>React vs FruitMachine <a class="hash-link" href="#react-vs-fruitmachine">#</a></h2>
<p><a href="http://trib.tv/">Andrew Betts</a>, director of the <a href="http://labs.ft.com/">Financial Times Labs</a>, posted an article comparing <a href="https://github.com/ftlabs/fruitmachine">FruitMachine</a> and React.</p>
<blockquote>
<p>Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We&#39;re graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.</p>
<p><a href="http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/">Read the full article...</a></p>
</blockquote>
<p>Even though we weren&#39;t inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it&#39;s great to see similar technologies emerging and becoming popular.</p>
<h2><a class="anchor" name="react-brunch"></a>React Brunch <a class="hash-link" href="#react-brunch">#</a></h2>
<p><a href="http://elucidata.net/">Matthew McCray</a> implemented <a href="https://npmjs.org/package/react-brunch">react-brunch</a>, a JSX compilation step for <a href="http://brunch.io/">Brunch</a>.</p>
<blockquote>
<p>Adds React support to brunch by automatically compiling <code>*.jsx</code> files.</p>
<p>You can configure react-brunch to automatically insert a react header (<code>/** @jsx React.DOM */</code>) into all <code>*.jsx</code> files. Disabled by default.</p>
<p>Install the plugin via npm with <code>npm install --save react-brunch</code>.</p>
<p><a href="https://npmjs.org/package/react-brunch">Read more...</a></p>
</blockquote>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p>I&#39;m going to start adding a tweet at the end of each round-up. We&#39;ll start with this one:</p>
<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
<p class="meta">November 5, 2013 by Pete Hunt</p>
@@ -394,68 +511,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></h1>
<p class="meta">September 24, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>A lot has happened in the month since our last update. Here are some of the more interesting things we&#39;ve found. But first, we have a couple updates before we share links.</p>
<p>First, we are organizing a <a href="http://reactjshack-a-thon.splashthat.com/">React Hackathon</a> in Facebook&#39;s Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!</p>
<p>We&#39;ve also reached a point where there are too many questions for us to handle directly. We&#39;re encouraging people to ask questions on <a href="http://stackoverflow.com/questions/tagged/reactjs">StackOverflow</a> using the tag <a href="http://stackoverflow.com/questions/tagged/reactjs">[reactjs]</a>. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.</p>
<h2><a class="anchor" name="javascript-jabber"></a>Javascript Jabber <a class="hash-link" href="#javascript-jabber">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="https://github.com/jordwalke">Jordan Walke</a> were interviewed on <a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Javascript Jabber</a> for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.</p>
<blockquote>
<p><strong>PETE:</strong> So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it&#39;s like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you&#39;ve registered and we reset the whole page and then we redraw the entire page. If you&#39;re writing a server-rendered app, handling updates is really easy because you hit the refresh button and you&#39;re pretty much guaranteed to get what you expect.</p>
<p><strong>MERRICK:</strong> That&#39;s true. You don&#39;t get into these odd states.</p>
<p><strong>PETE:</strong> Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we&#39;ll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.</p>
<p>Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn&#39;t part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.</p>
<p><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Read the full conversation ...</a></p>
</blockquote>
<h2><a class="anchor" name="jsxtransformer-trick"></a>JSXTransformer Trick <a class="hash-link" href="#jsxtransformer-trick">#</a></h2>
<p>While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.</p>
<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform(&quot;/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */&quot; + element.innerHTML).code</p>&mdash; Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2><a class="anchor" name="remarkable-react"></a>Remarkable React <a class="hash-link" href="#remarkable-react">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> gave a talk at <a href="http://braziljs.com.br/">BrazilJS</a> about React and wrote an article with the content of the presentation. He goes through the difficulties of writting <em>active apps</em> using the DOM API and shows how React handles it.</p>
<blockquote>
<p>So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.</p>
<p>You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And &quot;virtual DOM&quot; is a very big name for what is simply a JavaScript object with nested key-value pairs)</p>
<p>Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it&#39;s necessary. And does it all at once, in most cases in a single tick of the <code>requestAnimationFrame()</code>.</p>
<p>What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.</p>
<p>The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example <code>e.target</code> works, no need to look for the event object or checking whether it&#39;s <code>e.target</code> or <code>e.srcElement</code> (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event <code>&lt;input onChange&gt;</code> fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that &quot;thou shall use event delegation&quot; is also commonly given advice for making web apps snappy.</p>
<p>The good thing about the virtual DOM is that it&#39;s all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.</p>
<p><a href="http://www.phpied.com/remarkable-react/">Read More ...</a></p>
</blockquote>
<h2><a class="anchor" name="markdown-in-react"></a>Markdown in React <a class="hash-link" href="#markdown-in-react">#</a></h2>
<p><a href="http://benalpert.com/">Ben Alpert</a> converted <a href="https://github.com/chjj/marked">marked</a>, a Markdown Javascript implementation, in React: <a href="https://github.com/spicyj/marked-react">marked-react</a>. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to <code>escape</code> will not introduce an XSS vulnerability.
<figure><a href="https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/react/img/blog/markdown_refactor.png" alt=""></a></figure></p>
<h2><a class="anchor" name="unite-from-bugbusters"></a>Unite from BugBusters <a class="hash-link" href="#unite-from-bugbusters">#</a></h2>
<p><a href="https://twitter.com/renajohn">Renault John Lecoultre</a> wrote <a href="https://www.bugbuster.com/">Unite</a>, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
<figure><a href="https://unite.bugbuster.com/"><img src="/react/img/blog/unite.png" alt=""></a></figure></p>
<h2><a class="anchor" name="reactjs-irc-logs"></a>#reactjs IRC Logs <a class="hash-link" href="#reactjs-irc-logs">#</a></h2>
<p><a href="http://blog.vjeux.com/">Vjeux</a> re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.</p>
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
</div>
<div class="pagination">
blog/page5/index.html
+64 -27
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,68 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></h1>
<p class="meta">September 24, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>A lot has happened in the month since our last update. Here are some of the more interesting things we&#39;ve found. But first, we have a couple updates before we share links.</p>
<p>First, we are organizing a <a href="http://reactjshack-a-thon.splashthat.com/">React Hackathon</a> in Facebook&#39;s Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!</p>
<p>We&#39;ve also reached a point where there are too many questions for us to handle directly. We&#39;re encouraging people to ask questions on <a href="http://stackoverflow.com/questions/tagged/reactjs">StackOverflow</a> using the tag <a href="http://stackoverflow.com/questions/tagged/reactjs">[reactjs]</a>. Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.</p>
<h2><a class="anchor" name="javascript-jabber"></a>Javascript Jabber <a class="hash-link" href="#javascript-jabber">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="https://github.com/jordwalke">Jordan Walke</a> were interviewed on <a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Javascript Jabber</a> for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.</p>
<blockquote>
<p><strong>PETE:</strong> So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it&#39;s like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you&#39;ve registered and we reset the whole page and then we redraw the entire page. If you&#39;re writing a server-rendered app, handling updates is really easy because you hit the refresh button and you&#39;re pretty much guaranteed to get what you expect.</p>
<p><strong>MERRICK:</strong> That&#39;s true. You don&#39;t get into these odd states.</p>
<p><strong>PETE:</strong> Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we&#39;ll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.</p>
<p>Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn&#39;t part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Ben Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.</p>
<p><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/">Read the full conversation ...</a></p>
</blockquote>
<h2><a class="anchor" name="jsxtransformer-trick"></a>JSXTransformer Trick <a class="hash-link" href="#jsxtransformer-trick">#</a></h2>
<p>While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.</p>
<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform(&quot;/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */&quot; + element.innerHTML).code</p>&mdash; Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<h2><a class="anchor" name="remarkable-react"></a>Remarkable React <a class="hash-link" href="#remarkable-react">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> gave a talk at <a href="http://braziljs.com.br/">BrazilJS</a> about React and wrote an article with the content of the presentation. He goes through the difficulties of writting <em>active apps</em> using the DOM API and shows how React handles it.</p>
<blockquote>
<p>So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.</p>
<p>You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And &quot;virtual DOM&quot; is a very big name for what is simply a JavaScript object with nested key-value pairs)</p>
<p>Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it&#39;s necessary. And does it all at once, in most cases in a single tick of the <code>requestAnimationFrame()</code>.</p>
<p>What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.</p>
<p>The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example <code>e.target</code> works, no need to look for the event object or checking whether it&#39;s <code>e.target</code> or <code>e.srcElement</code> (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event <code>&lt;input onChange&gt;</code> fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that &quot;thou shall use event delegation&quot; is also commonly given advice for making web apps snappy.</p>
<p>The good thing about the virtual DOM is that it&#39;s all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.</p>
<p><a href="http://www.phpied.com/remarkable-react/">Read More ...</a></p>
</blockquote>
<h2><a class="anchor" name="markdown-in-react"></a>Markdown in React <a class="hash-link" href="#markdown-in-react">#</a></h2>
<p><a href="http://benalpert.com/">Ben Alpert</a> converted <a href="https://github.com/chjj/marked">marked</a>, a Markdown Javascript implementation, in React: <a href="https://github.com/spicyj/marked-react">marked-react</a>. Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to <code>escape</code> will not introduce an XSS vulnerability.
<figure><a href="https://github.com/spicyj/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="/react/img/blog/markdown_refactor.png" alt=""></a></figure></p>
<h2><a class="anchor" name="unite-from-bugbusters"></a>Unite from BugBusters <a class="hash-link" href="#unite-from-bugbusters">#</a></h2>
<p><a href="https://twitter.com/renajohn">Renault John Lecoultre</a> wrote <a href="https://www.bugbuster.com/">Unite</a>, an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
<figure><a href="https://unite.bugbuster.com/"><img src="/react/img/blog/unite.png" alt=""></a></figure></p>
<h2><a class="anchor" name="reactjs-irc-logs"></a>#reactjs IRC Logs <a class="hash-link" href="#reactjs-irc-logs">#</a></h2>
<p><a href="http://blog.vjeux.com/">Vjeux</a> re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.</p>
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
<p class="meta">August 26, 2013 by Vjeux</p>
@@ -323,31 +385,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></h1>
<p class="meta">July 26, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.</p>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li><code>setState</code> callbacks are now executed in the scope of your component.</li>
<li><code>click</code> events now work on Mobile Safari.</li>
<li>Prevent a potential error in event handling if <code>Object.prototype</code> is extended.</li>
<li>Don&#39;t set DOM attributes to the string <code>&quot;undefined&quot;</code> on update when previously defined.</li>
<li>Improved support for <code>&lt;iframe&gt;</code> attributes.</li>
<li>Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved environment detection so it can be run in a non-browser environment.</li>
</ul>
<p><a href="/react/downloads.html">Download it now!</a></p>
</div>
</div>
<div class="pagination">
blog/page6/index.html
+27 -42
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,31 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></h1>
<p class="meta">July 26, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.</p>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li><code>setState</code> callbacks are now executed in the scope of your component.</li>
<li><code>click</code> events now work on Mobile Safari.</li>
<li>Prevent a potential error in event handling if <code>Object.prototype</code> is extended.</li>
<li>Don&#39;t set DOM attributes to the string <code>&quot;undefined&quot;</code> on update when previously defined.</li>
<li>Improved support for <code>&lt;iframe&gt;</code> attributes.</li>
<li>Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved environment detection so it can be run in a non-browser environment.</li>
</ul>
<p><a href="/react/downloads.html">Download it now!</a></p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
<p class="meta">July 23, 2013 by Vjeux</p>
@@ -349,46 +374,6 @@ If you were using React without JSX previously, your code should still work.</li
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></h1>
<p class="meta">July 2, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>React v0.4 is very close to completion. As we finish it off, we&#39;d like to share with you some of the major changes we&#39;ve made since v0.3. This is the first of several posts we&#39;ll be making over the next week.</p>
<h2><a class="anchor" name="what-is-react.autobind"></a>What is React.autoBind? <a class="hash-link" href="#what-is-react.autobind">#</a></h2>
<p>If you take a look at most of our current examples, you&#39;ll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won&#39;t necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
<p>Before we launched React, we would write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
</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="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div><h2><a class="anchor" name="whats-changing-in-v0.4"></a>What&#39;s Changing in v0.4? <a class="hash-link" href="#whats-changing-in-v0.4">#</a></h2>
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn&#39;t want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
<p>Starting with v0.4 you can just write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
</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="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>For v0.4 we will simply be making <code>React.autoBind</code> a no-op — it will just return the function you pass to it. Most likely you won&#39;t have to change your code to account for this change, though we encourage you to update. We&#39;ll publish a migration guide documenting this and other changes that come along with React v0.4.</p>
</div>
</div>
<div class="pagination">
blog/page7/index.html
+42 -92
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,46 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></h1>
<p class="meta">July 2, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>React v0.4 is very close to completion. As we finish it off, we&#39;d like to share with you some of the major changes we&#39;ve made since v0.3. This is the first of several posts we&#39;ll be making over the next week.</p>
<h2><a class="anchor" name="what-is-react.autobind"></a>What is React.autoBind? <a class="hash-link" href="#what-is-react.autobind">#</a></h2>
<p>If you take a look at most of our current examples, you&#39;ll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won&#39;t necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
<p>Before we launched React, we would write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
</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="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div><h2><a class="anchor" name="whats-changing-in-v0.4"></a>What&#39;s Changing in v0.4? <a class="hash-link" href="#whats-changing-in-v0.4">#</a></h2>
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn&#39;t want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
<p>Starting with v0.4 you can just write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
</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="hll"> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
</span> <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>For v0.4 we will simply be making <code>React.autoBind</code> a no-op — it will just return the function you pass to it. Most likely you won&#39;t have to change your code to account for this change, though we encourage you to update. We&#39;ll publish a migration guide documenting this and other changes that come along with React v0.4.</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
<p class="meta">June 27, 2013 by Vjeux</p>
@@ -322,96 +362,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
<p class="meta">June 5, 2013 by Pete Hunt</p>
<hr />
<div class="post">
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
and why would you want to use it?</p>
<h2><a class="anchor" name="react-isnt-an-mvc-framework."></a>React isn&#39;t an MVC framework. <a class="hash-link" href="#react-isnt-an-mvc-framework.">#</a></h2>
<p>React is a library for building composable user interfaces. It encourages
the creation of reusable UI components which present data that changes over
time.</p>
<h2><a class="anchor" name="react-doesnt-use-templates."></a>React doesn&#39;t use templates. <a class="hash-link" href="#react-doesnt-use-templates.">#</a></h2>
<p>Traditionally, web application UIs are built using templates or HTML directives.
These templates dictate the full set of abstractions that you are allowed to use
to build your UI.</p>
<p>React approaches building user interfaces differently by breaking them into
<strong>components</strong>. This means React uses a real, full featured programming language
to render views, which we see as an advantage over templates for a few reasons:</p>
<ul>
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
to build abstractions. This is incredibly important in large applications.</li>
<li>By unifying your markup with its corresponding view logic, React can actually
make views <strong>easier to extend and maintain</strong>.</li>
<li>By baking an understanding of markup and content into JavaScript, there&#39;s
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
vulnerabilities.</li>
</ul>
<p>We&#39;ve also created <a href="/react/docs/jsx-in-depth.html">JSX</a>, an optional syntax
extension, in case you prefer the readability of HTML to raw JavaScript.</p>
<h2><a class="anchor" name="reactive-updates-are-dead-simple."></a>Reactive updates are dead simple. <a class="hash-link" href="#reactive-updates-are-dead-simple.">#</a></h2>
<p>React really shines when your data changes over time.</p>
<p>In a traditional JavaScript application, you need to look at what data changed
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
which provides a declarative interface via directives and data binding <a href="http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation">requires
a linking function to manually update DOM nodes</a>.</p>
<p>React takes a different approach.</p>
<p>When your component is first initialized, the <code>render</code> method is called,
generating a lightweight representation of your view. From that representation,
a string of markup is produced, and injected into the document. When your data
changes, the <code>render</code> method is called again. In order to perform updates as
efficiently as possible, we diff the return value from the previous call to
<code>render</code> with the new one, and generate a minimal set of changes to be applied
to the DOM.</p>
<blockquote>
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it&#39;s a
lightweight description of what the DOM should look like.</p>
</blockquote>
<p>We call this process <strong>reconciliation</strong>. Check out
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
reconciliation in action.</p>
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
doesn&#39;t need to explicitly specify data bindings. We&#39;ve found this approach
makes it easier to build apps.</p>
<h2><a class="anchor" name="html-is-just-the-beginning."></a>HTML is just the beginning. <a class="hash-link" href="#html-is-just-the-beginning.">#</a></h2>
<p>Because React has its own lightweight representation of the document, we can do
some pretty cool things with it:</p>
<ul>
<li>Facebook has dynamic charts that render to <code>&lt;canvas&gt;</code> instead of HTML.</li>
<li>Instagram is a &quot;single page&quot; web app built entirely with React and
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
<li>We&#39;ve built internal prototypes that run React apps in a web worker and use
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
<li>You can run React
<a href="http://github.com/petehunt/react-server-rendering">on the server</a>
for SEO, performance, code sharing and overall flexibility.</li>
<li>Events behave in a consistent, standards-compliant way in all browsers
(including IE8) and automatically use
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
</ul>
<p>Head on over to <a href="/react">facebook.github.io/react</a> to check out what we have
built. Our documentation is geared towards building apps with the framework,
but if you are interested in the nuts and bolts
<a href="/react/support.html">get in touch</a> with us!</p>
<p>Thanks for reading!</p>
</div>
</div>
<div class="pagination">
blog/page8/index.html
+92 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,96 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
<p class="meta">June 5, 2013 by Pete Hunt</p>
<hr />
<div class="post">
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
and why would you want to use it?</p>
<h2><a class="anchor" name="react-isnt-an-mvc-framework."></a>React isn&#39;t an MVC framework. <a class="hash-link" href="#react-isnt-an-mvc-framework.">#</a></h2>
<p>React is a library for building composable user interfaces. It encourages
the creation of reusable UI components which present data that changes over
time.</p>
<h2><a class="anchor" name="react-doesnt-use-templates."></a>React doesn&#39;t use templates. <a class="hash-link" href="#react-doesnt-use-templates.">#</a></h2>
<p>Traditionally, web application UIs are built using templates or HTML directives.
These templates dictate the full set of abstractions that you are allowed to use
to build your UI.</p>
<p>React approaches building user interfaces differently by breaking them into
<strong>components</strong>. This means React uses a real, full featured programming language
to render views, which we see as an advantage over templates for a few reasons:</p>
<ul>
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
to build abstractions. This is incredibly important in large applications.</li>
<li>By unifying your markup with its corresponding view logic, React can actually
make views <strong>easier to extend and maintain</strong>.</li>
<li>By baking an understanding of markup and content into JavaScript, there&#39;s
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
vulnerabilities.</li>
</ul>
<p>We&#39;ve also created <a href="/react/docs/jsx-in-depth.html">JSX</a>, an optional syntax
extension, in case you prefer the readability of HTML to raw JavaScript.</p>
<h2><a class="anchor" name="reactive-updates-are-dead-simple."></a>Reactive updates are dead simple. <a class="hash-link" href="#reactive-updates-are-dead-simple.">#</a></h2>
<p>React really shines when your data changes over time.</p>
<p>In a traditional JavaScript application, you need to look at what data changed
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
which provides a declarative interface via directives and data binding <a href="http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation">requires
a linking function to manually update DOM nodes</a>.</p>
<p>React takes a different approach.</p>
<p>When your component is first initialized, the <code>render</code> method is called,
generating a lightweight representation of your view. From that representation,
a string of markup is produced, and injected into the document. When your data
changes, the <code>render</code> method is called again. In order to perform updates as
efficiently as possible, we diff the return value from the previous call to
<code>render</code> with the new one, and generate a minimal set of changes to be applied
to the DOM.</p>
<blockquote>
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it&#39;s a
lightweight description of what the DOM should look like.</p>
</blockquote>
<p>We call this process <strong>reconciliation</strong>. Check out
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
reconciliation in action.</p>
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
doesn&#39;t need to explicitly specify data bindings. We&#39;ve found this approach
makes it easier to build apps.</p>
<h2><a class="anchor" name="html-is-just-the-beginning."></a>HTML is just the beginning. <a class="hash-link" href="#html-is-just-the-beginning.">#</a></h2>
<p>Because React has its own lightweight representation of the document, we can do
some pretty cool things with it:</p>
<ul>
<li>Facebook has dynamic charts that render to <code>&lt;canvas&gt;</code> instead of HTML.</li>
<li>Instagram is a &quot;single page&quot; web app built entirely with React and
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
<li>We&#39;ve built internal prototypes that run React apps in a web worker and use
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
<li>You can run React
<a href="http://github.com/petehunt/react-server-rendering">on the server</a>
for SEO, performance, code sharing and overall flexibility.</li>
<li>Events behave in a consistent, standards-compliant way in all browsers
(including IE8) and automatically use
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
</ul>
<p>Head on over to <a href="/react">facebook.github.io/react</a> to check out what we have
built. Our documentation is geared towards building apps with the framework,
but if you are interested in the nuts and bolts
<a href="/react/support.html">get in touch</a> with us!</p>
<p>Thanks for reading!</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
feed.xml
+84 -106
View File
@@ -6,6 +6,79 @@
<link>http://facebook.github.io/react</link>
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
<item>
<title>React v0.10</title>
<description>&lt;p&gt;Hot on the heels of the &lt;a href=&quot;/react/blog/2014/02/20/react-v0.10rc.html&quot;&gt;release candidate earlier this week&lt;/a&gt;, we&amp;#39;re ready to call v0.10 done. The only major issue we discovered had to do with the &lt;code&gt;react-tools&lt;/code&gt; package, which has been updated. We&amp;#39;ve copied over the changelog from the RC with some small clarifying changes.&lt;/p&gt;
&lt;p&gt;The release is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.10.0.js&quot;&gt;http://fb.me/react-0.10.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.10.0.min.js&quot;&gt;http://fb.me/react-0.10.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0.js&quot;&gt;http://fb.me/react-with-addons-0.10.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0.min.js&quot;&gt;http://fb.me/react-with-addons-0.10.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.10.0.js&quot;&gt;http://fb.me/JSXTransformer-0.10.0.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.10.0&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-tools&lt;/code&gt; packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;
&lt;p&gt;Please try these builds out and &lt;a href=&quot;https://github.com/facebook/react/issues/new&quot;&gt;file an issue on GitHub&lt;/a&gt; if you see anything awry.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;clone-on-mount&quot;&gt;&lt;/a&gt;Clone On Mount &lt;a class=&quot;hash-link&quot; href=&quot;#clone-on-mount&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (&lt;code&gt;React.DOM.div()&lt;/code&gt;, &lt;code&gt;MyComponent()&lt;/code&gt;) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.&lt;/p&gt;
&lt;p&gt;In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on &lt;a href=&quot;http://fb.me/react-warning-descriptors&quot;&gt;this page&lt;/a&gt;. Most of the time you can solve your pattern by using refs.&lt;/p&gt;
&lt;p&gt;Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// This is a common pattern. However instance here really refers to a&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// &amp;quot;descriptor&amp;quot;, not necessarily the mounted instance.&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;instance&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;instance&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;instance&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(...);&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// The change here is very simple. The return value of renderComponent will be&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// the mounted instance.&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;instance&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;instance&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(...);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.&lt;/p&gt;
&lt;p&gt;The plan for v0.11 is that we will go fully to &amp;quot;descriptors&amp;quot;. Method calls on the return value of &lt;code&gt;MyComponent()&lt;/code&gt; will fail hard.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;new-features&quot;&gt;&lt;/a&gt;New Features &lt;a class=&quot;hash-link&quot; href=&quot;#new-features&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Added warnings to help migrate towards descriptors&lt;/li&gt;
&lt;li&gt;Made it possible to server render without React-related markup (&lt;code&gt;data-reactid&lt;/code&gt;, &lt;code&gt;data-react-checksum&lt;/code&gt;). This DOM will not be mountable by React. &lt;a href=&quot;/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup&quot;&gt;Read the docs for &lt;code&gt;React.renderComponentToStaticMarkup&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Added support for more attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;srcSet&lt;/code&gt; for &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; to specify images at different pixel ratios&lt;/li&gt;
&lt;li&gt;&lt;code&gt;textAnchor&lt;/code&gt; for SVG&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;bug-fixes&quot;&gt;&lt;/a&gt;Bug Fixes &lt;a class=&quot;hash-link&quot; href=&quot;#bug-fixes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Ensure all void elements don’t insert a closing tag into the markup.&lt;/li&gt;
&lt;li&gt;Ensure &lt;code&gt;className={false}&lt;/code&gt; behaves consistently&lt;/li&gt;
&lt;li&gt;Ensure &lt;code&gt;this.refs&lt;/code&gt; is defined, even if no refs are specified.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;addons&quot;&gt;&lt;/a&gt;Addons &lt;a class=&quot;hash-link&quot; href=&quot;#addons&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;update&lt;/code&gt; function to deal with immutable data. &lt;a href=&quot;/react/docs/update.html&quot;&gt;Read the docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tools&quot;&gt;&lt;/a&gt;react-tools &lt;a class=&quot;hash-link&quot; href=&quot;#react-tools&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Added an option argument to &lt;code&gt;transform&lt;/code&gt; function. The only option supported is &lt;code&gt;harmony&lt;/code&gt;, which behaves the same as &lt;code&gt;jsx --harmony&lt;/code&gt; on the command line. This uses the ES6 transforms from &lt;a href=&quot;https://github.com/facebook/jstransform&quot;&gt;jstransform&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-03-21T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html</guid>
</item>
<item>
<title>React v0.10 RC</title>
<description>&lt;p&gt;&lt;a href=&quot;http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html&quot;&gt;v0.9 has only been out for a month&lt;/a&gt;, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don&amp;#39;t have a long list of changes to talk about.&lt;/p&gt;
@@ -13,13 +86,13 @@
&lt;p&gt;The release candidate is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.10.0-rc1.js&quot;&gt;http://fb.me/react-0.10.0-rc1.js&lt;/a&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.10.0-rc1.min.js&quot;&gt;http://fb.me/react-0.10.0-rc1.min.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.10.0-rc1.js&lt;/a&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.10.0-rc1.min.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.10.0-rc1.js&quot;&gt;http://fb.me/react-0.10.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.10.0-rc1.min.js&quot;&gt;http://fb.me/react-0.10.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.10.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.10.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.10.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.10.0-rc1.js&quot;&gt;http://fb.me/JSXTransformer-0.10.0-rc1.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
@@ -50,11 +123,12 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;p&gt;The plan for v0.11 is that we will go fully to &amp;quot;descriptors&amp;quot;. Method calls on the return value of &lt;code&gt;MyComponent()&lt;/code&gt; will fail hard.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;new-features&quot;&gt;&lt;/a&gt;New Features &lt;a class=&quot;hash-link&quot; href=&quot;#new-features&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Made it possible to server render without React-related markup (&lt;code&gt;data-reactid&lt;/code&gt;, &lt;code&gt;data-react-checksum&lt;/code&gt;) - &lt;code&gt;React.renderComponentToStaticMarkup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added warnings to help migrate towards descriptors&lt;/li&gt;
&lt;li&gt;Made it possible to server render without React-related markup (&lt;code&gt;data-reactid&lt;/code&gt;, &lt;code&gt;data-react-checksum&lt;/code&gt;). This DOM will not be mountable by React. &lt;a href=&quot;/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup&quot;&gt;Read the docs for &lt;code&gt;React.renderComponentToStaticMarkup&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Added support for more attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;srcSet&lt;/code&gt; for &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; to images at different pixel ratios&lt;/li&gt;
&lt;li&gt;&lt;code&gt;srcSet&lt;/code&gt; for &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; to specify images at different pixel ratios&lt;/li&gt;
&lt;li&gt;&lt;code&gt;textAnchor&lt;/code&gt; for SVG&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
@@ -66,7 +140,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;addons&quot;&gt;&lt;/a&gt;Addons &lt;a class=&quot;hash-link&quot; href=&quot;#addons&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;update&lt;/code&gt; function to deal with immutable data.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;update&lt;/code&gt; function to deal with immutable data. &lt;a href=&quot;/react/docs/update.html&quot;&gt;Read the docs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tools&quot;&gt;&lt;/a&gt;react-tools &lt;a class=&quot;hash-link&quot; href=&quot;#react-tools&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
@@ -743,101 +817,5 @@ rails s
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html</guid>
</item>
<item>
<title>Community Round-up #13</title>
<description>&lt;p&gt;Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-touch&quot;&gt;&lt;/a&gt;React Touch &lt;a class=&quot;hash-link&quot; href=&quot;#react-touch&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.petehunt.net/&quot;&gt;Pete Hunt&lt;/a&gt; wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.&lt;/p&gt;
&lt;figure&gt;&lt;iframe src=&quot;//player.vimeo.com/video/79659941&quot; width=&quot;220&quot; height=&quot;400&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;p&gt;&lt;a href=&quot;http://petehunt.github.io/react-touch/&quot;&gt;Try out the demos!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;introduction-to-react&quot;&gt;&lt;/a&gt;Introduction to React &lt;a class=&quot;hash-link&quot; href=&quot;#introduction-to-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.phpied.com/&quot;&gt;Stoyan Stefanov&lt;/a&gt; talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.&lt;/p&gt;
&lt;figure&gt;&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/SMMRJif5QW0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-e4x-the-good-parts&quot;&gt;&lt;/a&gt;JSX: E4X The Good Parts &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-e4x-the-good-parts&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;JSX is often compared to the now defunct E4X, &lt;a href=&quot;http://blog.vjeux.com/&quot;&gt;Vjeux&lt;/a&gt; went over all the E4X features and explained how JSX is different and hopefully doesn&amp;#39;t repeat the same mistakes.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I&amp;#39;m going to go over all the features of E4X and explain the design decisions behind JSX.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Historical Context&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html&quot;&gt;Continue reading ...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react--socket.io&quot;&gt;&lt;/a&gt;React + Socket.io &lt;a class=&quot;hash-link&quot; href=&quot;#react--socket.io&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://enome.be/nl&quot;&gt;Geert Pasteels&lt;/a&gt; made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;changeHandler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;_&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isEqual&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;componentDidMount&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;utils&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;nodePath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;changeHandler&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;componentWillUpdate&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;emit&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;componentWillUnmount&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;removeListener&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;change&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Enome/react.io&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;cssobjectify&quot;&gt;&lt;/a&gt;cssobjectify &lt;a class=&quot;hash-link&quot; href=&quot;#cssobjectify&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://andreypopp.com/&quot;&gt;Andrey Popp&lt;/a&gt; implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;cm&quot;&gt;/* style.css */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;12&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;red&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt;/* myapp.js */&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;react-tools/build/modules/React&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Styles&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;./styles.css&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Styles&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;world&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/andreypopp/cssobjectify&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ngreact&quot;&gt;&lt;/a&gt;ngReact &lt;a class=&quot;hash-link&quot; href=&quot;#ngreact&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://davidandsuzi.com/&quot;&gt;David Chang&lt;/a&gt; working at &lt;a href=&quot;http://www.hasoffers.com/&quot;&gt;HasOffer&lt;/a&gt; wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular&amp;#39;s transclusion it is 450% slower.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that&amp;#39;s 67% faster). You&amp;#39;ll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it&amp;#39;s 433ms, which is more than half of the total time!
&lt;figure&gt;&lt;a href=&quot;http://davidandsuzi.com/ngreact-react-components-in-angular/&quot;&gt;&lt;img src=&quot;/react/img/blog/ngreact.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://davidandsuzi.com/ngreact-react-components-in-angular/&quot;&gt;Read the full article...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;vim-jsx&quot;&gt;&lt;/a&gt;vim-jsx &lt;a class=&quot;hash-link&quot; href=&quot;#vim-jsx&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mxw&quot;&gt;Max Wang&lt;/a&gt; made a vim syntax highlighting and indentation plugin for vim.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.&lt;/p&gt;
&lt;p&gt;This bundle requires pangloss&amp;#39;s &lt;a href=&quot;https://github.com/pangloss/vim-javascript&quot;&gt;vim-javascript&lt;/a&gt; syntax highlighting.&lt;/p&gt;
&lt;p&gt;Vim support for inline XML in JS is remarkably similar to the same for PHP.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mxw/vim-jsx&quot;&gt;View on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweet&quot;&gt;&lt;/a&gt;Random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;center&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.&lt;/p&gt;&amp;mdash; Eric Florenzano (@ericflo) &lt;a href=&quot;https://twitter.com/ericflo/statuses/413842834974732288&quot;&gt;December 20, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/center&gt;&lt;/p&gt;
</description>
<pubDate>2013-12-30T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/12/30/community-roundup-13.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/12/30/community-roundup-13.html</guid>
</item>
</channel>
</rss>