mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
0.11 RC blog post
This commit is contained in:
Paul O’Shannessy
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html" class="active">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html" class="active">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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" class="active">One Year of Open-Source React</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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" class="active">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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
<!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 RC</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | React v0.11 RC" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.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/13/react-v0.11-rc1.html" class="active">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/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React v0.11 RC</h1>
|
||||
<p class="meta">July 13, 2014 by Paul O’Shannessy</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>
|
||||
|
||||
<p>The release candidate is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.11.0-rc1.js">http://fb.me/react-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.0-rc1.min.js">http://fb.me/react-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.11.0-rc1.js">http://fb.me/react-with-addons-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc1.min.js">http://fb.me/react-with-addons-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.0-rc1.js">http://fb.me/JSXTransformer-0.11.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h1><a class="anchor" name="blog-post"></a>Blog Post <a class="hash-link" href="#blog-post">#</a></h1><h2><a class="anchor" name="getdefaultprops"></a><code>getDefaultProps</code> <a class="hash-link" href="#getdefaultprops">#</a></h2>
|
||||
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
|
||||
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
|
||||
<p>Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <code><div/></code> or <code><span/></code>. Some people even got clever and started returning <code><noscript/></code> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to writing meaningful code. Returning <code>null</code> in an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code><noscript></code> element, though in the future we hope to not put anything in the document. In the mean time, <code><noscript></code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
|
||||
<p>Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code><Namespace.Component/></code>.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UILabel</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">UILayout</span><span class="o">><</span><span class="nx">UIButton</span> <span class="o">/><</span><span class="nx">UILabel</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UILabel></UILayout>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="o">><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span> <span class="o">/><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UI.Label></UI.Layout>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
|
||||
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'Enter'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle enter key</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">' '</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle spacebar</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'ArrowLeft'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle left arrow</span>
|
||||
<span class="p">}</span>
|
||||
<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="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>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Rendering to <code>null</code></li>
|
||||
<li>Keyboard events include normalized <code>e.key</code> and <code>e.getModifierState()</code> properties</li>
|
||||
<li>New normalized <code>onBeforeInput</code> event</li>
|
||||
<li><code>React.Children.count</code> has been added as a helper for counting the number of children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Re-renders are batched in more cases</li>
|
||||
<li>Events: <code>e.view</code> properly normalized</li>
|
||||
<li>Added Support for more HTML attributes (<code>coords</code>, <code>crossOrigin</code>, <code>download</code>, <code>hrefLang</code>, <code>mediaGroup</code>, <code>muted</code>, <code>scrolling</code>, <code>shape</code>, <code>srcSet</code>, <code>start</code>, <code>useMap</code>)</li>
|
||||
<li>Improved SVG support
|
||||
|
||||
<ul>
|
||||
<li>Changing <code>className</code> on a mounted SVG component now works correctly</li>
|
||||
<li>Added support for elements <code>mask</code> and <code>tspan</code></li>
|
||||
<li>Added support for attributes <code>dx</code>, <code>dy</code>, <code>fillOpacity</code>, <code>fontFamily</code>, <code>fontSize</code>, <code>markerEnd</code>, <code>markerMid</code>, <code>markerStart</code>, <code>opacity</code>, <code>patternContentUnits</code>, <code>patternUnits</code>, <code>preserveAspectRatio</code>, <code>strokeDasharray</code>, <code>strokeOpacity</code></li>
|
||||
</ul></li>
|
||||
<li>CSS property names with vendor prefixes (<code>Webkit</code>, <code>ms</code>, <code>Moz</code>, <code>O</code>) are now handled properly</li>
|
||||
<li>Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)</li>
|
||||
<li><code>img</code> event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same <code>data-reactid</code>"</li>
|
||||
<li>Added explicit warning when missing polyfills</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>PureRenderMixin</li>
|
||||
<li>Perf: a new set of tools to help with performance analysis</li>
|
||||
<li>Update: New <code>$apply</code> command to transform values</li>
|
||||
<li>TransitionGroup bug fixes with null elements, Android</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-npm-module"></a>React NPM Module <a class="hash-link" href="#react-npm-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Now includes the pre-built packages under <code>dist/</code>.</li>
|
||||
<li><code>envify</code> is properly listed as a dependency instead of a peer dependency</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for namespaces, eg <code><Components.Checkbox /></code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code><script type="text/jsx;harmony=true"></code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
<li>Fixed a bug preventing sourcemaps from working in Firefox</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools-module"></a>React Tools Module <a class="hash-link" href="#react-tools-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Improved readme with usage and API information</li>
|
||||
<li>Improved ES6 transforms available with <code>--harmony</code> option</li>
|
||||
<li>Added <code>--source-map-inline</code> option to the <code>jsx</code> executable</li>
|
||||
<li>New <code>transformWithDetails</code> API which gives access to the raw sourcemap data</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 & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">© 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>
|
||||
@@ -61,6 +61,8 @@
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<p><strong><a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a></strong> on June 27, 2014 by Cheng Lou</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a></strong> on May 29, 2014 by Cheng Lou</p>
|
||||
|
||||
+137
-39
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,141 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/13/react-v0.11-rc1.html">React v0.11 RC</a></h1>
|
||||
<p class="meta">July 13, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>
|
||||
|
||||
<p>The release candidate is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.11.0-rc1.js">http://fb.me/react-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.0-rc1.min.js">http://fb.me/react-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.11.0-rc1.js">http://fb.me/react-with-addons-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc1.min.js">http://fb.me/react-with-addons-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.0-rc1.js">http://fb.me/JSXTransformer-0.11.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h1><a class="anchor" name="blog-post"></a>Blog Post <a class="hash-link" href="#blog-post">#</a></h1><h2><a class="anchor" name="getdefaultprops"></a><code>getDefaultProps</code> <a class="hash-link" href="#getdefaultprops">#</a></h2>
|
||||
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
|
||||
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
|
||||
<p>Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty <code><div/></code> or <code><span/></code>. Some people even got clever and started returning <code><noscript/></code> to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to writing meaningful code. Returning <code>null</code> in an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code><noscript></code> element, though in the future we hope to not put anything in the document. In the mean time, <code><noscript></code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
|
||||
<p>Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code><Namespace.Component/></code>.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UILabel</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">UILayout</span><span class="o">><</span><span class="nx">UIButton</span> <span class="o">/><</span><span class="nx">UILabel</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UILabel></UILayout>;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'UI'</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="o">><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span> <span class="o">/><</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="o">></span><span class="nx">text</span><span class="o"><</span><span class="err">/UI.Label></UI.Layout>;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
|
||||
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'Enter'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle enter key</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">' '</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle spacebar</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">'ArrowLeft'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle left arrow</span>
|
||||
<span class="p">}</span>
|
||||
<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="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>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Rendering to <code>null</code></li>
|
||||
<li>Keyboard events include normalized <code>e.key</code> and <code>e.getModifierState()</code> properties</li>
|
||||
<li>New normalized <code>onBeforeInput</code> event</li>
|
||||
<li><code>React.Children.count</code> has been added as a helper for counting the number of children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Re-renders are batched in more cases</li>
|
||||
<li>Events: <code>e.view</code> properly normalized</li>
|
||||
<li>Added Support for more HTML attributes (<code>coords</code>, <code>crossOrigin</code>, <code>download</code>, <code>hrefLang</code>, <code>mediaGroup</code>, <code>muted</code>, <code>scrolling</code>, <code>shape</code>, <code>srcSet</code>, <code>start</code>, <code>useMap</code>)</li>
|
||||
<li>Improved SVG support
|
||||
|
||||
<ul>
|
||||
<li>Changing <code>className</code> on a mounted SVG component now works correctly</li>
|
||||
<li>Added support for elements <code>mask</code> and <code>tspan</code></li>
|
||||
<li>Added support for attributes <code>dx</code>, <code>dy</code>, <code>fillOpacity</code>, <code>fontFamily</code>, <code>fontSize</code>, <code>markerEnd</code>, <code>markerMid</code>, <code>markerStart</code>, <code>opacity</code>, <code>patternContentUnits</code>, <code>patternUnits</code>, <code>preserveAspectRatio</code>, <code>strokeDasharray</code>, <code>strokeOpacity</code></li>
|
||||
</ul></li>
|
||||
<li>CSS property names with vendor prefixes (<code>Webkit</code>, <code>ms</code>, <code>Moz</code>, <code>O</code>) are now handled properly</li>
|
||||
<li>Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)</li>
|
||||
<li><code>img</code> event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same <code>data-reactid</code>"</li>
|
||||
<li>Added explicit warning when missing polyfills</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>PureRenderMixin</li>
|
||||
<li>Perf: a new set of tools to help with performance analysis</li>
|
||||
<li>Update: New <code>$apply</code> command to transform values</li>
|
||||
<li>TransitionGroup bug fixes with null elements, Android</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-npm-module"></a>React NPM Module <a class="hash-link" href="#react-npm-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Now includes the pre-built packages under <code>dist/</code>.</li>
|
||||
<li><code>envify</code> is properly listed as a dependency instead of a peer dependency</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for namespaces, eg <code><Components.Checkbox /></code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code><script type="text/jsx;harmony=true"></code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
<li>Fixed a bug preventing sourcemaps from working in Firefox</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools-module"></a>React Tools Module <a class="hash-link" href="#react-tools-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Improved readme with usage and API information</li>
|
||||
<li>Improved ES6 transforms available with <code>--harmony</code> option</li>
|
||||
<li>Added <code>--source-map-inline</code> option to the <code>jsx</code> executable</li>
|
||||
<li>New <code>transformWithDetails</code> API which gives access to the raw sourcemap data</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/06/27/community-roundup-19.html">Community Round-up #19</a></h1>
|
||||
<p class="meta">June 27, 2014 by Cheng Lou</p>
|
||||
@@ -218,43 +353,6 @@ report bugs <a href="https://github.com/reactjs/React.NET">on GitHub</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></h1>
|
||||
<p class="meta">March 28, 2014 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined <a href="https://github.com/facebook/react/wiki/Projects">several projects</a> that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.</p>
|
||||
|
||||
<p>Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.</p>
|
||||
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
|
||||
<p>The first part of this is what we're calling "descriptors". I talked about this briefly in our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html">v0.10 announcements</a>. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. <code>React.DOM.div()</code>, <code>MyComponent()</code>) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.</p>
|
||||
|
||||
<p>We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.</p>
|
||||
<h2><a class="anchor" name="api-cleanup"></a>API Cleanup <a class="hash-link" href="#api-cleanup">#</a></h2>
|
||||
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
|
||||
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
|
||||
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The <code>jsx</code> executable we ship with <code>react-tools</code> already supports transforming many parts of ES6 into code that will run on older browsers.</p>
|
||||
<h2><a class="anchor" name="context"></a>Context <a class="hash-link" href="#context">#</a></h2>
|
||||
<p>While we haven't documented <code>context</code>, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.</p>
|
||||
<h2><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h2>
|
||||
<p>As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".</p>
|
||||
<h2><a class="anchor" name="browser-support"></a>Browser Support <a class="hash-link" href="#browser-support">#</a></h2>
|
||||
<p>As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.</p>
|
||||
<h2><a class="anchor" name="animations"></a>Animations <a class="hash-link" href="#animations">#</a></h2>
|
||||
<p>Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.</p>
|
||||
<h2><a class="anchor" name="miscellaneous"></a>Miscellaneous <a class="hash-link" href="#miscellaneous">#</a></h2>
|
||||
<p>There are several other things I listed on <a href="https://github.com/facebook/react/wiki/Projects">our projects page</a> that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+39
-138
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,43 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></h1>
|
||||
<p class="meta">March 28, 2014 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined <a href="https://github.com/facebook/react/wiki/Projects">several projects</a> that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.</p>
|
||||
|
||||
<p>Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.</p>
|
||||
<h2><a class="anchor" name="descriptors"></a>Descriptors <a class="hash-link" href="#descriptors">#</a></h2>
|
||||
<p>The first part of this is what we're calling "descriptors". I talked about this briefly in our <a href="http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html">v0.10 announcements</a>. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. <code>React.DOM.div()</code>, <code>MyComponent()</code>) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.</p>
|
||||
|
||||
<p>We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.</p>
|
||||
<h2><a class="anchor" name="api-cleanup"></a>API Cleanup <a class="hash-link" href="#api-cleanup">#</a></h2>
|
||||
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
|
||||
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
|
||||
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The <code>jsx</code> executable we ship with <code>react-tools</code> already supports transforming many parts of ES6 into code that will run on older browsers.</p>
|
||||
<h2><a class="anchor" name="context"></a>Context <a class="hash-link" href="#context">#</a></h2>
|
||||
<p>While we haven't documented <code>context</code>, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.</p>
|
||||
<h2><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h2>
|
||||
<p>As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".</p>
|
||||
<h2><a class="anchor" name="browser-support"></a>Browser Support <a class="hash-link" href="#browser-support">#</a></h2>
|
||||
<p>As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.</p>
|
||||
<h2><a class="anchor" name="animations"></a>Animations <a class="hash-link" href="#animations">#</a></h2>
|
||||
<p>Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.</p>
|
||||
<h2><a class="anchor" name="miscellaneous"></a>Miscellaneous <a class="hash-link" href="#miscellaneous">#</a></h2>
|
||||
<p>There are several other things I listed on <a href="https://github.com/facebook/react/wiki/Projects">our projects page</a> that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></h1>
|
||||
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
|
||||
@@ -375,142 +412,6 @@ Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
|
||||
<p class="meta">February 20, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
|
||||
|
||||
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
|
||||
|
||||
<p>As always, 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.9.0.js">http://fb.me/react-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.min.js</a></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
|
||||
<li><strong>In-Browser JSX Transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
<h2><a class="anchor" name="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
|
||||
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.</p>
|
||||
|
||||
<p>We've also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
|
||||
|
||||
<p>We've also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
|
||||
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
|
||||
<p>In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><div></span>
|
||||
Monkeys:
|
||||
{listOfMonkeys} {submitButton}
|
||||
<span class="nt"></div></span>
|
||||
</code></pre></div>
|
||||
<p>In v0.8 and below, it was transformed to the following:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="s2">" Monkeys: "</span><span class="p">,</span>
|
||||
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.9, it will be transformed to this JS instead:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="hll"> <span class="s2">"Monkeys:"</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">" "</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
|
||||
|
||||
<p>In cases where you want to preserve the space adjacent to a newline, you can write <code>{'Monkeys: '}</code> or <code>Monkeys:{' '}</code> in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
|
||||
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
|
||||
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
|
||||
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
|
||||
<li>Full-page rendering (that is, rendering the <code><html></code> tag using React) is now supported only when starting with server-rendered markup</li>
|
||||
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
|
||||
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)</li>
|
||||
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
|
||||
<li><code>this.context</code> on components is now reserved for internal use by React</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly</li>
|
||||
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>crossOrigin</code> for CORS requests</li>
|
||||
<li><code>download</code> and <code>hrefLang</code> for <code><a></code> tags</li>
|
||||
<li><code>mediaGroup</code> and <code>muted</code> for <code><audio></code> and <code><video></code> tags</li>
|
||||
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
|
||||
<li><code>property</code> for Open Graph <code><meta></code> tags</li>
|
||||
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code><iframe></code> tags</li>
|
||||
<li><code>scope</code> for screen readers</li>
|
||||
<li><code>span</code> for <code><colgroup></code> tags</li>
|
||||
</ul></li>
|
||||
<li>Added support for defining <code>propTypes</code> in mixins</li>
|
||||
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
|
||||
<li>Added support for <code>statics</code> on component spec for static component methods</li>
|
||||
<li>On all events, <code>.currentTarget</code> is now properly set</li>
|
||||
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
|
||||
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
|
||||
<li>On drag events, <code>.dataTransfer</code> is now present</li>
|
||||
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
|
||||
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code><img></code> elements</li>
|
||||
<li>Added support for <code>onReset</code> on <code><form></code> elements</li>
|
||||
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>React no longer adds an <code>__owner__</code> property to each component's <code>props</code> object; passed-in props are now never mutated</li>
|
||||
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
|
||||
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
|
||||
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
|
||||
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
|
||||
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
|
||||
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
|
||||
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
|
||||
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
|
||||
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
|
||||
<li>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled="true"</code>, now simply <code>disabled</code>)</li>
|
||||
<li><code>key</code> values containing <code>.</code> are now supported</li>
|
||||
<li>Shortened <code>data-reactid</code> values for performance</li>
|
||||
<li>Components now always remount when the <code>key</code> property changes</li>
|
||||
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
|
||||
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
|
||||
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
|
||||
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>React.addons.TestUtils</code> was added to help write unit tests</li>
|
||||
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
|
||||
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
|
||||
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
|
||||
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
|
||||
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
|
||||
<li>Performance optimizations for CSSTransitionGroup</li>
|
||||
<li>On checkbox <code><input></code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
|
||||
<ul>
|
||||
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
|
||||
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
|
||||
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
|
||||
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
|
||||
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
|
||||
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+138
-23
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,142 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
|
||||
<p class="meta">February 20, 2014 by Ben Alpert</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
|
||||
|
||||
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
|
||||
|
||||
<p>As always, 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.9.0.js">http://fb.me/react-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.min.js</a></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
|
||||
<li><strong>In-Browser JSX Transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.9.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
<h2><a class="anchor" name="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
|
||||
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.</p>
|
||||
|
||||
<p>We've also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
|
||||
|
||||
<p>We've also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
|
||||
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
|
||||
<p>In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><div></span>
|
||||
Monkeys:
|
||||
{listOfMonkeys} {submitButton}
|
||||
<span class="nt"></div></span>
|
||||
</code></pre></div>
|
||||
<p>In v0.8 and below, it was transformed to the following:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="s2">" Monkeys: "</span><span class="p">,</span>
|
||||
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.9, it will be transformed to this JS instead:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="hll"> <span class="s2">"Monkeys:"</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">" "</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
|
||||
|
||||
<p>In cases where you want to preserve the space adjacent to a newline, you can write <code>{'Monkeys: '}</code> or <code>Monkeys:{' '}</code> in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
|
||||
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
|
||||
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
|
||||
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
|
||||
<li>Full-page rendering (that is, rendering the <code><html></code> tag using React) is now supported only when starting with server-rendered markup</li>
|
||||
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
|
||||
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)</li>
|
||||
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
|
||||
<li><code>this.context</code> on components is now reserved for internal use by React</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly</li>
|
||||
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>crossOrigin</code> for CORS requests</li>
|
||||
<li><code>download</code> and <code>hrefLang</code> for <code><a></code> tags</li>
|
||||
<li><code>mediaGroup</code> and <code>muted</code> for <code><audio></code> and <code><video></code> tags</li>
|
||||
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
|
||||
<li><code>property</code> for Open Graph <code><meta></code> tags</li>
|
||||
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code><iframe></code> tags</li>
|
||||
<li><code>scope</code> for screen readers</li>
|
||||
<li><code>span</code> for <code><colgroup></code> tags</li>
|
||||
</ul></li>
|
||||
<li>Added support for defining <code>propTypes</code> in mixins</li>
|
||||
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
|
||||
<li>Added support for <code>statics</code> on component spec for static component methods</li>
|
||||
<li>On all events, <code>.currentTarget</code> is now properly set</li>
|
||||
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
|
||||
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
|
||||
<li>On drag events, <code>.dataTransfer</code> is now present</li>
|
||||
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
|
||||
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code><img></code> elements</li>
|
||||
<li>Added support for <code>onReset</code> on <code><form></code> elements</li>
|
||||
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>React no longer adds an <code>__owner__</code> property to each component's <code>props</code> object; passed-in props are now never mutated</li>
|
||||
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
|
||||
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
|
||||
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
|
||||
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
|
||||
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
|
||||
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
|
||||
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
|
||||
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
|
||||
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
|
||||
<li>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled="true"</code>, now simply <code>disabled</code>)</li>
|
||||
<li><code>key</code> values containing <code>.</code> are now supported</li>
|
||||
<li>Shortened <code>data-reactid</code> values for performance</li>
|
||||
<li>Components now always remount when the <code>key</code> property changes</li>
|
||||
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
|
||||
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
|
||||
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
|
||||
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>React.addons.TestUtils</code> was added to help write unit tests</li>
|
||||
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
|
||||
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
|
||||
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
|
||||
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
|
||||
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
|
||||
<li>Performance optimizations for CSSTransitionGroup</li>
|
||||
<li>On checkbox <code><input></code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
|
||||
<ul>
|
||||
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
|
||||
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
|
||||
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
|
||||
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
|
||||
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
|
||||
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
|
||||
<p class="meta">February 16, 2014 by Ben Alpert</p>
|
||||
@@ -469,27 +605,6 @@ rails s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></h1>
|
||||
<p class="meta">January 2, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
<p>You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.</p>
|
||||
|
||||
<p>Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.</p>
|
||||
|
||||
<p>When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
|
||||
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/react/img/blog/react-dev-tools.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p>We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept <a href="https://github.com/facebook/react-devtools">pull requests on GitHub</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+23
-80
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/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/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></h1>
|
||||
<p class="meta">January 2, 2014 by Sebastian Markbåge</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>
|
||||
|
||||
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
<p>You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.</p>
|
||||
|
||||
<p>Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.</p>
|
||||
|
||||
<p>When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
|
||||
<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="/react/img/blog/react-dev-tools.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p>We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept <a href="https://github.com/facebook/react-devtools">pull requests on GitHub</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></h1>
|
||||
<p class="meta">December 30, 2013 by Vjeux</p>
|
||||
@@ -339,84 +360,6 @@ componentDidUpdate: function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></h1>
|
||||
<p class="meta">November 18, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>
|
||||
<h2><a class="anchor" name="super-vanjs-2013-talk"></a>Super VanJS 2013 Talk <a class="hash-link" href="#super-vanjs-2013-talk">#</a></h2>
|
||||
<p><a href="https://github.com/steveluscher">Steve Luscher</a> working at <a href="https://leanpub.com/">LeanPub</a> made a 30 min talk at <a href="https://twitter.com/vanjs">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>
|
||||
|
||||
<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="react-tips"></a>React Tips <a class="hash-link" href="#react-tips">#</a></h2>
|
||||
<p><a href="http://connormcsheffrey.com/">Connor McSheffrey</a> and <a href="https://github.com/chenglou">Cheng Lou</a> added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href="http://facebook.github.io/react/tips/introduction.html">encourage you to contribute</a>!</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/tips/inline-styles.html">Inline Styles</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/if-else-in-JSX.html">If-Else in JSX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/self-closing-tag.html">Self-Closing Tag</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/children-props-type.html">Type of the Children props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html"><code>componentWillReceiveProps</code> Not Triggered After Mounting</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/initial-ajax.html">Load Initial Data via AJAX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/false-in-jsx.html">False in JSX</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="intro-to-the-react-framework"></a>Intro to the React Framework <a class="hash-link" href="#intro-to-the-react-framework">#</a></h2>
|
||||
<p><a href="http://blog.pixelingene.com/">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
|
||||
<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/react/img/blog/tutsplus.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
|
||||
<p><a href="https://github.com/brainkim">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>
|
||||
|
||||
<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
|
||||
|
||||
<script async src="//codepen.io/assets/embed/ei.js"></script>
|
||||
<h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
|
||||
<figure><a href="http://genesis-skeleton.com/"><img src="/react/img/blog/genesis_skeleton.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="agflow-talk"></a>AgFlow Talk <a class="hash-link" href="#agflow-talk">#</a></h2>
|
||||
<p><a href="http://rz.scale-it.pl/">Robert Zaremba</a> working on <a href="http://www.agflow.com/">AgFlow</a> recently talked in Poland about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.</p>
|
||||
|
||||
<p>During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!</p>
|
||||
|
||||
<p><a href="http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2>
|
||||
<p><a href="http://tck.io/">Todd Kennedy</a> working at Condé Nast wrote <a href="https://github.com/CondeNast/JSXHint">JSXHint</a> and explains in a blog post his perspective on JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Lets start with the elephant in the room: JSX?
|
||||
Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.</p>
|
||||
|
||||
<p>Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.</p>
|
||||
|
||||
<p><a href="http://tck.io/posts/jsxhint_and_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="photo-gallery"></a>Photo Gallery <a class="hash-link" href="#photo-gallery">#</a></h2>
|
||||
<p><a href="http://miekd.com/">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.
|
||||
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/react/img/blog/xoxo2013.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+80
-88
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,84 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></h1>
|
||||
<p class="meta">November 18, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!</p>
|
||||
<h2><a class="anchor" name="super-vanjs-2013-talk"></a>Super VanJS 2013 Talk <a class="hash-link" href="#super-vanjs-2013-talk">#</a></h2>
|
||||
<p><a href="https://github.com/steveluscher">Steve Luscher</a> working at <a href="https://leanpub.com/">LeanPub</a> made a 30 min talk at <a href="https://twitter.com/vanjs">Super VanJS</a>. He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.</p>
|
||||
|
||||
<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="react-tips"></a>React Tips <a class="hash-link" href="#react-tips">#</a></h2>
|
||||
<p><a href="http://connormcsheffrey.com/">Connor McSheffrey</a> and <a href="https://github.com/chenglou">Cheng Lou</a> added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we <a href="http://facebook.github.io/react/tips/introduction.html">encourage you to contribute</a>!</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/tips/inline-styles.html">Inline Styles</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/if-else-in-JSX.html">If-Else in JSX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/self-closing-tag.html">Self-Closing Tag</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/children-props-type.html">Type of the Children props</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html"><code>componentWillReceiveProps</code> Not Triggered After Mounting</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/initial-ajax.html">Load Initial Data via AJAX</a></li>
|
||||
<li><a href="http://facebook.github.io/react/tips/false-in-jsx.html">False in JSX</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="intro-to-the-react-framework"></a>Intro to the React Framework <a class="hash-link" href="#intro-to-the-react-framework">#</a></h2>
|
||||
<p><a href="http://blog.pixelingene.com/">Pavan Podila</a> wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
|
||||
<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="/react/img/blog/tutsplus.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="140-characters-textarea"></a>140-characters textarea <a class="hash-link" href="#140-characters-textarea">#</a></h2>
|
||||
<p><a href="https://github.com/brainkim">Brian Kim</a> wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.</p>
|
||||
|
||||
<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
|
||||
|
||||
<script async src="//codepen.io/assets/embed/ei.js"></script>
|
||||
<h2><a class="anchor" name="genesis-skeleton"></a>Genesis Skeleton <a class="hash-link" href="#genesis-skeleton">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
|
||||
<figure><a href="http://genesis-skeleton.com/"><img src="/react/img/blog/genesis_skeleton.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="agflow-talk"></a>AgFlow Talk <a class="hash-link" href="#agflow-talk">#</a></h2>
|
||||
<p><a href="http://rz.scale-it.pl/">Robert Zaremba</a> working on <a href="http://www.agflow.com/">AgFlow</a> recently talked in Poland about React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.</p>
|
||||
|
||||
<p>During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!</p>
|
||||
|
||||
<p><a href="http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
<h2><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h2>
|
||||
<p><a href="http://tck.io/">Todd Kennedy</a> working at Condé Nast wrote <a href="https://github.com/CondeNast/JSXHint">JSXHint</a> and explains in a blog post his perspective on JSX.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Lets start with the elephant in the room: JSX?
|
||||
Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.</p>
|
||||
|
||||
<p>Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.</p>
|
||||
|
||||
<p><a href="http://tck.io/posts/jsxhint_and_react.html">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="photo-gallery"></a>Photo Gallery <a class="hash-link" href="#photo-gallery">#</a></h2>
|
||||
<p><a href="http://miekd.com/">Maykel Loomans</a>, designer at Instagram, wrote a gallery for photos he shot using React.
|
||||
<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="/react/img/blog/xoxo2013.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></h1>
|
||||
<p class="meta">November 6, 2013 by Vjeux</p>
|
||||
@@ -425,92 +503,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.</p>
|
||||
|
||||
<p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
|
||||
<h2><a class="anchor" name="react-hackathon-winner"></a>React Hackathon Winner <a class="hash-link" href="#react-hackathon-winner">#</a></h2>
|
||||
<p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The game itself is pretty simple. People join the "room" by going to <a href="http://qu.izti.me/">http://qu.izti.me</a> on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.</p>
|
||||
|
||||
<p>In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
|
||||
<figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/react/img/blog/quiztime.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsconf-eu-talk-rethinking-best-practices"></a>JSConf EU Talk: Rethinking Best Practices <a class="hash-link" href="#jsconf-eu-talk-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
|
||||
|
||||
<ol>
|
||||
<li>Build <strong>components</strong>, not templates</li>
|
||||
<li>Re-render the whole app on every update</li>
|
||||
<li>Virtual DOM</li>
|
||||
</ol>
|
||||
|
||||
<p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete's slides:</p>
|
||||
|
||||
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
|
||||
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.</p>
|
||||
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
|
||||
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
|
||||
|
||||
<span class="p">(</span><span class="n">defr</span> <span class="no">Component</span>
|
||||
<span class="ss">:get</span><span class="o">-</span><span class="n">initial</span><span class="o">-</span><span class="n">state</span> <span class="c1">#(identity {:some-value ""})</span>
|
||||
|
||||
<span class="o">[</span><span class="n">component</span> <span class="n">props</span> <span class="n">state</span><span class="o">]</span>
|
||||
|
||||
<span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">"test"</span><span class="p">}</span> <span class="s2">"hello"</span><span class="o">]</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsxhint"></a>JSXHint <a class="hash-link" href="#jsxhint">#</a></h2>
|
||||
<p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Condé Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g jsxhint
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="turbo-react"></a>Turbo React <a class="hash-link" href="#turbo-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.</p>
|
||||
|
||||
<p>The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.</p>
|
||||
|
||||
<p>With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
|
||||
<figure><a href="https://turbo-react.herokuapp.com/"><img src="/react/img/blog/turboreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactive-table"></a>Reactive Table <a class="hash-link" href="#reactive-table">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is all about components. So let's build one.</p>
|
||||
|
||||
<p>Let's call it Table (to avoid any confusion what the component is about).</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="cm">/*stuff goeth here*/</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+88
-38
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,92 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.</p>
|
||||
|
||||
<p><img src="/react/img/blog/react-hackathon.jpg" alt=""></p>
|
||||
<h2><a class="anchor" name="react-hackathon-winner"></a>React Hackathon Winner <a class="hash-link" href="#react-hackathon-winner">#</a></h2>
|
||||
<p><a href="http://bold-it.com/">Alex Swan</a> implemented <a href="http://qu.izti.me/">Qu.izti.me</a>, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The game itself is pretty simple. People join the "room" by going to <a href="http://qu.izti.me/">http://qu.izti.me</a> on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.</p>
|
||||
|
||||
<p>In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
|
||||
<figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="/react/img/blog/quiztime.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://bold-it.com/javascript/facebook-react-example/">Read More...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsconf-eu-talk-rethinking-best-practices"></a>JSConf EU Talk: Rethinking Best Practices <a class="hash-link" href="#jsconf-eu-talk-rethinking-best-practices">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> presented React at JSConf EU. He covers three controversial design decisions of React:</p>
|
||||
|
||||
<ol>
|
||||
<li>Build <strong>components</strong>, not templates</li>
|
||||
<li>Re-render the whole app on every update</li>
|
||||
<li>Virtual DOM</li>
|
||||
</ol>
|
||||
|
||||
<p>The video will be available soon on the <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">JSConf EU website</a>, but in the meantime, here are Pete's slides:</p>
|
||||
|
||||
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
|
||||
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.</p>
|
||||
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
|
||||
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
|
||||
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
|
||||
|
||||
<span class="p">(</span><span class="n">defr</span> <span class="no">Component</span>
|
||||
<span class="ss">:get</span><span class="o">-</span><span class="n">initial</span><span class="o">-</span><span class="n">state</span> <span class="c1">#(identity {:some-value ""})</span>
|
||||
|
||||
<span class="o">[</span><span class="n">component</span> <span class="n">props</span> <span class="n">state</span><span class="o">]</span>
|
||||
|
||||
<span class="o">[</span><span class="ss">:div</span> <span class="p">{</span><span class="ss">:class</span><span class="o">-</span><span class="nb">name</span> <span class="s2">"test"</span><span class="p">}</span> <span class="s2">"hello"</span><span class="o">]</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/piranha/pump">Check it out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsxhint"></a>JSXHint <a class="hash-link" href="#jsxhint">#</a></h2>
|
||||
<p><a href="http://blog.selfassembled.org/">Todd Kennedy</a> working at <a href="http://www.condenast.com/">Condé Nast</a> implemented a wrapper on-top of <a href="http://www.jshint.com/">JSHint</a> that first converts JSX files to JS.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g jsxhint
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="turbo-react"></a>Turbo React <a class="hash-link" href="#turbo-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> working at <a href="http://mesosphere.io/">Mesosphere</a> combined <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, a library used by Ruby on Rails to speed up page transition, and React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>"Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.</p>
|
||||
|
||||
<p>The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.</p>
|
||||
|
||||
<p>With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
|
||||
<figure><a href="https://turbo-react.herokuapp.com/"><img src="/react/img/blog/turboreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://turbo-react.herokuapp.com/">Check out the demo...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="reactive-table"></a>Reactive Table <a class="hash-link" href="#reactive-table">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React is all about components. So let's build one.</p>
|
||||
|
||||
<p>Let's call it Table (to avoid any confusion what the component is about).</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="cm">/*stuff goeth here*/</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.</p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></h1>
|
||||
<p class="meta">September 24, 2013 by Vjeux</p>
|
||||
@@ -349,42 +435,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: <a href="https://github.com/facebook/react-rails">react-rails</a>.</p>
|
||||
|
||||
<p>This gem has 2 primary purposes:</p>
|
||||
|
||||
<ol>
|
||||
<li>To package <code>react.js</code> in a way that's easy to use and easy to update.</li>
|
||||
<li>To allow you to write JSX without an external build step to transform that into JS.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
|
||||
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you'd like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
|
||||
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
|
||||
|
||||
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
|
||||
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
|
||||
<span class="c1"># use :production in production.rb</span>
|
||||
<span class="k">end</span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
|
||||
|
||||
<span class="c1">//= require react</span>
|
||||
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
|
||||
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
|
||||
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
|
||||
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>Installation follows the same process you're familiar with. You can install it globally with <code>gem install react-rails</code>, though we suggest you add the dependency to your <code>Gemfile</code> directly.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+38
-71
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,42 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: <a href="https://github.com/facebook/react-rails">react-rails</a>.</p>
|
||||
|
||||
<p>This gem has 2 primary purposes:</p>
|
||||
|
||||
<ol>
|
||||
<li>To package <code>react.js</code> in a way that's easy to use and easy to update.</li>
|
||||
<li>To allow you to write JSX without an external build step to transform that into JS.</li>
|
||||
</ol>
|
||||
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
|
||||
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you'd like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
|
||||
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
|
||||
|
||||
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
|
||||
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
|
||||
<span class="c1"># use :production in production.rb</span>
|
||||
<span class="k">end</span>
|
||||
</code></pre></div><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
|
||||
|
||||
<span class="c1">//= require react</span>
|
||||
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
|
||||
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
|
||||
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
|
||||
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
|
||||
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
|
||||
<p>Installation follows the same process you're familiar with. You can install it globally with <code>gem install react-rails</code>, though we suggest you add the dependency to your <code>Gemfile</code> directly.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></h1>
|
||||
<p class="meta">July 26, 2013 by Paul O'Shannessy</p>
|
||||
@@ -305,75 +341,6 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p>
|
||||
<h2><a class="anchor" name="khan-academy"></a>Khan Academy <a class="hash-link" href="#khan-academy">#</a></h2>
|
||||
<p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.</p>
|
||||
|
||||
<p>"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"</p>
|
||||
|
||||
<p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
|
||||
<figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-snippets"></a>React Snippets <a class="hash-link" href="#react-snippets">#</a></h2>
|
||||
<p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/reusable-components.html">Mixins</a> and <a href="/react/docs/working-with-the-browser.html">Lifecycle Methods</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li>
|
||||
<li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://gist.github.com/zpao/5686416">Gist</a>: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="introduction-to-react-screencast"></a>Introduction to React Screencast <a class="hash-link" href="#introduction-to-react-screencast">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p>
|
||||
|
||||
<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
<h2><a class="anchor" name="snake-in-react"></a>Snake in React <a class="hash-link" href="#snake-in-react">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a>
|
||||
<figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+71
-53
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,75 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.</p>
|
||||
<h2><a class="anchor" name="khan-academy"></a>Khan Academy <a class="hash-link" href="#khan-academy">#</a></h2>
|
||||
<p><a href="http://bjk5.com/">Ben Kamens</a> explains how <a href="http://benalpert.com/">Ben Alpert</a> and <a href="http://joelburget.com/">Joel Burget</a> are promoting React inside of <a href="https://www.khanacademy.org/">Khan Academy</a>. They now have three projects in the works using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.</p>
|
||||
|
||||
<p>"The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"</p>
|
||||
|
||||
<p><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>The best part is the demo of how React reconciliation process makes live editing more user-friendly.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
|
||||
<figure><a href="http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology"><img src="/react/img/blog/monkeys.gif" width="70%" /></a></figure></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-snippets"></a>React Snippets <a class="hash-link" href="#react-snippets">#</a></h2>
|
||||
<p>Over the past several weeks, members of our team, <a href="http://www.petehunt.net/">Pete Hunt</a> and <a href="http://zpao.com/">Paul O'Shannessy</a>, answered many questions that were asked in the <a href="https://groups.google.com/forum/#!forum/reactjs">React group</a>. They give a good overview of how to integrate React with other libraries and APIs through the use of <a href="/react/docs/reusable-components.html">Mixins</a> and <a href="/react/docs/working-with-the-browser.html">Lifecycle Methods</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk">Listening Scroll Event</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/aabeL/1/">JSFiddle</a>: Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo">Fade-in Transition</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/ufe8k/1/">JSFiddle</a>: Creating a new <code><FadeInWhenAdded></code> component and using jQuery <code>.fadeIn()</code> function on the DOM node.</li>
|
||||
<li><a href="http://jsfiddle.net/R8f5L/5/">JSFiddle</a>: Using CSS transition instead.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4">Socket.IO Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://gist.github.com/zpao/5686416">Gist</a>: The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687230">Gist</a>: This example is doing everything -- including the IO -- inside of a single React component.</li>
|
||||
<li><a href="https://gist.github.com/petehunt/5687276">Gist</a>: One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4">Sortable jQuery Plugin Integration</a></p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://jsfiddle.net/LQxy7/">JSFiddle</a>: Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().</li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="introduction-to-react-screencast"></a>Introduction to React Screencast <a class="hash-link" href="#introduction-to-react-screencast">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> recorded himself implementing a simple <code><Blink></code> tag in React.</p>
|
||||
|
||||
<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
<h2><a class="anchor" name="snake-in-react"></a>Snake in React <a class="hash-link" href="#snake-in-react">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> implemented Snake in 150 lines with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="https://github.com/tomocchino/react-snake/blob/master/src/snake.js">Check the source on Github</a>
|
||||
<figure><a href="http://tomocchino.github.io/react-snake/"><img src="/react/img/blog/snake.png" alt=""></a></figure></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></h1>
|
||||
<p class="meta">July 2, 2013 by Paul O'Shannessy</p>
|
||||
@@ -311,57 +380,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React was open sourced two weeks ago and it's time for a little round-up of what has been going on.</p>
|
||||
<h2><a class="anchor" name="khan-academy-question-editor"></a>Khan Academy Question Editor <a class="hash-link" href="#khan-academy-question-editor">#</a></h2>
|
||||
<p>It looks like <a href="http://benalpert.com/">Ben Alpert</a> is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (<a href="irc://chat.freenode.net/reactjs">#reactjs on Freenode</a>). Ben wrote about his experience using React:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.</p>
|
||||
|
||||
<p>The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
|
||||
<figure><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/react/img/blog/khan-academy-editor.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="pimp-my-backbone.view-by-replacing-it-with-react"></a>Pimp my Backbone.View (by replacing it with React) <a class="hash-link" href="#pimp-my-backbone.view-by-replacing-it-with-react">#</a></h2>
|
||||
<p><a href="https://blog.mayflower.de/">Paul Seiffert</a> wrote a blog post that explains how to integrate React into Backbone applications.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.</p>
|
||||
|
||||
<p>As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.</p>
|
||||
|
||||
<p>The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.</p>
|
||||
|
||||
<p><a href="https://blog.mayflower.de/3937-Backbone-React.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="using-facebooks-react-with-require.js"></a>Using facebook's React with require.js <a class="hash-link" href="#using-facebooks-react-with-require.js">#</a></h2>
|
||||
<p><a href="http://blog.xenji.com/">Mario Mueller</a> wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.</p>
|
||||
|
||||
<p><a href="http://blog.xenji.com/2013/06/facebooks-react-require-js.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="origins-of-react"></a>Origins of React <a class="hash-link" href="#origins-of-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> explained what differentiates React from other JavaScript libraries in <a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html">a previous blog post</a>. <a href="http://leebyron.com/">Lee Byron</a> gives another perspective on Quora:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.</p>
|
||||
|
||||
<p>React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+53
-2
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,57 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React was open sourced two weeks ago and it's time for a little round-up of what has been going on.</p>
|
||||
<h2><a class="anchor" name="khan-academy-question-editor"></a>Khan Academy Question Editor <a class="hash-link" href="#khan-academy-question-editor">#</a></h2>
|
||||
<p>It looks like <a href="http://benalpert.com/">Ben Alpert</a> is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC (<a href="irc://chat.freenode.net/reactjs">#reactjs on Freenode</a>). Ben wrote about his experience using React:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.</p>
|
||||
|
||||
<p>The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
|
||||
<figure><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="/react/img/blog/khan-academy-editor.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="pimp-my-backbone.view-by-replacing-it-with-react"></a>Pimp my Backbone.View (by replacing it with React) <a class="hash-link" href="#pimp-my-backbone.view-by-replacing-it-with-react">#</a></h2>
|
||||
<p><a href="https://blog.mayflower.de/">Paul Seiffert</a> wrote a blog post that explains how to integrate React into Backbone applications.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.</p>
|
||||
|
||||
<p>As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.</p>
|
||||
|
||||
<p>The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.</p>
|
||||
|
||||
<p><a href="https://blog.mayflower.de/3937-Backbone-React.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="using-facebooks-react-with-require.js"></a>Using facebook's React with require.js <a class="hash-link" href="#using-facebooks-react-with-require.js">#</a></h2>
|
||||
<p><a href="http://blog.xenji.com/">Mario Mueller</a> wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I recently stumbled upon facebook's React library, which is a Javascript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.</p>
|
||||
|
||||
<p><a href="http://blog.xenji.com/2013/06/facebooks-react-require-js.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="origins-of-react"></a>Origins of React <a class="hash-link" href="#origins-of-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> explained what differentiates React from other JavaScript libraries in <a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html">a previous blog post</a>. <a href="http://leebyron.com/">Lee Byron</a> gives another perspective on Quora:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.</p>
|
||||
|
||||
<p>React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
|
||||
<p class="meta">June 5, 2013 by Pete Hunt</p>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -6,6 +6,140 @@
|
||||
<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 RC</title>
|
||||
<description><p>It&#39;s that time again… we&#39;re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.</p>
|
||||
|
||||
<p>The release candidate is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.11.0-rc1.js">http://fb.me/react-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.0-rc1.min.js">http://fb.me/react-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.11.0-rc1.js">http://fb.me/react-with-addons-0.11.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc1.min.js">http://fb.me/react-with-addons-0.11.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.0-rc1.js">http://fb.me/JSXTransformer-0.11.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We&#39;ve also published version <code>0.11.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h1><a class="anchor" name="blog-post"></a>Blog Post <a class="hash-link" href="#blog-post">#</a></h1><h2><a class="anchor" name="getdefaultprops"></a><code>getDefaultProps</code> <a class="hash-link" href="#getdefaultprops">#</a></h2>
|
||||
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
|
||||
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
|
||||
<p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to writing meaningful code. Returning <code>null</code> in an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">/&gt;</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
|
||||
<p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">UILabel</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="p">;</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">UILayout</span><span class="o">&gt;&lt;</span><span class="nx">UIButton</span> <span class="o">/&gt;&lt;</span><span class="nx">UILabel</span><span class="o">&gt;</span><span class="nx">text</span><span class="o">&lt;</span><span class="err">/UILabel&gt;&lt;/UILayout&gt;;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// After</span>
|
||||
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="o">&gt;&lt;</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span> <span class="o">/&gt;&lt;</span><span class="nx">UI</span><span class="p">.</span><span class="nx">Label</span><span class="o">&gt;</span><span class="nx">text</span><span class="o">&lt;</span><span class="err">/UI.Label&gt;&lt;/UI.Layout&gt;;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
|
||||
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle enter key</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle spacebar</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;ArrowLeft&#39;</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Handle left arrow</span>
|
||||
<span class="p">}</span>
|
||||
<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="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>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Rendering to <code>null</code></li>
|
||||
<li>Keyboard events include normalized <code>e.key</code> and <code>e.getModifierState()</code> properties</li>
|
||||
<li>New normalized <code>onBeforeInput</code> event</li>
|
||||
<li><code>React.Children.count</code> has been added as a helper for counting the number of children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Re-renders are batched in more cases</li>
|
||||
<li>Events: <code>e.view</code> properly normalized</li>
|
||||
<li>Added Support for more HTML attributes (<code>coords</code>, <code>crossOrigin</code>, <code>download</code>, <code>hrefLang</code>, <code>mediaGroup</code>, <code>muted</code>, <code>scrolling</code>, <code>shape</code>, <code>srcSet</code>, <code>start</code>, <code>useMap</code>)</li>
|
||||
<li>Improved SVG support
|
||||
|
||||
<ul>
|
||||
<li>Changing <code>className</code> on a mounted SVG component now works correctly</li>
|
||||
<li>Added support for elements <code>mask</code> and <code>tspan</code></li>
|
||||
<li>Added support for attributes <code>dx</code>, <code>dy</code>, <code>fillOpacity</code>, <code>fontFamily</code>, <code>fontSize</code>, <code>markerEnd</code>, <code>markerMid</code>, <code>markerStart</code>, <code>opacity</code>, <code>patternContentUnits</code>, <code>patternUnits</code>, <code>preserveAspectRatio</code>, <code>strokeDasharray</code>, <code>strokeOpacity</code></li>
|
||||
</ul></li>
|
||||
<li>CSS property names with vendor prefixes (<code>Webkit</code>, <code>ms</code>, <code>Moz</code>, <code>O</code>) are now handled properly</li>
|
||||
<li>Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)</li>
|
||||
<li><code>img</code> event listeners are now unbound properly, preventing the error &quot;Two valid but unequal nodes with the same <code>data-reactid</code>&quot;</li>
|
||||
<li>Added explicit warning when missing polyfills</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>PureRenderMixin</li>
|
||||
<li>Perf: a new set of tools to help with performance analysis</li>
|
||||
<li>Update: New <code>$apply</code> command to transform values</li>
|
||||
<li>TransitionGroup bug fixes with null elements, Android</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-npm-module"></a>React NPM Module <a class="hash-link" href="#react-npm-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Now includes the pre-built packages under <code>dist/</code>.</li>
|
||||
<li><code>envify</code> is properly listed as a dependency instead of a peer dependency</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>Added support for namespaces, eg <code>&lt;Components.Checkbox /&gt;</code></li>
|
||||
<li>JSXTransformer
|
||||
|
||||
<ul>
|
||||
<li>Enable the same <code>harmony</code> features available in the command line with <code>&lt;script type=&quot;text/jsx;harmony=true&quot;&gt;</code></li>
|
||||
<li>Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)</li>
|
||||
<li>Fixed a bug preventing sourcemaps from working in Firefox</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools-module"></a>React Tools Module <a class="hash-link" href="#react-tools-module">#</a></h3>
|
||||
<ul>
|
||||
<li>Improved readme with usage and API information</li>
|
||||
<li>Improved ES6 transforms available with <code>--harmony</code> option</li>
|
||||
<li>Added <code>--source-map-inline</code> option to the <code>jsx</code> executable</li>
|
||||
<li>New <code>transformWithDetails</code> API which gives access to the raw sourcemap data</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2014-07-13T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Community Round-up #19</title>
|
||||
<description><h2><a class="anchor" name="react-meetups"></a>React Meetups! <a class="hash-link" href="#react-meetups">#</a></h2>
|
||||
@@ -447,140 +581,5 @@ Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasab
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/24/community-roundup-17.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React v0.9</title>
|
||||
<description><p>I&#39;m excited to announce that today we&#39;re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
|
||||
|
||||
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
|
||||
|
||||
<p>As always, 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.9.0.js">http://fb.me/react-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.min.js</a></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
|
||||
<li><strong>In-Browser JSX Transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We&#39;ve also published version <code>0.9.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
<h2><a class="anchor" name="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
|
||||
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We&#39;ve also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly.</p>
|
||||
|
||||
<p>We&#39;ve also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
|
||||
|
||||
<p>We&#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
|
||||
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
|
||||
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
|
||||
Monkeys:
|
||||
{listOfMonkeys} {submitButton}
|
||||
<span class="nt">&lt;/div&gt;</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.8 and below, it was transformed to the following:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
|
||||
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>In v0.9, it will be transformed to this JS instead:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
|
||||
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
|
||||
</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
|
||||
|
||||
<p>In cases where you want to preserve the space adjacent to a newline, you can write <code>{&#39;Monkeys: &#39;}</code> or <code>Monkeys:{&#39; &#39;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
|
||||
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
|
||||
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
|
||||
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
|
||||
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
|
||||
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
|
||||
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)</li>
|
||||
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
|
||||
<li><code>this.context</code> on components is now reserved for internal use by React</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
|
||||
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>crossOrigin</code> for CORS requests</li>
|
||||
<li><code>download</code> and <code>hrefLang</code> for <code>&lt;a&gt;</code> tags</li>
|
||||
<li><code>mediaGroup</code> and <code>muted</code> for <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> tags</li>
|
||||
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
|
||||
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
|
||||
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
|
||||
<li><code>scope</code> for screen readers</li>
|
||||
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
|
||||
</ul></li>
|
||||
<li>Added support for defining <code>propTypes</code> in mixins</li>
|
||||
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
|
||||
<li>Added support for <code>statics</code> on component spec for static component methods</li>
|
||||
<li>On all events, <code>.currentTarget</code> is now properly set</li>
|
||||
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
|
||||
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
|
||||
<li>On drag events, <code>.dataTransfer</code> is now present</li>
|
||||
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
|
||||
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
|
||||
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
|
||||
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
|
||||
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
|
||||
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
|
||||
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
|
||||
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
|
||||
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
|
||||
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
|
||||
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
|
||||
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
|
||||
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
|
||||
<li>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled=&quot;true&quot;</code>, now simply <code>disabled</code>)</li>
|
||||
<li><code>key</code> values containing <code>.</code> are now supported</li>
|
||||
<li>Shortened <code>data-reactid</code> values for performance</li>
|
||||
<li>Components now always remount when the <code>key</code> property changes</li>
|
||||
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
|
||||
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
|
||||
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
|
||||
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>React.addons.TestUtils</code> was added to help write unit tests</li>
|
||||
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
|
||||
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
|
||||
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
|
||||
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
|
||||
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
|
||||
<li>Performance optimizations for CSSTransitionGroup</li>
|
||||
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
|
||||
<ul>
|
||||
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
|
||||
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
|
||||
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
|
||||
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
|
||||
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
|
||||
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2014-02-20T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Reference in New Issue
Block a user