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

v0.11.1

Browse Source
This commit is contained in:
Paul O’Shannessy
2014-07-25 11:25:07 -07:00
parent 4bc42dfe73
commit 2aa83f71cc
70 changed files with 879 additions and 646 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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/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/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/19/react-v0.10-rc1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/21/react-v0.10.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/28/the-road-to-1.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/04/04/reactnet.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/06/flux.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/29/one-year-of-open-source-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/06/27/community-roundup-19.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/13/react-v0.11-rc1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html" class="active">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/17/react-v0.11.html
+16 -3
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html" class="active">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -95,7 +95,11 @@
<hr>
<div class="post">
<p>We&#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using <code>jsx --harmony</code>, fixed a small regression with <code>statics</code>, and made sure we actually exposed the new API we said we were shipping: <code>React.Children.count</code>.</p>
<p><strong>Update:</strong> We missed a few important changes in our initial post and changelog. We&#39;ve updated this post with details about <a href="#descriptors">Descriptors</a> and <a href="#prop-type-validation">Prop Type Validation</a>.</p>
<hr>
<p>We&#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using <code>jsx --harmony</code>, fixed a small regression with <code>statics</code>, and made sure we actually exposed the new API we said we were shipping: <code>React.Children.count</code>.</p>
<p>This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>
@@ -165,9 +169,18 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">},</span>
</code></pre></div>
<p>Keyboard and mouse events also now include a normalized <code>e.getModifierState()</code> that works consistently across browsers.</p>
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
<p>In our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount">v0.10 release notes</a>, we called out that we were deprecating the existing behavior of the component function call (eg <code>component = MyComponent(props, ...children)</code> or <code>component = &lt;MyComponent prop={...}/&gt;</code>). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg <code>component.setProps(...)</code>). This no longer works. <code>component</code> in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.</p>
<p>Along with this change to descriptors, <code>React.isValidComponent</code> and <code>React.PropTypes.component</code> now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of <code>MyComponent()</code>, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we&#39;re working to make sure we are consistent with our terminology.</p>
<h2><a class="anchor" name="prop-type-validation"></a>Prop Type Validation <a class="hash-link" href="#prop-type-validation">#</a></h2>
<p>Previously <code>React.PropTypes</code> validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply <code>console.log</code> your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (<em>not throw</em>) an <code>Error</code> object. We then log the <code>error.message</code> property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an <code>Error</code> with your message instead.</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><code>getDefaultProps()</code> is now called once per class and shared across all instances</li>
<li><code>MyComponent()</code> now returns a descriptor, not an instance</li>
<li><code>React.isValidComponent</code> and <code>React.PropTypes.component</code> validate <em>descriptors</em>, not component instances.</li>
<li>Custom <code>propType</code> validators should return an <code>Error</code> instead of logging directly</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
blog/2014/07/24/react-v0.11.1.html
+173
View File
@@ -0,0 +1,173 @@
<!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.11.1</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | React v0.11.1">
<meta property="og:type" content="website">
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/07/24/react-v0.11.1.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.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/07/24/react-v0.11.1.html" class="active">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
<li><a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a></li>
<li><a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a></li>
<li><a href="/react/blog/2014/05/06/flux.html">Flux: An Application Architecture for React</a></li>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>React v0.11.1</h1>
<p class="meta">July 24, 2014 by Paul O’Shannessy</p>
<hr>
<div class="post">
<p>Today we&#39;re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they&#39;ve begun upgrading.</p>
<p>The first of these is the most major and resulted in a regression with the use of <code>setState</code> inside <code>componentWillMount</code> when using React on the server. These <code>setState</code> calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as <code>document</code> is not defined.</p>
<p>There are several fixes we&#39;re including in v0.11.1 that are focused around the newly supported <code>event.getModifierState()</code> function. We made some adjustments to improve this cross-browser standardization.</p>
<p>The final fix we&#39;re including is to better support a workaround for some IE8 behavior. The edge-case bug we&#39;re fixing was also present in v0.9 and v0.10, so while it wasn&#39;t a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.</p>
<p>We&#39;d also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around <a href="/react/blog/2014/07/17/react-v0.11.html#descriptors">Descriptors</a> and <a href="/react/blog/2014/07/17/react-v0.11.html#prop-type-validation">Prop Type Validation</a>.</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.11.1.js">http://fb.me/react-0.11.1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.11.1.min.js">http://fb.me/react-0.11.1.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.11.1.js">http://fb.me/react-with-addons-0.11.1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.1.min.js">http://fb.me/react-with-addons-0.11.1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.11.1.js">http://fb.me/JSXTransformer-0.11.1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.11.1</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="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="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li><code>setState</code> can be called inside <code>componentWillMount</code> in non-DOM environments</li>
<li><code>SyntheticMouseEvent.getEventModifierState</code> correctly renamed to <code>getModifierState</code></li>
<li><code>getModifierState</code> correctly returns a <code>boolean</code></li>
<li><code>getModifierState</code> is now correctly case sensitive</li>
<li>Empty Text node used in IE8 <code>innerHTML</code> workaround is now removed, fixing rerendering in certain cases</li>
</ul>
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
<ul>
<li>Fix duplicate variable declaration (caused issues in some browsers)</li>
</ul>
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">&copy; 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/07/24/react-v0.11.1.html">React v0.11.1</a></strong> on July 24, 2014 by Paul O’Shannessy</p>
<p><strong><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></strong> on July 17, 2014 by Paul O’Shannessy</p>
<p><strong><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></strong> on July 13, 2014 by Paul O’Shannessy</p>
blog/index.html
+63 -23
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,12 +90,63 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></h1>
<p class="meta">July 24, 2014 by Paul O’Shannessy</p>
<hr />
<div class="post">
<p>Today we&#39;re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they&#39;ve begun upgrading.</p>
<p>The first of these is the most major and resulted in a regression with the use of <code>setState</code> inside <code>componentWillMount</code> when using React on the server. These <code>setState</code> calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as <code>document</code> is not defined.</p>
<p>There are several fixes we&#39;re including in v0.11.1 that are focused around the newly supported <code>event.getModifierState()</code> function. We made some adjustments to improve this cross-browser standardization.</p>
<p>The final fix we&#39;re including is to better support a workaround for some IE8 behavior. The edge-case bug we&#39;re fixing was also present in v0.9 and v0.10, so while it wasn&#39;t a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.</p>
<p>We&#39;d also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around <a href="/react/blog/2014/07/17/react-v0.11.html#descriptors">Descriptors</a> and <a href="/react/blog/2014/07/17/react-v0.11.html#prop-type-validation">Prop Type Validation</a>.</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.11.1.js">http://fb.me/react-0.11.1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.11.1.min.js">http://fb.me/react-0.11.1.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.11.1.js">http://fb.me/react-with-addons-0.11.1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.1.min.js">http://fb.me/react-with-addons-0.11.1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.11.1.js">http://fb.me/JSXTransformer-0.11.1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.11.1</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="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="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li><code>setState</code> can be called inside <code>componentWillMount</code> in non-DOM environments</li>
<li><code>SyntheticMouseEvent.getEventModifierState</code> correctly renamed to <code>getModifierState</code></li>
<li><code>getModifierState</code> correctly returns a <code>boolean</code></li>
<li><code>getModifierState</code> is now correctly case sensitive</li>
<li>Empty Text node used in IE8 <code>innerHTML</code> workaround is now removed, fixing rerendering in certain cases</li>
</ul>
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
<ul>
<li>Fix duplicate variable declaration (caused issues in some browsers)</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></h1>
<p class="meta">July 17, 2014 by Paul O’Shannessy</p>
<hr />
<div class="post">
<p>We&#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using <code>jsx --harmony</code>, fixed a small regression with <code>statics</code>, and made sure we actually exposed the new API we said we were shipping: <code>React.Children.count</code>.</p>
<p><strong>Update:</strong> We missed a few important changes in our initial post and changelog. We&#39;ve updated this post with details about <a href="#descriptors">Descriptors</a> and <a href="#prop-type-validation">Prop Type Validation</a>.</p>
<hr>
<p>We&#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using <code>jsx --harmony</code>, fixed a small regression with <code>statics</code>, and made sure we actually exposed the new API we said we were shipping: <code>React.Children.count</code>.</p>
<p>This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>
@@ -165,9 +216,18 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">},</span>
</code></pre></div>
<p>Keyboard and mouse events also now include a normalized <code>e.getModifierState()</code> that works consistently across browsers.</p>
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
<p>In our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount">v0.10 release notes</a>, we called out that we were deprecating the existing behavior of the component function call (eg <code>component = MyComponent(props, ...children)</code> or <code>component = &lt;MyComponent prop={...}/&gt;</code>). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg <code>component.setProps(...)</code>). This no longer works. <code>component</code> in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.</p>
<p>Along with this change to descriptors, <code>React.isValidComponent</code> and <code>React.PropTypes.component</code> now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of <code>MyComponent()</code>, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we&#39;re working to make sure we are consistent with our terminology.</p>
<h2><a class="anchor" name="prop-type-validation"></a>Prop Type Validation <a class="hash-link" href="#prop-type-validation">#</a></h2>
<p>Previously <code>React.PropTypes</code> validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply <code>console.log</code> your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (<em>not throw</em>) an <code>Error</code> object. We then log the <code>error.message</code> property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an <code>Error</code> with your message instead.</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><code>getDefaultProps()</code> is now called once per class and shared across all instances</li>
<li><code>MyComponent()</code> now returns a descriptor, not an instance</li>
<li><code>React.isValidComponent</code> and <code>React.PropTypes.component</code> validate <em>descriptors</em>, not component instances.</li>
<li>Custom <code>propType</code> validators should return an <code>Error</code> instead of logging directly</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
@@ -431,26 +491,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/05/06/flux.html">Flux: An Application Architecture for React</a></h1>
<p class="meta">May 6, 2014 by Bill Fisher and Jing Chen</p>
<hr />
<div class="post">
<p>We recently spoke at one of f8&#39;s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:</p>
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
<p>To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.</p>
<p>In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.</p>
<p>When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application&#39;s data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React&#39;s declarative model, which allows the stores to send updates without specifying how to transition views between states.</p>
<p>Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An <a href="https://github.com/facebook/react/tree/master/examples/todomvc-flux">example of this architecture</a> is available, along with more <a href="http://facebook.github.io/react/docs/flux-overview.html">detailed documentation</a> and a <a href="http://facebook.github.io/react/docs/flux-todo-list.html">tutorial</a>. Look for more examples to come in the future.</p>
</div>
</div>
<div class="pagination">
blog/page2/index.html
+22 -85
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,26 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/05/06/flux.html">Flux: An Application Architecture for React</a></h1>
<p class="meta">May 6, 2014 by Bill Fisher and Jing Chen</p>
<hr />
<div class="post">
<p>We recently spoke at one of f8&#39;s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:</p>
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
<p>To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.</p>
<p>In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.</p>
<p>When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application&#39;s data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React&#39;s declarative model, which allows the stores to send updates without specifying how to transition views between states.</p>
<p>Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An <a href="https://github.com/facebook/react/tree/master/examples/todomvc-flux">example of this architecture</a> is available, along with more <a href="http://facebook.github.io/react/docs/flux-overview.html">detailed documentation</a> and a <a href="http://facebook.github.io/react/docs/flux-todo-list.html">tutorial</a>. Look for more examples to come in the future.</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></h1>
<p class="meta">April 4, 2014 by Daniel Lo Nigro</p>
@@ -314,89 +334,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></h1>
<p class="meta">March 14, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>In this Round-up, we are taking a few closer looks at React&#39;s interplay with different frameworks and architectures.</p>
<h2><a class="anchor" name="little-framework-big-splash"></a>&quot;Little framework BIG splash&quot; <a class="hash-link" href="#little-framework-big-splash">#</a></h2>
<p>Let&#39;s start with yet another refreshing introduction to React: Craig Savolainen (<a href="https://twitter.com/maedhr">@maedhr</a>) walks through some first steps, demonstrating <a href="http://infinitemonkeys.influitive.com/little-framework-big-splash">how to build a Google Maps component</a> using React.</p>
<h2><a class="anchor" name="architecting-your-app-with-react"></a>Architecting your app with react <a class="hash-link" href="#architecting-your-app-with-react">#</a></h2>
<p>Brandon Konkle (<a href="https://twitter.com/bkonkle">@bkonkle</a>)
<a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Architecting your app with react</a>
We&#39;re looking forward to part 2!</p>
<blockquote>
<p>React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You&#39;ll often see React used to manage specific parts of an application&#39;s UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application&#39;s interface.</p>
<p><a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="react-vs.-async-dom-manipulation"></a>React vs. async DOM manipulation <a class="hash-link" href="#react-vs.-async-dom-manipulation">#</a></h2>
<p>Eliseu Monar (<a href="https://twitter.com/eliseumds">@eliseumds</a>)&#39;s post &quot;<a href="http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering">ReactJS vs async concurrent rendering</a>&quot; is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.</p>
<h2><a class="anchor" name="react-scala-and-the-play-framework"></a>React, Scala and the Play Framework <a class="hash-link" href="#react-scala-and-the-play-framework">#</a></h2>
<p><a href="http://matthiasnehlsen.com/">Matthias Nehlsen</a> wrote a detailed introductory piece on <a href="http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/">React and the Play Framework</a>, including a helpful architectural diagram of a typical React app.</p>
<p>Nehlsen&#39;s React frontend is the second implementation of his chat application&#39;s frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.</p>
<p>In <a href="http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/">another article</a>, he walks us through the process of using React with scala.js to implement app-wide undo functionality.</p>
<p>Also check out his <a href="http://m.ustream.tv/recorded/42780242">talk</a> at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.</p>
<h2><a class="anchor" name="react-and-backbone"></a>React and Backbone <a class="hash-link" href="#react-and-backbone">#</a></h2>
<p>The folks over at <a href="https://venmo.com/">Venmo</a> are using React in conjunction with Backbone.
Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html">this detailed piece</a> about why React and Backbone are &quot;a fantastic pairing&quot;.</p>
<h2><a class="anchor" name="react-vs.-ember"></a>React vs. Ember <a class="hash-link" href="#react-vs.-ember">#</a></h2>
<p>Eric Berry (<a href="https://twitter.com/coderberry">@coderberry</a>) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: <a href="http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/">&quot;Facebook React vs. Ember&quot;</a>.</p>
<h2><a class="anchor" name="react-and-plain-old-html"></a>React and plain old HTML <a class="hash-link" href="#react-and-plain-old-html">#</a></h2>
<p>Daniel Lo Nigro (<a href="https://twitter.com/Daniel15">@Daniel15</a>) created <a href="https://github.com/reactjs/react-magic">React-Magic</a>, which leverages React to ajaxify plain old html pages and even <a href="http://stuff.dan.cx/facebook/react-hacks/magic/red.php">allows CSS transitions between pageloads</a>.</p>
<blockquote>
<p>React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to &quot;diff&quot; the old HTML with the new HTML, and only update the parts of the DOM that have been changed.</p>
<p><a href="https://github.com/reactjs/react-magic">Check out the project on GitHub...</a></p>
</blockquote>
<p>On a related note, <a href="https://turbo-react.herokuapp.com/">Reactize</a> by Ross Allen (<a href="https://twitter.com/ssorallen">@ssorallen</a>) is a similarly awesome project: A wrapper for Rails&#39; <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, which seems to have inspired John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) to then create <a href="http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/">a server-rendered version using the JSX transformer in Rails middleware</a>.</p>
<h2><a class="anchor" name="react-and-object.observe"></a>React and Object.observe <a class="hash-link" href="#react-and-object.observe">#</a></h2>
<p>Check out <a href="https://github.com/fdecampredon">François de Campredon</a>&#39;s implementation of <a href="https://github.com/fdecampredon/react-observe-todomvc/">TodoMVC based on React and ES6&#39;s Object.observe</a>.</p>
<h2><a class="anchor" name="react-and-angular"></a>React and Angular <a class="hash-link" href="#react-and-angular">#</a></h2>
<p>Ian Bicking (<a href="https://twitter.com/ianbicking">@ianbicking</a>) of Mozilla Labs <a href="https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE">explains why he &quot;decided to go with React instead of Angular.js&quot;</a>.</p>
<h3><a class="anchor" name="ng-react-update"></a>ng-React Update <a class="hash-link" href="#ng-react-update">#</a></h3>
<p><a href="https://github.com/davidchang">David Chang</a> works through some performance improvements of his <a href="https://github.com/davidchang/ngReact">ngReact</a> project. His post <a href="http://davidandsuzi.com/ngreact-update/">&quot;ng-React Update - React 0.9 and Angular Track By&quot;</a> includes some helpful advice on boosting render performance for Angular components.</p>
<blockquote>
<p>Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I&#39;ll admit that you need to know how to twist the right knobs to get performance.</p>
<p>That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn&#39;t actually get it any faster. So pretty impressive stuff.</p>
<p><a href="http://davidandsuzi.com/ngreact-update/">Read the full post...</a></p>
</blockquote>
<p>React was also recently mentioned at ng-conf, where the Angular team commented on React&#39;s concept of the virtual DOM:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-and-web-components"></a>React and Web Components <a class="hash-link" href="#react-and-web-components">#</a></h2>
<p>Jonathan Krause (<a href="https://twitter.com/jonykrause">@jonykrause</a>) offers his thoughts regarding <a href="http://jonykrau.se/posts/the-value-of-react">parallels between React and Web Components</a>, highlighting the value of React&#39;s ability to render pages on the server practically for free.</p>
<h2><a class="anchor" name="immutable-react"></a>Immutable React <a class="hash-link" href="#immutable-react">#</a></h2>
<p><a href="http://pk11.kinja.com/">Peter Hausel</a> shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to <a href="https://npmjs.org/package/mori">mori</a>), really taking advantage of the framework&#39;s one-way reactive data binding:</p>
<blockquote>
<p>Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.</p>
<p><a href="http://tech.kinja.com/immutable-react-1495205675">Read the full post</a></p>
</blockquote>
<h2><a class="anchor" name="d3-and-react"></a>D3 and React <a class="hash-link" href="#d3-and-react">#</a></h2>
<p><a href="http://10consulting.com/">Ben Smith</a> built some great SVG-based charting components using a little less of D3 and a little more of React: <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/">D3 and React - the future of charting components?</a></p>
<h2><a class="anchor" name="om-and-react"></a>Om and React <a class="hash-link" href="#om-and-react">#</a></h2>
<p>Josh Haberman (<a href="https://twitter.com/JoshHaberman">@joshhaberman</a>) discusses performance differences between React, Om and traditional MVC frameworks in &quot;<a href="http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html">A closer look at OM vs React performance</a>&quot;.</p>
<p>Speaking of Om: <a href="https://github.com/sgrove/omchaya">Omchaya</a> by Sean Grove (<a href="https://twitter.com/sgrove">@sgrove</a>) is a neat Cljs/Om example project.</p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
</div>
</div>
<div class="pagination">
blog/page3/index.html
+85 -114
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,89 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></h1>
<p class="meta">March 14, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>In this Round-up, we are taking a few closer looks at React&#39;s interplay with different frameworks and architectures.</p>
<h2><a class="anchor" name="little-framework-big-splash"></a>&quot;Little framework BIG splash&quot; <a class="hash-link" href="#little-framework-big-splash">#</a></h2>
<p>Let&#39;s start with yet another refreshing introduction to React: Craig Savolainen (<a href="https://twitter.com/maedhr">@maedhr</a>) walks through some first steps, demonstrating <a href="http://infinitemonkeys.influitive.com/little-framework-big-splash">how to build a Google Maps component</a> using React.</p>
<h2><a class="anchor" name="architecting-your-app-with-react"></a>Architecting your app with react <a class="hash-link" href="#architecting-your-app-with-react">#</a></h2>
<p>Brandon Konkle (<a href="https://twitter.com/bkonkle">@bkonkle</a>)
<a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Architecting your app with react</a>
We&#39;re looking forward to part 2!</p>
<blockquote>
<p>React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You&#39;ll often see React used to manage specific parts of an application&#39;s UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application&#39;s interface.</p>
<p><a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="react-vs.-async-dom-manipulation"></a>React vs. async DOM manipulation <a class="hash-link" href="#react-vs.-async-dom-manipulation">#</a></h2>
<p>Eliseu Monar (<a href="https://twitter.com/eliseumds">@eliseumds</a>)&#39;s post &quot;<a href="http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering">ReactJS vs async concurrent rendering</a>&quot; is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.</p>
<h2><a class="anchor" name="react-scala-and-the-play-framework"></a>React, Scala and the Play Framework <a class="hash-link" href="#react-scala-and-the-play-framework">#</a></h2>
<p><a href="http://matthiasnehlsen.com/">Matthias Nehlsen</a> wrote a detailed introductory piece on <a href="http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/">React and the Play Framework</a>, including a helpful architectural diagram of a typical React app.</p>
<p>Nehlsen&#39;s React frontend is the second implementation of his chat application&#39;s frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.</p>
<p>In <a href="http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/">another article</a>, he walks us through the process of using React with scala.js to implement app-wide undo functionality.</p>
<p>Also check out his <a href="http://m.ustream.tv/recorded/42780242">talk</a> at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.</p>
<h2><a class="anchor" name="react-and-backbone"></a>React and Backbone <a class="hash-link" href="#react-and-backbone">#</a></h2>
<p>The folks over at <a href="https://venmo.com/">Venmo</a> are using React in conjunction with Backbone.
Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html">this detailed piece</a> about why React and Backbone are &quot;a fantastic pairing&quot;.</p>
<h2><a class="anchor" name="react-vs.-ember"></a>React vs. Ember <a class="hash-link" href="#react-vs.-ember">#</a></h2>
<p>Eric Berry (<a href="https://twitter.com/coderberry">@coderberry</a>) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: <a href="http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/">&quot;Facebook React vs. Ember&quot;</a>.</p>
<h2><a class="anchor" name="react-and-plain-old-html"></a>React and plain old HTML <a class="hash-link" href="#react-and-plain-old-html">#</a></h2>
<p>Daniel Lo Nigro (<a href="https://twitter.com/Daniel15">@Daniel15</a>) created <a href="https://github.com/reactjs/react-magic">React-Magic</a>, which leverages React to ajaxify plain old html pages and even <a href="http://stuff.dan.cx/facebook/react-hacks/magic/red.php">allows CSS transitions between pageloads</a>.</p>
<blockquote>
<p>React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to &quot;diff&quot; the old HTML with the new HTML, and only update the parts of the DOM that have been changed.</p>
<p><a href="https://github.com/reactjs/react-magic">Check out the project on GitHub...</a></p>
</blockquote>
<p>On a related note, <a href="https://turbo-react.herokuapp.com/">Reactize</a> by Ross Allen (<a href="https://twitter.com/ssorallen">@ssorallen</a>) is a similarly awesome project: A wrapper for Rails&#39; <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, which seems to have inspired John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) to then create <a href="http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/">a server-rendered version using the JSX transformer in Rails middleware</a>.</p>
<h2><a class="anchor" name="react-and-object.observe"></a>React and Object.observe <a class="hash-link" href="#react-and-object.observe">#</a></h2>
<p>Check out <a href="https://github.com/fdecampredon">François de Campredon</a>&#39;s implementation of <a href="https://github.com/fdecampredon/react-observe-todomvc/">TodoMVC based on React and ES6&#39;s Object.observe</a>.</p>
<h2><a class="anchor" name="react-and-angular"></a>React and Angular <a class="hash-link" href="#react-and-angular">#</a></h2>
<p>Ian Bicking (<a href="https://twitter.com/ianbicking">@ianbicking</a>) of Mozilla Labs <a href="https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE">explains why he &quot;decided to go with React instead of Angular.js&quot;</a>.</p>
<h3><a class="anchor" name="ng-react-update"></a>ng-React Update <a class="hash-link" href="#ng-react-update">#</a></h3>
<p><a href="https://github.com/davidchang">David Chang</a> works through some performance improvements of his <a href="https://github.com/davidchang/ngReact">ngReact</a> project. His post <a href="http://davidandsuzi.com/ngreact-update/">&quot;ng-React Update - React 0.9 and Angular Track By&quot;</a> includes some helpful advice on boosting render performance for Angular components.</p>
<blockquote>
<p>Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I&#39;ll admit that you need to know how to twist the right knobs to get performance.</p>
<p>That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn&#39;t actually get it any faster. So pretty impressive stuff.</p>
<p><a href="http://davidandsuzi.com/ngreact-update/">Read the full post...</a></p>
</blockquote>
<p>React was also recently mentioned at ng-conf, where the Angular team commented on React&#39;s concept of the virtual DOM:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-and-web-components"></a>React and Web Components <a class="hash-link" href="#react-and-web-components">#</a></h2>
<p>Jonathan Krause (<a href="https://twitter.com/jonykrause">@jonykrause</a>) offers his thoughts regarding <a href="http://jonykrau.se/posts/the-value-of-react">parallels between React and Web Components</a>, highlighting the value of React&#39;s ability to render pages on the server practically for free.</p>
<h2><a class="anchor" name="immutable-react"></a>Immutable React <a class="hash-link" href="#immutable-react">#</a></h2>
<p><a href="http://pk11.kinja.com/">Peter Hausel</a> shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to <a href="https://npmjs.org/package/mori">mori</a>), really taking advantage of the framework&#39;s one-way reactive data binding:</p>
<blockquote>
<p>Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.</p>
<p><a href="http://tech.kinja.com/immutable-react-1495205675">Read the full post</a></p>
</blockquote>
<h2><a class="anchor" name="d3-and-react"></a>D3 and React <a class="hash-link" href="#d3-and-react">#</a></h2>
<p><a href="http://10consulting.com/">Ben Smith</a> built some great SVG-based charting components using a little less of D3 and a little more of React: <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/">D3 and React - the future of charting components?</a></p>
<h2><a class="anchor" name="om-and-react"></a>Om and React <a class="hash-link" href="#om-and-react">#</a></h2>
<p>Josh Haberman (<a href="https://twitter.com/JoshHaberman">@joshhaberman</a>) discusses performance differences between React, Om and traditional MVC frameworks in &quot;<a href="http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html">A closer look at OM vs React performance</a>&quot;.</p>
<p>Speaking of Om: <a href="https://github.com/sgrove/omchaya">Omchaya</a> by Sean Grove (<a href="https://twitter.com/sgrove">@sgrove</a>) is a neat Cljs/Om example project.</p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></h1>
<p class="meta">February 24, 2014 by Jonas Gebhardt</p>
@@ -473,118 +556,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></h1>
<p class="meta">February 5, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)&#39;s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">&quot;The Future of Javascript MVC Frameworks&quot;</a>.</p>
<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
<h2><a class="anchor" name="react-another-level-of-indirection"></a>&quot;React: Another Level of Indirection&quot; <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React&#39;s &quot;Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript&quot;.</p>
<blockquote>
<p>The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.</p>
<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="http://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
<blockquote>
<p>It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.</p>
<p>The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.</p>
<p><a href="http://holmsand.github.io/reagent/">Check it out on Github...</a></p>
</blockquote>
<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
<p>React&#39;s one-way data-binding naturally lends itself to a functional programming approach. Facebook&#39;s Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
<blockquote>
<p>This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.</p>
<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
</blockquote>
<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
<p>A basic example from github:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header&gt;</span>
<span class="nt">&lt;h1&gt;</span>Header placeholder<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;nav-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Placeholder<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-&gt;</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
<span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
<span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span>
<span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
<span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
<span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span> <span class="s">&quot;main&quot;</span>
<span class="ss">:content</span> <span class="s">&quot;Hello World&quot;</span>
<span class="ss">:navigation</span> <span class="p">[[</span><span class="s">&quot;home&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
<span class="p">[</span><span class="s">&quot;next&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om (&quot;<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook&#39;s React with Immutability</a>&quot;).</p>
<blockquote>
<p>David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.</p>
<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
</blockquote>
<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
<blockquote>
<p>React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.</p>
<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
</blockquote>
<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
<p>David Nolen shows how to leverage immutable data structures to <a href="http://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.</p>
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
</div>
</div>
<div class="pagination">
blog/page4/index.html
+114 -52
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,118 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></h1>
<p class="meta">February 5, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)&#39;s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">&quot;The Future of Javascript MVC Frameworks&quot;</a>.</p>
<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
<h2><a class="anchor" name="react-another-level-of-indirection"></a>&quot;React: Another Level of Indirection&quot; <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React&#39;s &quot;Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript&quot;.</p>
<blockquote>
<p>The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.</p>
<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="http://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
<blockquote>
<p>It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.</p>
<p>The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.</p>
<p><a href="http://holmsand.github.io/reagent/">Check it out on Github...</a></p>
</blockquote>
<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
<p>React&#39;s one-way data-binding naturally lends itself to a functional programming approach. Facebook&#39;s Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
<blockquote>
<p>This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.</p>
<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
</blockquote>
<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
<p>A basic example from github:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header&gt;</span>
<span class="nt">&lt;h1&gt;</span>Header placeholder<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;nav-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Placeholder<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-&gt;</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
<span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
<span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span>
<span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
<span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
<span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span> <span class="s">&quot;main&quot;</span>
<span class="ss">:content</span> <span class="s">&quot;Hello World&quot;</span>
<span class="ss">:navigation</span> <span class="p">[[</span><span class="s">&quot;home&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
<span class="p">[</span><span class="s">&quot;next&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om (&quot;<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook&#39;s React with Immutability</a>&quot;).</p>
<blockquote>
<p>David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.</p>
<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
</blockquote>
<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
<blockquote>
<p>React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.</p>
<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
</blockquote>
<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
<p>David Nolen shows how to leverage immutable data structures to <a href="http://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.</p>
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></h1>
<p class="meta">January 6, 2014 by Vjeux</p>
@@ -364,56 +476,6 @@ componentDidUpdate: function() {
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></h1>
<p class="meta">December 19, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>I&#39;ll start by answering the obvious question:</p>
<blockquote>
<p>What happened to 0.6 and 0.7?</p>
</blockquote>
<p>It&#39;s become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that&#39;s a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our <code>react-tools</code> module which includes React, but when browserifying that ends up packaging all of <code>esprima</code> and some other dependencies that aren&#39;t needed on the client. So we wanted to make this whole experience better.</p>
<p>We talked with <a href="https://github.com/jeffbski">Jeff Barczewski</a> who was the owner of the <code>react</code> module on npm. He was kind enough to transition ownership to us and release his package under a different name: <code>autoflow</code>. I encourage you to <a href="https://github.com/jeffbski/autoflow">check it out</a> if you&#39;re writing a lot of asynchronous code. In order to not break all of <code>react</code>&#39;s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We&#39;re also including a warning if you use our <code>react</code> module like you would use the previous package.</p>
<p>In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven&#39;t added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.</p>
<p>We hope that by releasing <code>react</code> on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Added support for more attributes:
<ul>
<li><code>rows</code> &amp; <code>cols</code> for <code>&lt;textarea&gt;</code></li>
<li><code>defer</code> &amp; <code>async</code> for <code>&lt;script&gt;</code></li>
<li><code>loop</code> for <code>&lt;audio&gt;</code> &amp; <code>&lt;video&gt;</code></li>
<li><code>autoCorrect</code> for form fields (a non-standard attribute only supported by mobile WebKit)</li>
</ul></li>
<li>Improved error messages</li>
<li>Fixed Selection events in IE11</li>
<li>Added <code>onContextMenu</code> events</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>Fixed bugs with TransitionGroup when children were undefined</li>
<li>Added support for <code>onTransition</code></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Upgraded <code>jstransform</code> and <code>esprima-fb</code></li>
</ul>
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
<ul>
<li>Added support for use in IE8</li>
<li>Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)</li>
</ul>
</div>
</div>
<div class="pagination">
blog/page5/index.html
+52 -23
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,56 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></h1>
<p class="meta">December 19, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>I&#39;ll start by answering the obvious question:</p>
<blockquote>
<p>What happened to 0.6 and 0.7?</p>
</blockquote>
<p>It&#39;s become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that&#39;s a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our <code>react-tools</code> module which includes React, but when browserifying that ends up packaging all of <code>esprima</code> and some other dependencies that aren&#39;t needed on the client. So we wanted to make this whole experience better.</p>
<p>We talked with <a href="https://github.com/jeffbski">Jeff Barczewski</a> who was the owner of the <code>react</code> module on npm. He was kind enough to transition ownership to us and release his package under a different name: <code>autoflow</code>. I encourage you to <a href="https://github.com/jeffbski/autoflow">check it out</a> if you&#39;re writing a lot of asynchronous code. In order to not break all of <code>react</code>&#39;s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We&#39;re also including a warning if you use our <code>react</code> module like you would use the previous package.</p>
<p>In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven&#39;t added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.</p>
<p>We hope that by releasing <code>react</code> on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Added support for more attributes:
<ul>
<li><code>rows</code> &amp; <code>cols</code> for <code>&lt;textarea&gt;</code></li>
<li><code>defer</code> &amp; <code>async</code> for <code>&lt;script&gt;</code></li>
<li><code>loop</code> for <code>&lt;audio&gt;</code> &amp; <code>&lt;video&gt;</code></li>
<li><code>autoCorrect</code> for form fields (a non-standard attribute only supported by mobile WebKit)</li>
</ul></li>
<li>Improved error messages</li>
<li>Fixed Selection events in IE11</li>
<li>Added <code>onContextMenu</code> events</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>Fixed bugs with TransitionGroup when children were undefined</li>
<li>Added support for <code>onTransition</code></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Upgraded <code>jstransform</code> and <code>esprima-fb</code></li>
</ul>
<h3><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h3>
<ul>
<li>Added support for use in IE8</li>
<li>Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a></h1>
<p class="meta">December 18, 2013 by Paul O'Shannessy</p>
@@ -452,27 +502,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/10/29/react-v0-5-1.html">React v0.5.1</a></h1>
<p class="meta">October 29, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
<li>Fixed bug with selection and focus.</li>
<li>Made it possible to unmount components from the document root.</li>
<li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</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>Fixed bug with transition and animation event detection.</li>
</ul>
</div>
</div>
<div class="pagination">
blog/page6/index.html
+23 -44
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,27 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></h1>
<p class="meta">October 29, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
<li>Fixed bug with selection and focus.</li>
<li>Made it possible to unmount components from the document root.</li>
<li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</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>Fixed bug with transition and animation event detection.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></h1>
<p class="meta">October 16, 2013 by Paul O'Shannessy</p>
@@ -370,48 +391,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></h1>
<p class="meta">August 19, 2013 by Kunal Mehta</p>
<hr />
<div class="post">
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
<span class="c"># For a single file, you can use a shortcut method.</span>
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
</div>
</div>
<div class="pagination">
blog/page7/index.html
+44 -43
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,48 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></h1>
<p class="meta">August 19, 2013 by Kunal Mehta</p>
<hr />
<div class="post">
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
<span class="c"># For a single file, you can use a shortcut method.</span>
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
<p class="meta">August 5, 2013 by Vjeux</p>
@@ -322,47 +364,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></h1>
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>Over the past 2 months we&#39;ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we&#39;re proud to announce the availability of React v0.4!</p>
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="http://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We&#39;ve had contributions ranging from documentation improvements to major changes to React&#39;s rendering. We&#39;ve seen people integrate React into the tools they&#39;re using and the products they&#39;re building, and we&#39;re all very excited to see what our budding community builds next!</p>
<p>React v0.4 has some big changes. We&#39;ve also restructured the documentation to better communicate how to use React. We&#39;ve summarized the changes below and linked to documentation where we think it will be especially useful.</p>
<p>When you&#39;re ready, <a href="/react/downloads.html">go download it</a>!</p>
<h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
<li>Support for more DOM elements and attributes (e.g., <code>&lt;canvas&gt;</code>)</li>
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(&lt;component&gt;, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
<li><code>prop</code> improvements: validation and default values. <a href="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="http://facebook.github.io/react/docs/multiple-components.html">Read the docs for details...</a></li>
<li>Removed <code>React.autoBind</code>. <a href="http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
<li>Improvements to forms. We&#39;ve written wrappers around <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;option&gt;</code>, and <code>&lt;select&gt;</code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="http://facebook.github.io/react/docs/forms.html">Read the docs for details...</a></li>
<li>We&#39;ve implemented an improved synthetic event system that conforms to the W3C spec.</li>
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as its second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you&#39;ll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
</ul>
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
<ul>
<li>Support for comment nodes <code>&lt;div&gt;{/* this is a comment and won&#39;t be rendered */}&lt;/div&gt;</code></li>
<li>Children are now transformed directly into arguments instead of being wrapped in an array
E.g. <code>&lt;div&gt;&lt;Component1/&gt;&lt;Component2/&gt;&lt;/div&gt;</code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
If you were using React without JSX previously, your code should still work.</li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Fixed a number of bugs when transforming directories</li>
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
</ul>
</div>
</div>
<div class="pagination">
blog/page8/index.html
+43 -26
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,47 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></h1>
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>Over the past 2 months we&#39;ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we&#39;re proud to announce the availability of React v0.4!</p>
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="http://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We&#39;ve had contributions ranging from documentation improvements to major changes to React&#39;s rendering. We&#39;ve seen people integrate React into the tools they&#39;re using and the products they&#39;re building, and we&#39;re all very excited to see what our budding community builds next!</p>
<p>React v0.4 has some big changes. We&#39;ve also restructured the documentation to better communicate how to use React. We&#39;ve summarized the changes below and linked to documentation where we think it will be especially useful.</p>
<p>When you&#39;re ready, <a href="/react/downloads.html">go download it</a>!</p>
<h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
<li>Support for more DOM elements and attributes (e.g., <code>&lt;canvas&gt;</code>)</li>
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(&lt;component&gt;, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
<li><code>prop</code> improvements: validation and default values. <a href="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="http://facebook.github.io/react/docs/multiple-components.html">Read the docs for details...</a></li>
<li>Removed <code>React.autoBind</code>. <a href="http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
<li>Improvements to forms. We&#39;ve written wrappers around <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;option&gt;</code>, and <code>&lt;select&gt;</code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="http://facebook.github.io/react/docs/forms.html">Read the docs for details...</a></li>
<li>We&#39;ve implemented an improved synthetic event system that conforms to the W3C spec.</li>
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as its second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you&#39;ll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
</ul>
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
<ul>
<li>Support for comment nodes <code>&lt;div&gt;{/* this is a comment and won&#39;t be rendered */}&lt;/div&gt;</code></li>
<li>Children are now transformed directly into arguments instead of being wrapped in an array
E.g. <code>&lt;div&gt;&lt;Component1/&gt;&lt;Component2/&gt;&lt;/div&gt;</code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
If you were using React without JSX previously, your code should still work.</li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Fixed a number of bugs when transforming directories</li>
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></h1>
<p class="meta">July 11, 2013 by Paul O'Shannessy</p>
@@ -333,30 +374,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></h1>
<p class="meta">June 21, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>We have a ton of great stuff coming in v0.4, but in the meantime we&#39;re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>
<h2><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h2>
<ul>
<li>Upgrade Commoner so <code>require</code> statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn&#39;t translate well for other consumers of <code>bin/jsx</code>.</li>
<li>Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.</li>
<li>Freeze our esprima dependency.</li>
</ul>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li>Allow reusing the same DOM node to render different components. e.g. <code>React.renderComponent(&lt;div/&gt;, domNode); React.renderComponent(&lt;span/&gt;, domNode);</code> will work now.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.</li>
</ul>
</div>
</div>
<div class="pagination">
blog/page9/index.html
+26 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/07/24/react-v0.11.1.html">React v0.11.1</a></li>
<li><a href="/react/blog/2014/07/17/react-v0.11.html">React v0.11</a></li>
<li><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></li>
@@ -81,8 +83,6 @@
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,30 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></h1>
<p class="meta">June 21, 2013 by Paul O'Shannessy</p>
<hr />
<div class="post">
<p>We have a ton of great stuff coming in v0.4, but in the meantime we&#39;re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>
<h2><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h2>
<ul>
<li>Upgrade Commoner so <code>require</code> statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn&#39;t translate well for other consumers of <code>bin/jsx</code>.</li>
<li>Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.</li>
<li>Freeze our esprima dependency.</li>
</ul>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li>Allow reusing the same DOM node to render different components. e.g. <code>React.renderComponent(&lt;div/&gt;, domNode); React.renderComponent(&lt;span/&gt;, domNode);</code> will work now.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></h1>
<p class="meta">June 19, 2013 by Vjeux</p>
css/react.css
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/addons.html
+13 -6
View File
@@ -440,12 +440,19 @@
<p><code>React.addons</code> is where we park some useful utilities for building React apps. <strong>These should be considered experimental</strong> but will eventually be rolled into core or a blessed utilities library:</p>
<ul>
<li><a href="animation.html"><code>ReactTransitions</code></a>, for dealing with animations and transitions that are usually not simple to implement, such as before a component&#39;s removal.</li>
<li><a href="two-way-binding-helpers.html"><code>ReactLink</code></a>, to simplify the coordination between user&#39;s form input data and and the component&#39;s state.</li>
<li><a href="class-name-manipulation.html"><code>classSet()</code></a>, for manipulating the DOM <code>class</code> string a bit more cleanly.</li>
<li><a href="test-utils.html"><code>ReactTestUtils</code></a>, simple helpers for writing test cases (unminified build only).</li>
<li><a href="clone-with-props.html"><code>cloneWithProps()</code></a>, to make shallow copies of React components and change their props.</li>
<li><a href="update.html"><code>update()</code></a>, a helper function that makes dealing with immutable data in JavaScript easier.</li>
<li><a href="animation.html"><code>TransitionGroup</code> and <code>CSSTransitionGroup</code></a>, for dealing with animations and transitions that are usually not simple to implement, such as before a component&#39;s removal.</li>
<li><a href="two-way-binding-helpers.html"><code>LinkedStateMixin</code></a>, to simplify the coordination between user&#39;s form input data and the component&#39;s state.</li>
<li><a href="class-name-manipulation.html"><code>classSet</code></a>, for manipulating the DOM <code>class</code> string a bit more cleanly.</li>
<li><a href="test-utils.html"><code>TestUtils</code></a>, simple helpers for writing test cases (unminified build only).</li>
<li><a href="clone-with-props.html"><code>cloneWithProps</code></a>, to make shallow copies of React components and change their props.</li>
<li><a href="update.html"><code>update</code></a>, a helper function that makes dealing with immutable data in JavaScript easier.</li>
</ul>
<p>The add-ons below are in the development (unminified) version of React only:</p>
<ul>
<li><a href="pure-render-mixin.html"><code>PureRenderMixin</code></a>, a performance booster under certain situations.</li>
<li><a href="perf.html"><code>Perf</code></a>, for measuring performance and giving you hint where to optimize.</li>
</ul>
<p>To get the add-ons, use <code>react-with-addons.js</code> (and its minified counterpart) rather than the common <code>react.js</code>.</p>
docs/displaying-data.html
+2 -2
View File
@@ -444,8 +444,8 @@
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;example&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
docs/flux-todo-list.html
-15
View File
@@ -477,21 +477,6 @@
<span class="kd">var</span> <span class="nx">_callbacks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">_promises</span> <span class="o">=</span> <span class="p">[];</span>
<span class="cm">/**</span>
<span class="cm"> * Add a promise to the queue of callback invocation promises.</span>
<span class="cm"> * @param {function} callback The Store&#39;s registered callback.</span>
<span class="cm"> * @param {object} payload The data from the Action.</span>
<span class="cm"> */</span>
<span class="kd">var</span> <span class="nx">_addPromise</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">callback</span><span class="p">,</span> <span class="nx">payload</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_promises</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">new</span> <span class="nx">Promise</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">reject</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">callback</span><span class="p">(</span><span class="nx">payload</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">resolve</span><span class="p">(</span><span class="nx">payload</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">reject</span><span class="p">(</span><span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">&#39;Dispatcher callback unsuccessful&#39;</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}));</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">Dispatcher</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{};</span>
<span class="nx">Dispatcher</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="nx">merge</span><span class="p">(</span><span class="nx">Dispatcher</span><span class="p">.</span><span class="nx">prototype</span><span class="p">,</span> <span class="p">{</span>
docs/getting-started.html
+2 -2
View File
@@ -448,8 +448,8 @@
<p>Download the starter kit to get started.</p>
<div class="buttons-unit downloads">
<a href="/react/downloads/react-0.11.0.zip" class="button">
Download Starter Kit 0.11.0
<a href="/react/downloads/react-0.11.1.zip" class="button">
Download Starter Kit 0.11.1
</a>
</div>
docs/getting-started.zh-CN.html
+2 -2
View File
@@ -448,8 +448,8 @@
<p>开始先下载入门教程包</p>
<div class="buttons-unit downloads">
<a href="/react/downloads/react-0.11.0.zip" class="button">
下载入门教程 0.11.0
<a href="/react/downloads/react-0.11.1.zip" class="button">
下载入门教程 0.11.1
</a>
</div>
docs/perf.html
+3 -1
View File
@@ -446,7 +446,9 @@
<p>The dev build of React is slower than the prod build, due to all the extra logic for providing, for example, React&#39;s friendly console warnings (stripped away in the prod build). Therefore, the profiler only serves to indicate the <em>relatively</em> expensive parts of your app.</p>
</blockquote>
<h2><a class="anchor" name="general-api"></a>General API <a class="hash-link" href="#general-api">#</a></h2><h3><a class="anchor" name="perf.start-and-perf.stop"></a><code>Perf.start()</code> and <code>Perf.stop()</code> <a class="hash-link" href="#perf.start-and-perf.stop">#</a></h3>
<h2><a class="anchor" name="general-api"></a>General API <a class="hash-link" href="#general-api">#</a></h2>
<p>The <code>Perf</code> object documented here is exposed as <code>React.addons.Perf</code> when using the <code>react-with-addons.js</code> build in development mode.</p>
<h3><a class="anchor" name="perf.start-and-perf.stop"></a><code>Perf.start()</code> and <code>Perf.stop()</code> <a class="hash-link" href="#perf.start-and-perf.stop">#</a></h3>
<p>Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.</p>
<h3><a class="anchor" name="perf.printinclusivemeasurements"></a><code>Perf.printInclusive(measurements)</code> <a class="hash-link" href="#perf.printinclusivemeasurements">#</a></h3>
<p>Prints the overall time taken. If no argument&#39;s passed, defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:</p>
docs/reconciliation.html
+1 -1
View File
@@ -486,7 +486,7 @@ renderB: <span class="nt">&lt;div</span> <span class="na">style=</span><span cla
<p>The previous component is now operational. Its <code>render()</code> method is called and the diff algorithm restarts with the new result and the previous result.</p>
<h2><a class="anchor" name="list-wise-diff"></a>List-wise diff <a class="hash-link" href="#list-wise-diff">#</a></h2><h3><a class="anchor" name="problematic-case"></a>Problematic Case <a class="hash-link" href="#problematic-case">#</a></h3>
<p>In order to do children reconciliation, React adopts a very naive approach. It goes over the list of children both at the same time and whenever there&#39;s a difference generates a mutation.</p>
<p>In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there&#39;s a difference.</p>
<p>For example if you add an element at the end:</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
docs/tutorial.html
+4 -4
View File
@@ -462,8 +462,8 @@
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.jquery.com/jquery-1.10.0.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
@@ -602,8 +602,8 @@
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://code.jquery.com/jquery-1.10.0.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<span class="hll"> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class="nt">&lt;/head&gt;</span>
downloads.html
+12 -12
View File
@@ -65,29 +65,29 @@
<a href="/react/docs/getting-started.html">get started with React</a>. The starter kit includes React, the in-browser JSX transformer, and some simple example apps.</p>
<div class="buttons-unit downloads">
<a href="/react/downloads/react-0.11.0.zip" class="button">
Download Starter Kit 0.11.0
<a href="/react/downloads/react-0.11.1.zip" class="button">
Download Starter Kit 0.11.1
</a>
</div>
<h2><a class="anchor" name="development-vs.-production-builds"></a>Development vs. Production Builds <a class="hash-link" href="#development-vs.-production-builds">#</a></h2>
<p>We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.</p>
<p>If you&#39;re just starting out, make sure to use the development version.</p>
<h2><a class="anchor" name="individual-downloads"></a>Individual Downloads <a class="hash-link" href="#individual-downloads">#</a></h2><h4><a class="anchor" name="react-0.11.0-development"></a><a href="http://fb.me/react-0.11.0.js">React 0.11.0 (development)</a> <a class="hash-link" href="#react-0.11.0-development">#</a></h4>
<h2><a class="anchor" name="individual-downloads"></a>Individual Downloads <a class="hash-link" href="#individual-downloads">#</a></h2><h4><a class="anchor" name="react-0.11.1-development"></a><a href="http://fb.me/react-0.11.1.js">React 0.11.1 (development)</a> <a class="hash-link" href="#react-0.11.1-development">#</a></h4>
<p>The uncompressed, development version of React core with inline documentation.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-0.11.0-production"></a><a href="http://fb.me/react-0.11.0.min.js">React 0.11.0 (production)</a> <a class="hash-link" href="#react-0.11.0-production">#</a></h4>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-0.11.1-production"></a><a href="http://fb.me/react-0.11.1.min.js">React 0.11.1 (production)</a> <a class="hash-link" href="#react-0.11.1-production">#</a></h4>
<p>The compressed, production version of React core.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.0.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.0-development"></a><a href="http://fb.me/react-with-addons-0.11.0.js">React with Add-Ons 0.11.0 (development)</a> <a class="hash-link" href="#react-with-add-ons-0.11.0-development">#</a></h4>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.1-development"></a><a href="http://fb.me/react-with-addons-0.11.1.js">React with Add-Ons 0.11.1 (development)</a> <a class="hash-link" href="#react-with-add-ons-0.11.1-development">#</a></h4>
<p>The uncompressed, development version of React with <a href="/react/docs/addons.html">add-ons</a>.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.0-production"></a><a href="http://fb.me/react-with-addons-0.11.0.min.js">React with Add-Ons 0.11.0 (production)</a> <a class="hash-link" href="#react-with-add-ons-0.11.0-production">#</a></h4>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.1-production"></a><a href="http://fb.me/react-with-addons-0.11.1.min.js">React with Add-Ons 0.11.1 (production)</a> <a class="hash-link" href="#react-with-add-ons-0.11.1-production">#</a></h4>
<p>The compressed, production version of React with <a href="/react/docs/addons.html">add-ons</a>.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.0.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="jsx-transformer"></a><a href="http://fb.me/JSXTransformer-0.11.0.js">JSX Transformer</a> <a class="hash-link" href="#jsx-transformer">#</a></h4>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="jsx-transformer"></a><a href="http://fb.me/JSXTransformer-0.11.1.js">JSX Transformer</a> <a class="hash-link" href="#jsx-transformer">#</a></h4>
<p>The JSX transformer used to support <a href="/react/docs/jsx-in-depth.html">XML syntax</a> in JavaScript.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.0.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<p>All scripts are also available via <a href="http://cdnjs.com/libraries/react/">CDNJS</a>.</p>
<h2><a class="anchor" name="npm"></a>npm <a class="hash-link" href="#npm">#</a></h2>
downloads/react-0.11.1.zip
BIN
View File
Binary file not shown.
feed.xml
+60 -83
View File
@@ -6,9 +6,59 @@
<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.11.1</title>
<description>&lt;p&gt;Today we&amp;#39;re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they&amp;#39;ve begun upgrading.&lt;/p&gt;
&lt;p&gt;The first of these is the most major and resulted in a regression with the use of &lt;code&gt;setState&lt;/code&gt; inside &lt;code&gt;componentWillMount&lt;/code&gt; when using React on the server. These &lt;code&gt;setState&lt;/code&gt; calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as &lt;code&gt;document&lt;/code&gt; is not defined.&lt;/p&gt;
&lt;p&gt;There are several fixes we&amp;#39;re including in v0.11.1 that are focused around the newly supported &lt;code&gt;event.getModifierState()&lt;/code&gt; function. We made some adjustments to improve this cross-browser standardization.&lt;/p&gt;
&lt;p&gt;The final fix we&amp;#39;re including is to better support a workaround for some IE8 behavior. The edge-case bug we&amp;#39;re fixing was also present in v0.9 and v0.10, so while it wasn&amp;#39;t a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.&lt;/p&gt;
&lt;p&gt;We&amp;#39;d also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around &lt;a href=&quot;/react/blog/2014/07/17/react-v0.11.html#descriptors&quot;&gt;Descriptors&lt;/a&gt; and &lt;a href=&quot;/react/blog/2014/07/17/react-v0.11.html#prop-type-validation&quot;&gt;Prop Type Validation&lt;/a&gt;.&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.11.1.js&quot;&gt;http://fb.me/react-0.11.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.11.1.min.js&quot;&gt;http://fb.me/react-0.11.1.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.11.1.js&quot;&gt;http://fb.me/react-with-addons-0.11.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.1.min.js&quot;&gt;http://fb.me/react-with-addons-0.11.1.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.11.1.js&quot;&gt;http://fb.me/JSXTransformer-0.11.1.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.11.1&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;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;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;&lt;code&gt;setState&lt;/code&gt; can be called inside &lt;code&gt;componentWillMount&lt;/code&gt; in non-DOM environments&lt;/li&gt;
&lt;li&gt;&lt;code&gt;SyntheticMouseEvent.getEventModifierState&lt;/code&gt; correctly renamed to &lt;code&gt;getModifierState&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;getModifierState&lt;/code&gt; correctly returns a &lt;code&gt;boolean&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;getModifierState&lt;/code&gt; is now correctly case sensitive&lt;/li&gt;
&lt;li&gt;Empty Text node used in IE8 &lt;code&gt;innerHTML&lt;/code&gt; workaround is now removed, fixing rerendering in certain cases&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsxtransformer&quot;&gt;&lt;/a&gt;JSXTransformer &lt;a class=&quot;hash-link&quot; href=&quot;#jsxtransformer&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Fix duplicate variable declaration (caused issues in some browsers)&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-07-24T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/24/react-v0.11.1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/24/react-v0.11.1.html</guid>
</item>
<item>
<title>React v0.11</title>
<description>&lt;p&gt;We&amp;#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using &lt;code&gt;jsx --harmony&lt;/code&gt;, fixed a small regression with &lt;code&gt;statics&lt;/code&gt;, and made sure we actually exposed the new API we said we were shipping: &lt;code&gt;React.Children.count&lt;/code&gt;.&lt;/p&gt;
<description>&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; We missed a few important changes in our initial post and changelog. We&amp;#39;ve updated this post with details about &lt;a href=&quot;#descriptors&quot;&gt;Descriptors&lt;/a&gt; and &lt;a href=&quot;#prop-type-validation&quot;&gt;Prop Type Validation&lt;/a&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;We&amp;#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using &lt;code&gt;jsx --harmony&lt;/code&gt;, fixed a small regression with &lt;code&gt;statics&lt;/code&gt;, and made sure we actually exposed the new API we said we were shipping: &lt;code&gt;React.Children.count&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.&lt;/p&gt;
@@ -78,9 +128,18 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Keyboard and mouse events also now include a normalized &lt;code&gt;e.getModifierState()&lt;/code&gt; that works consistently across browsers.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;descriptors&quot;&gt;&lt;/a&gt;Descriptors &lt;a class=&quot;hash-link&quot; href=&quot;#descriptors&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In our &lt;a href=&quot;http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount&quot;&gt;v0.10 release notes&lt;/a&gt;, we called out that we were deprecating the existing behavior of the component function call (eg &lt;code&gt;component = MyComponent(props, ...children)&lt;/code&gt; or &lt;code&gt;component = &amp;lt;MyComponent prop={...}/&amp;gt;&lt;/code&gt;). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg &lt;code&gt;component.setProps(...)&lt;/code&gt;). This no longer works. &lt;code&gt;component&lt;/code&gt; in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.&lt;/p&gt;
&lt;p&gt;Along with this change to descriptors, &lt;code&gt;React.isValidComponent&lt;/code&gt; and &lt;code&gt;React.PropTypes.component&lt;/code&gt; now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of &lt;code&gt;MyComponent()&lt;/code&gt;, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we&amp;#39;re working to make sure we are consistent with our terminology.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;prop-type-validation&quot;&gt;&lt;/a&gt;Prop Type Validation &lt;a class=&quot;hash-link&quot; href=&quot;#prop-type-validation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Previously &lt;code&gt;React.PropTypes&lt;/code&gt; validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply &lt;code&gt;console.log&lt;/code&gt; your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (&lt;em&gt;not throw&lt;/em&gt;) an &lt;code&gt;Error&lt;/code&gt; object. We then log the &lt;code&gt;error.message&lt;/code&gt; property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an &lt;code&gt;Error&lt;/code&gt; with your message instead.&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;breaking-changes&quot;&gt;&lt;/a&gt;Breaking Changes &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-changes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;getDefaultProps()&lt;/code&gt; is now called once per class and shared across all instances&lt;/li&gt;
&lt;li&gt;&lt;code&gt;MyComponent()&lt;/code&gt; now returns a descriptor, not an instance&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.isValidComponent&lt;/code&gt; and &lt;code&gt;React.PropTypes.component&lt;/code&gt; validate &lt;em&gt;descriptors&lt;/em&gt;, not component instances.&lt;/li&gt;
&lt;li&gt;Custom &lt;code&gt;propType&lt;/code&gt; validators should return an &lt;code&gt;Error&lt;/code&gt; instead of logging directly&lt;/li&gt;
&lt;/ul&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;
@@ -582,87 +641,5 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/03/19/react-v0.10-rc1.html</guid>
</item>
<item>
<title>Community Round-up #18</title>
<description>&lt;p&gt;In this Round-up, we are taking a few closer looks at React&amp;#39;s interplay with different frameworks and architectures.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;little-framework-big-splash&quot;&gt;&lt;/a&gt;&amp;quot;Little framework BIG splash&amp;quot; &lt;a class=&quot;hash-link&quot; href=&quot;#little-framework-big-splash&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Let&amp;#39;s start with yet another refreshing introduction to React: Craig Savolainen (&lt;a href=&quot;https://twitter.com/maedhr&quot;&gt;@maedhr&lt;/a&gt;) walks through some first steps, demonstrating &lt;a href=&quot;http://infinitemonkeys.influitive.com/little-framework-big-splash&quot;&gt;how to build a Google Maps component&lt;/a&gt; using React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;architecting-your-app-with-react&quot;&gt;&lt;/a&gt;Architecting your app with react &lt;a class=&quot;hash-link&quot; href=&quot;#architecting-your-app-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Brandon Konkle (&lt;a href=&quot;https://twitter.com/bkonkle&quot;&gt;@bkonkle&lt;/a&gt;)
&lt;a href=&quot;http://lincolnloop.com/blog/architecting-your-app-react-part-1/&quot;&gt;Architecting your app with react&lt;/a&gt;
We&amp;#39;re looking forward to part 2!&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You&amp;#39;ll often see React used to manage specific parts of an application&amp;#39;s UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application&amp;#39;s interface.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://lincolnloop.com/blog/architecting-your-app-react-part-1/&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;react-vs.-async-dom-manipulation&quot;&gt;&lt;/a&gt;React vs. async DOM manipulation &lt;a class=&quot;hash-link&quot; href=&quot;#react-vs.-async-dom-manipulation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Eliseu Monar (&lt;a href=&quot;https://twitter.com/eliseumds&quot;&gt;@eliseumds&lt;/a&gt;)&amp;#39;s post &amp;quot;&lt;a href=&quot;http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering&quot;&gt;ReactJS vs async concurrent rendering&lt;/a&gt;&amp;quot; is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-scala-and-the-play-framework&quot;&gt;&lt;/a&gt;React, Scala and the Play Framework &lt;a class=&quot;hash-link&quot; href=&quot;#react-scala-and-the-play-framework&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://matthiasnehlsen.com/&quot;&gt;Matthias Nehlsen&lt;/a&gt; wrote a detailed introductory piece on &lt;a href=&quot;http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/&quot;&gt;React and the Play Framework&lt;/a&gt;, including a helpful architectural diagram of a typical React app.&lt;/p&gt;
&lt;p&gt;Nehlsen&amp;#39;s React frontend is the second implementation of his chat application&amp;#39;s frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.&lt;/p&gt;
&lt;p&gt;In &lt;a href=&quot;http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/&quot;&gt;another article&lt;/a&gt;, he walks us through the process of using React with scala.js to implement app-wide undo functionality.&lt;/p&gt;
&lt;p&gt;Also check out his &lt;a href=&quot;http://m.ustream.tv/recorded/42780242&quot;&gt;talk&lt;/a&gt; at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-backbone&quot;&gt;&lt;/a&gt;React and Backbone &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-backbone&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The folks over at &lt;a href=&quot;https://venmo.com/&quot;&gt;Venmo&lt;/a&gt; are using React in conjunction with Backbone.
Thomas Boyt (&lt;a href=&quot;https://twitter.com/thomasaboyt&quot;&gt;@thomasaboyt&lt;/a&gt;) wrote &lt;a href=&quot;http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html&quot;&gt;this detailed piece&lt;/a&gt; about why React and Backbone are &amp;quot;a fantastic pairing&amp;quot;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-vs.-ember&quot;&gt;&lt;/a&gt;React vs. Ember &lt;a class=&quot;hash-link&quot; href=&quot;#react-vs.-ember&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Eric Berry (&lt;a href=&quot;https://twitter.com/coderberry&quot;&gt;@coderberry&lt;/a&gt;) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: &lt;a href=&quot;http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/&quot;&gt;&amp;quot;Facebook React vs. Ember&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-plain-old-html&quot;&gt;&lt;/a&gt;React and plain old HTML &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-plain-old-html&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Daniel Lo Nigro (&lt;a href=&quot;https://twitter.com/Daniel15&quot;&gt;@Daniel15&lt;/a&gt;) created &lt;a href=&quot;https://github.com/reactjs/react-magic&quot;&gt;React-Magic&lt;/a&gt;, which leverages React to ajaxify plain old html pages and even &lt;a href=&quot;http://stuff.dan.cx/facebook/react-hacks/magic/red.php&quot;&gt;allows CSS transitions between pageloads&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to &amp;quot;diff&amp;quot; the old HTML with the new HTML, and only update the parts of the DOM that have been changed.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/reactjs/react-magic&quot;&gt;Check out the project on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;On a related note, &lt;a href=&quot;https://turbo-react.herokuapp.com/&quot;&gt;Reactize&lt;/a&gt; by Ross Allen (&lt;a href=&quot;https://twitter.com/ssorallen&quot;&gt;@ssorallen&lt;/a&gt;) is a similarly awesome project: A wrapper for Rails&amp;#39; &lt;a href=&quot;https://github.com/rails/turbolinks/&quot;&gt;Turbolinks&lt;/a&gt;, which seems to have inspired John Lynch (&lt;a href=&quot;https://twitter.com/johnrlynch&quot;&gt;@johnrlynch&lt;/a&gt;) to then create &lt;a href=&quot;http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/&quot;&gt;a server-rendered version using the JSX transformer in Rails middleware&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-object.observe&quot;&gt;&lt;/a&gt;React and Object.observe &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-object.observe&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Check out &lt;a href=&quot;https://github.com/fdecampredon&quot;&gt;François de Campredon&lt;/a&gt;&amp;#39;s implementation of &lt;a href=&quot;https://github.com/fdecampredon/react-observe-todomvc/&quot;&gt;TodoMVC based on React and ES6&amp;#39;s Object.observe&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-angular&quot;&gt;&lt;/a&gt;React and Angular &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-angular&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ian Bicking (&lt;a href=&quot;https://twitter.com/ianbicking&quot;&gt;@ianbicking&lt;/a&gt;) of Mozilla Labs &lt;a href=&quot;https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE&quot;&gt;explains why he &amp;quot;decided to go with React instead of Angular.js&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;ng-react-update&quot;&gt;&lt;/a&gt;ng-React Update &lt;a class=&quot;hash-link&quot; href=&quot;#ng-react-update&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/davidchang&quot;&gt;David Chang&lt;/a&gt; works through some performance improvements of his &lt;a href=&quot;https://github.com/davidchang/ngReact&quot;&gt;ngReact&lt;/a&gt; project. His post &lt;a href=&quot;http://davidandsuzi.com/ngreact-update/&quot;&gt;&amp;quot;ng-React Update - React 0.9 and Angular Track By&amp;quot;&lt;/a&gt; includes some helpful advice on boosting render performance for Angular components.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I&amp;#39;ll admit that you need to know how to twist the right knobs to get performance.&lt;/p&gt;
&lt;p&gt;That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn&amp;#39;t actually get it any faster. So pretty impressive stuff.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://davidandsuzi.com/ngreact-update/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;React was also recently mentioned at ng-conf, where the Angular team commented on React&amp;#39;s concept of the virtual DOM:&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/srt3OBP2kGc?start=113&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-web-components&quot;&gt;&lt;/a&gt;React and Web Components &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-web-components&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Jonathan Krause (&lt;a href=&quot;https://twitter.com/jonykrause&quot;&gt;@jonykrause&lt;/a&gt;) offers his thoughts regarding &lt;a href=&quot;http://jonykrau.se/posts/the-value-of-react&quot;&gt;parallels between React and Web Components&lt;/a&gt;, highlighting the value of React&amp;#39;s ability to render pages on the server practically for free.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;immutable-react&quot;&gt;&lt;/a&gt;Immutable React &lt;a class=&quot;hash-link&quot; href=&quot;#immutable-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://pk11.kinja.com/&quot;&gt;Peter Hausel&lt;/a&gt; shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to &lt;a href=&quot;https://npmjs.org/package/mori&quot;&gt;mori&lt;/a&gt;), really taking advantage of the framework&amp;#39;s one-way reactive data binding:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://tech.kinja.com/immutable-react-1495205675&quot;&gt;Read the full post&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;d3-and-react&quot;&gt;&lt;/a&gt;D3 and React &lt;a class=&quot;hash-link&quot; href=&quot;#d3-and-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://10consulting.com/&quot;&gt;Ben Smith&lt;/a&gt; built some great SVG-based charting components using a little less of D3 and a little more of React: &lt;a href=&quot;http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/&quot;&gt;D3 and React - the future of charting components?&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;om-and-react&quot;&gt;&lt;/a&gt;Om and React &lt;a class=&quot;hash-link&quot; href=&quot;#om-and-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Josh Haberman (&lt;a href=&quot;https://twitter.com/JoshHaberman&quot;&gt;@joshhaberman&lt;/a&gt;) discusses performance differences between React, Om and traditional MVC frameworks in &amp;quot;&lt;a href=&quot;http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html&quot;&gt;A closer look at OM vs React performance&lt;/a&gt;&amp;quot;.&lt;/p&gt;
&lt;p&gt;Speaking of Om: &lt;a href=&quot;https://github.com/sgrove/omchaya&quot;&gt;Omchaya&lt;/a&gt; by Sean Grove (&lt;a href=&quot;https://twitter.com/sgrove&quot;&gt;@sgrove&lt;/a&gt;) is a neat Cljs/Om example project.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweets&quot;&gt;&lt;/a&gt;Random Tweets &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweets&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.&lt;/p&gt;&amp;mdash; John Shimek (@varikin) &lt;a href=&quot;https://twitter.com/varikin/status/436606891657949185&quot;&gt;February 20, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-03-14T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/03/14/community-roundup-18.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/03/14/community-roundup-18.html</guid>
</item>
</channel>
</rss>
index.html
+2 -2
View File
@@ -65,7 +65,7 @@
<div class="buttons-unit">
<a href="/react/docs/getting-started.html" class="button">Get Started</a>
<a href="/react/downloads.html" class="button">Download React v0.11.0</a>
<a href="/react/downloads.html" class="button">Download React v0.11.1</a>
</div>
</div>
</div>
@@ -156,7 +156,7 @@
<section class="home-bottom-section">
<div class="buttons-unit">
<a href="docs/getting-started.html" class="button">Get Started</a>
<a href="downloads.html" class="button">Download React v0.11.0</a>
<a href="downloads.html" class="button">Download React v0.11.1</a>
</div>
</section></p>
js/JSXTransformer.js
+1 -3
View File
@@ -1,5 +1,5 @@
/**
* JSXTransformer v0.11.0
* JSXTransformer v0.11.1
*/
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.JSXTransformer=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
/*!
@@ -12427,8 +12427,6 @@ var docblock = _dereq_('jstransform/src/docblock');
var transform = _dereq_('jstransform').transform;
var visitors = _dereq_('./fbtransform/visitors');
var runScripts;
var loadScripts;
var headEl;
var dummyAnchor;
var inlineScriptCount = 0;
js/react.js
Vendored
+27 -11
View File
@@ -1,5 +1,5 @@
/**
* React v0.11.0
* React v0.11.1
*/
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.React=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
/**
@@ -4202,7 +4202,7 @@ if ("production" !== "development") {
// Version exists only in the open-source version of React, not in Facebook's
// internal version.
React.version = '0.11.0';
React.version = '0.11.1';
module.exports = React;
@@ -6217,7 +6217,15 @@ var ReactCompositeComponentMixin = {
replaceState: function(completeState, callback) {
validateLifeCycleOnReplaceState(this);
this._pendingState = completeState;
ReactUpdates.enqueueUpdate(this, callback);
if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
// If we're in a componentWillMount handler, don't enqueue a rerender
// because ReactUpdates assumes we're in a browser context (which is wrong
// for server rendering) and we're about to do a render anyway.
// TODO: The callback here is ignored when setState is called from
// componentWillMount. Either fix it or disallow doing so completely in
// favor of getInitialState.
ReactUpdates.enqueueUpdate(this, callback);
}
},
/**
@@ -14979,7 +14987,7 @@ var MouseEventInterface = {
shiftKey: null,
altKey: null,
metaKey: null,
getEventModifierState: getEventModifierState,
getModifierState: getEventModifierState,
button: function(event) {
// Webkit, Firefox, IE9+
// which: 1 2 3
@@ -16465,10 +16473,10 @@ module.exports = getEventKey;
*/
var modifierKeyToProp = {
'alt': 'altKey',
'control': 'ctrlKey',
'meta': 'metaKey',
'shift': 'shiftKey'
'Alt': 'altKey',
'Control': 'ctrlKey',
'Meta': 'metaKey',
'Shift': 'shiftKey'
};
// IE8 does not implement getModifierState so we simply map it to the only
@@ -16481,8 +16489,8 @@ function modifierStateGetter(keyArg) {
if (nativeEvent.getModifierState) {
return nativeEvent.getModifierState(keyArg);
}
var keyProp = modifierKeyToProp[keyArg.toLowerCase()];
return keyProp && nativeEvent[keyProp];
var keyProp = modifierKeyToProp[keyArg];
return keyProp ? !!nativeEvent[keyProp] : false;
}
function getEventModifierState(nativeEvent) {
@@ -18009,7 +18017,15 @@ if (ExecutionEnvironment.canUseDOM) {
// Recover leading whitespace by temporarily prepending any character.
// \uFEFF has the potential advantage of being zero-width/invisible.
node.innerHTML = '\uFEFF' + html;
node.firstChild.deleteData(0, 1);
// deleteData leaves an empty `TextNode` which offsets the index of all
// children. Definitely want to avoid this.
var textNode = node.firstChild;
if (textNode.data.length === 1) {
node.removeChild(textNode);
} else {
textNode.deleteData(0, 1);
}
} else {
node.innerHTML = html;
}