mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Update for relay blog post
This commit is contained in:
Paul O’Shannessy
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html" class="active">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html" class="active">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html" class="active">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html" class="active">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Building The Facebook News Feed With Relay | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="Building The Facebook News Feed With Relay | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.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" src="/react/img/logo.svg" width="36" height="36">
|
||||
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="https://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/2015/03/19/building-the-facebook-news-feed-with-relay.html" class="active">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/04/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/20/introducing-relay-and-graphql.html">Introducing Relay and GraphQL</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Building The Facebook News Feed With Relay</h1>
|
||||
<p class="meta">March 19, 2015 by Joseph Savona</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube.com/watch?v=9sc8Pyc51uU">the conference talk</a>.</p>
|
||||
|
||||
<p>We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-relay-architecture"></a>The Relay Architecture <a class="hash-link" href="#the-relay-architecture">#</a></h2>
|
||||
<p>The diagram below shows the main parts of the Relay architecture on the client and the server:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" /></p>
|
||||
|
||||
<p>The main pieces are as follows:</p>
|
||||
|
||||
<ul>
|
||||
<li>Relay Components: React components annotated with declarative data descriptions.</li>
|
||||
<li>Actions: Descriptions of how data should change in response to user actions.</li>
|
||||
<li>Relay Store: A client-side data store that is fully managed by the framework.</li>
|
||||
<li>Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.</li>
|
||||
</ul>
|
||||
|
||||
<p>This post will focus on <strong>Relay components</strong> that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="a-relay-application"></a>A Relay Application <a class="hash-link" href="#a-relay-application">#</a></h2>
|
||||
<p>To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <code><NewsFeed></code> that renders a list of <code><Story></code> items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-ltstorygt-begins"></a>The <code><Story></code> Begins <a class="hash-link" href="#the-ltstorygt-begins">#</a></h2>
|
||||
<p>The first step is a React <code><Story></code> component that accepts a <code>story</code> prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="kd">var</span> <span class="nx">story</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">View</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Image</span> <span class="nx">uri</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">profile_picture</span><span class="p">.</span><span class="nx">uri</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Text</span><span class="o">></span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/Text></span>
|
||||
<span class="o"><</span><span class="nx">Text</span><span class="o">></span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/Text></span>
|
||||
<span class="o"><</span><span class="err">/View></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Story</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="whats-the-ltstorygt"></a>What's the <code><Story></code>? <a class="hash-link" href="#whats-the-ltstorygt">#</a></h2>
|
||||
<p>Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="cm">/* TODO */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Before adding the GraphQL query, let's look at the component hierarchy this creates:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" /></p>
|
||||
|
||||
<p>Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for <code>story</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Story</span> <span class="p">{</span>
|
||||
<span class="nx">author</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Queries use ES6 template literals tagged with the <code>graphql</code> function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in <code><Story></code>'s render function.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltstorygts-on-demand"></a><code><Story></code>s on Demand <a class="hash-link" href="#ltstorygts-on-demand">#</a></h2>
|
||||
<p>We can render a Relay component by providing Relay with the component (<code><Story></code>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then <code>render()</code> the component. The value of <code>props.story</code> will be a plain JavaScript object such as the following:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="nx">author</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s2">"Greg"</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span><span class="o">:</span> <span class="s2">"https://…"</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s2">"The first Relay blog post is up…"</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Relay guarantees that all data required to render a component will be available before it is rendered. This means that <code><Story></code> does not need to handle a loading state; the <code>story</code> is <em>guaranteed</em> to be available before <code>render()</code> is called. We have found that this invariant simplifies our application code <em>and</em> improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.</p>
|
||||
|
||||
<p>The diagram below shows how Relay containers make data available to our React components:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltnewsfeedgt-worthy"></a><code><NewsFeed></code> Worthy <a class="hash-link" href="#ltnewsfeedgt-worthy">#</a></h2>
|
||||
<p>Now that the <code><Story></code> is over we can continue with the <code><NewsFeed></code> component. Again, we'll start with a React version:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="kd">var</span> <span class="nx">stories</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">viewer</span><span class="p">.</span><span class="nx">stories</span><span class="p">;</span> <span class="c1">// `viewer` is the active user</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">View</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">stories</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">story</span> <span class="o">=></span> <span class="o"><</span><span class="nx">Story</span> <span class="nx">story</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">}</span> <span class="o">/></span><span class="p">)}</span>
|
||||
<span class="o"><</span><span class="nx">Button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">loadMore</span><span class="p">()}</span><span class="o">></span><span class="nx">Load</span> <span class="nx">More</span><span class="o"><</span><span class="err">/Button></span>
|
||||
<span class="o"><</span><span class="err">/View></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// TODO: fetch more stories</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">NewsFeed</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="all-the-news-fit-to-be-relayed"></a>All the News Fit to be Relayed <a class="hash-link" href="#all-the-news-fit-to-be-relayed">#</a></h2>
|
||||
<p><code><NewsFeed></code> has two new requirements: it composes <code><Story></code> and requests more data at runtime.</p>
|
||||
|
||||
<p>Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: <code>${Component.getQuery('prop')}</code>. Pagination can be accomplished with a query parameter, specified with <code><param></code> (as in <code>stories(first: <count>)</code>):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">NewsFeed</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queryParams</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="mi">3</span> <span class="cm">/* default to 3 stories */</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">viewer</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Viewer</span> <span class="p">{</span>
|
||||
<span class="nx">stories</span><span class="p">(</span><span class="nx">first</span><span class="o">:</span> <span class="o"><</span><span class="nx">count</span><span class="o">></span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* fetch viewer's stories */</span>
|
||||
<span class="nx">edges</span> <span class="p">{</span> <span class="cm">/* traverse the graph */</span>
|
||||
<span class="nx">node</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">{</span><span class="nx">Story</span><span class="p">.</span><span class="nx">getQuery</span><span class="p">(</span><span class="s1">'story'</span><span class="p">)}</span> <span class="cm">/* compose child query */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Whenever <code><NewsFeed></code> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the <code>text</code> and <code>author</code> data will be fetched for each of the 3 story nodes.</p>
|
||||
|
||||
<p>Query parameters are available to components as <code>props.queryParams</code> and can be modified with <code>props.setQueryParams(nextParams)</code>. We can use these to implement pagination:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// read current params</span>
|
||||
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">queryParams</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="c1">// update params</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">setQueryParams</span><span class="p">({</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="o">+</span> <span class="mi">5</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now when <code>loadMore()</code> is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in <code>props.viewer.stories</code> and the updated count reflected in <code>props.queryParams.count</code>.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="in-conclusion"></a>In Conclusion <a class="hash-link" href="#in-conclusion">#</a></h2>
|
||||
<p>These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:</p>
|
||||
|
||||
<ul>
|
||||
<li>Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.</li>
|
||||
<li>Trivial pagination with automatic optimizations to fetch only the additional items.</li>
|
||||
<li>View composition and reusability, so that <code><Story></code> can be used on its own or within <code><NewsFeed></code>, without any changes to either component.</li>
|
||||
<li>Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.</li>
|
||||
<li>Exactly <em>zero</em> lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.</li>
|
||||
</ul>
|
||||
|
||||
<p>But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -61,6 +61,8 @@
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></strong> on March 19, 2015 by Joseph Savona</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></strong> on March 16, 2015 by Paul O’Shannessy</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></strong> on March 10, 2015 by Ben Alpert</p>
|
||||
|
||||
+195
-75
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,199 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></h1>
|
||||
<p class="meta">March 19, 2015 by Joseph Savona</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube.com/watch?v=9sc8Pyc51uU">the conference talk</a>.</p>
|
||||
|
||||
<p>We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-relay-architecture"></a>The Relay Architecture <a class="hash-link" href="#the-relay-architecture">#</a></h2>
|
||||
<p>The diagram below shows the main parts of the Relay architecture on the client and the server:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" /></p>
|
||||
|
||||
<p>The main pieces are as follows:</p>
|
||||
|
||||
<ul>
|
||||
<li>Relay Components: React components annotated with declarative data descriptions.</li>
|
||||
<li>Actions: Descriptions of how data should change in response to user actions.</li>
|
||||
<li>Relay Store: A client-side data store that is fully managed by the framework.</li>
|
||||
<li>Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.</li>
|
||||
</ul>
|
||||
|
||||
<p>This post will focus on <strong>Relay components</strong> that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="a-relay-application"></a>A Relay Application <a class="hash-link" href="#a-relay-application">#</a></h2>
|
||||
<p>To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <code><NewsFeed></code> that renders a list of <code><Story></code> items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-ltstorygt-begins"></a>The <code><Story></code> Begins <a class="hash-link" href="#the-ltstorygt-begins">#</a></h2>
|
||||
<p>The first step is a React <code><Story></code> component that accepts a <code>story</code> prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="kd">var</span> <span class="nx">story</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">View</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Image</span> <span class="nx">uri</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">profile_picture</span><span class="p">.</span><span class="nx">uri</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Text</span><span class="o">></span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/Text></span>
|
||||
<span class="o"><</span><span class="nx">Text</span><span class="o">></span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/Text></span>
|
||||
<span class="o"><</span><span class="err">/View></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Story</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="whats-the-ltstorygt"></a>What's the <code><Story></code>? <a class="hash-link" href="#whats-the-ltstorygt">#</a></h2>
|
||||
<p>Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="cm">/* TODO */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Before adding the GraphQL query, let's look at the component hierarchy this creates:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" /></p>
|
||||
|
||||
<p>Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for <code>story</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Story</span> <span class="p">{</span>
|
||||
<span class="nx">author</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Queries use ES6 template literals tagged with the <code>graphql</code> function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in <code><Story></code>'s render function.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltstorygts-on-demand"></a><code><Story></code>s on Demand <a class="hash-link" href="#ltstorygts-on-demand">#</a></h2>
|
||||
<p>We can render a Relay component by providing Relay with the component (<code><Story></code>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then <code>render()</code> the component. The value of <code>props.story</code> will be a plain JavaScript object such as the following:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="nx">author</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s2">"Greg"</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span><span class="o">:</span> <span class="s2">"https://…"</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s2">"The first Relay blog post is up…"</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Relay guarantees that all data required to render a component will be available before it is rendered. This means that <code><Story></code> does not need to handle a loading state; the <code>story</code> is <em>guaranteed</em> to be available before <code>render()</code> is called. We have found that this invariant simplifies our application code <em>and</em> improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.</p>
|
||||
|
||||
<p>The diagram below shows how Relay containers make data available to our React components:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltnewsfeedgt-worthy"></a><code><NewsFeed></code> Worthy <a class="hash-link" href="#ltnewsfeedgt-worthy">#</a></h2>
|
||||
<p>Now that the <code><Story></code> is over we can continue with the <code><NewsFeed></code> component. Again, we'll start with a React version:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="kd">var</span> <span class="nx">stories</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">viewer</span><span class="p">.</span><span class="nx">stories</span><span class="p">;</span> <span class="c1">// `viewer` is the active user</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">View</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">stories</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">story</span> <span class="o">=></span> <span class="o"><</span><span class="nx">Story</span> <span class="nx">story</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">}</span> <span class="o">/></span><span class="p">)}</span>
|
||||
<span class="o"><</span><span class="nx">Button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">loadMore</span><span class="p">()}</span><span class="o">></span><span class="nx">Load</span> <span class="nx">More</span><span class="o"><</span><span class="err">/Button></span>
|
||||
<span class="o"><</span><span class="err">/View></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// TODO: fetch more stories</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">NewsFeed</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="all-the-news-fit-to-be-relayed"></a>All the News Fit to be Relayed <a class="hash-link" href="#all-the-news-fit-to-be-relayed">#</a></h2>
|
||||
<p><code><NewsFeed></code> has two new requirements: it composes <code><Story></code> and requests more data at runtime.</p>
|
||||
|
||||
<p>Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: <code>${Component.getQuery('prop')}</code>. Pagination can be accomplished with a query parameter, specified with <code><param></code> (as in <code>stories(first: <count>)</code>):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">NewsFeed</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queryParams</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="mi">3</span> <span class="cm">/* default to 3 stories */</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">viewer</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Viewer</span> <span class="p">{</span>
|
||||
<span class="nx">stories</span><span class="p">(</span><span class="nx">first</span><span class="o">:</span> <span class="o"><</span><span class="nx">count</span><span class="o">></span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* fetch viewer's stories */</span>
|
||||
<span class="nx">edges</span> <span class="p">{</span> <span class="cm">/* traverse the graph */</span>
|
||||
<span class="nx">node</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">{</span><span class="nx">Story</span><span class="p">.</span><span class="nx">getQuery</span><span class="p">(</span><span class="s1">'story'</span><span class="p">)}</span> <span class="cm">/* compose child query */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Whenever <code><NewsFeed></code> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the <code>text</code> and <code>author</code> data will be fetched for each of the 3 story nodes.</p>
|
||||
|
||||
<p>Query parameters are available to components as <code>props.queryParams</code> and can be modified with <code>props.setQueryParams(nextParams)</code>. We can use these to implement pagination:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// read current params</span>
|
||||
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">queryParams</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="c1">// update params</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">setQueryParams</span><span class="p">({</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="o">+</span> <span class="mi">5</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now when <code>loadMore()</code> is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in <code>props.viewer.stories</code> and the updated count reflected in <code>props.queryParams.count</code>.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="in-conclusion"></a>In Conclusion <a class="hash-link" href="#in-conclusion">#</a></h2>
|
||||
<p>These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:</p>
|
||||
|
||||
<ul>
|
||||
<li>Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.</li>
|
||||
<li>Trivial pagination with automatic optimizations to fetch only the additional items.</li>
|
||||
<li>View composition and reusability, so that <code><Story></code> can be used on its own or within <code><NewsFeed></code>, without any changes to either component.</li>
|
||||
<li>Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.</li>
|
||||
<li>Exactly <em>zero</em> lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.</li>
|
||||
</ul>
|
||||
|
||||
<p>But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></h1>
|
||||
<p class="meta">March 16, 2015 by Paul O’Shannessy</p>
|
||||
@@ -335,79 +528,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></h1>
|
||||
<p class="meta">February 24, 2015 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>
|
||||
|
||||
<p>We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">our beta announcement</a>. We're really excited about this! Sebastian also posted earlier this morning about <a href="/react/blog/2015/02/24/streamlining-react-elements.html">some of the other changes coming focused around ReactElement</a>. The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.</p>
|
||||
|
||||
<p>The release candidate is available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.13.0-rc1.js">http://fb.me/react-0.13.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.13.0-rc1.min.js">http://fb.me/react-0.13.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.13.0-rc1.js">http://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc1.min.js">http://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.13.0-rc1.js">http://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.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>
|
||||
|
||||
<hr>
|
||||
<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>Mutating <code>props</code> after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated</li>
|
||||
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
|
||||
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component's callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
|
||||
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
|
||||
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
|
||||
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Support for using ES6 classes to build React components; see the <a href="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details</li>
|
||||
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
|
||||
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code><Photo ref={(c) => this._photo = c} /></code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref="photo"</code> which gives <code>this.refs.photo</code>)</li>
|
||||
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) => ({count: state.count + 1}));</code> -- this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
|
||||
<li>Support for iterators and immutable-js sequences as children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>)</li>
|
||||
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (for example, <code>getDOMNode</code>, <code>setProps</code>, <code>replaceState</code>).</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.
|
||||
|
||||
<ul>
|
||||
<li><code>es5</code> is the default.</li>
|
||||
<li><code>es3</code> restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this['static']</code> for IE8 compatibility).</li>
|
||||
</ul></li>
|
||||
<li>The transform for the call spread operator has also been enabled.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>A change was made to how some JSX was parsed, specifically around the use of <code>></code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+84
-149
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,88 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
|
||||
<p class="meta">December 23, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href="/react/docs/getting-started.html">docs</a> and do not hesitate to ask questions on the <a href="http://groups.google.com/group/reactjs">Google Group</a>, <a href="irc://chat.freenode.net/reactjs">IRC</a> or <a href="http://stackoverflow.com/questions/tagged/reactjs">Stack Overflow</a>. We are trying our best to help you out!</p>
|
||||
<h2><a class="anchor" name="the-future-of-javascript-mvc"></a>The Future of Javascript MVC <a class="hash-link" href="#the-future-of-javascript-mvc">#</a></h2>
|
||||
<p><a href="http://swannodette.github.io/">David Nolen</a> announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient <a href="http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.</p>
|
||||
|
||||
<p>Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?</p>
|
||||
|
||||
<p>A whole lot.
|
||||
<figure><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/react/img/blog/om-backbone.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="scroll-position-with-react"></a>Scroll Position with React <a class="hash-link" href="#scroll-position-with-react">#</a></h2>
|
||||
<p>Managing the scroll position when new content is inserted is usually very tricky to get right. <a href="http://blog.vjeux.com/">Vjeux</a> discovered that <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate">componentDidUpdate</a> were triggered exactly at the right time to manage the scroll position.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">componentWillUpdate: function() {
|
||||
var node = this.getDOMNode();
|
||||
this.shouldScrollBottom =
|
||||
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
if (this.shouldScrollBottom) {
|
||||
var node = this.getDOMNode();
|
||||
node.scrollTop = node.scrollHeight
|
||||
}
|
||||
},
|
||||
</code></pre></div>
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html">Check out the blog article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="lights-out"></a>Lights Out <a class="hash-link" href="#lights-out">#</a></h2>
|
||||
<p>React declarative approach is well suited to write games. <a href="https://github.com/chenglou">Cheng Lou</a> wrote the famous Lights Out game in React. It's a good example of use of <a href="http://facebook.github.io/react/docs/animation.html">TransitionGroup</a> to implement animations.
|
||||
<figure><a href="http://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://chenglou.github.io/react-lights-out/">Try it out!</a></p>
|
||||
<h2><a class="anchor" name="reactive-table-bookmarklet"></a>Reactive Table Bookmarklet <a class="hash-link" href="#reactive-table-bookmarklet">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
|
||||
<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="/react/img/blog/reactive-bookmarklet.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactivetable-bookmarklet/">Check out the blog post...</a></p>
|
||||
<h2><a class="anchor" name="montagejs-tutorial-in-react"></a>MontageJS Tutorial in React <a class="hash-link" href="#montagejs-tutorial-in-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> implemented <a href="http://montagejs.org/">MontageJS</a>'s <a href="http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html">Reddit tutorial</a> in React. This is a good opportunity to compare the philosophies of the two libraries.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p><a href="http://jsfiddle.net/ssorallen/fEsYt/">View the source on JSFiddle...</a></p>
|
||||
<h2><a class="anchor" name="writing-good-react-components"></a>Writing Good React Components <a class="hash-link" href="#writing-good-react-components">#</a></h2>
|
||||
<p><a href="http://blog.whn.se/">William Högman Rudenmalm</a> wrote an article on how to write good React components. This is full of good advice.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.</p>
|
||||
|
||||
<p>The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.</p>
|
||||
|
||||
<p>You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.</p>
|
||||
|
||||
<p><a href="http://blog.whn.se/post/69621609605/writing-good-react-components">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
|
||||
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/hoodiehq/hoodie-react-todomvc">Check out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsx-compiler"></a>JSX Compiler <a class="hash-link" href="#jsx-compiler">#</a></h2>
|
||||
<p>Ever wanted to have a quick way to see what a JSX tag would be converted to? <a href="http://www.yungsters.com/">Tim Yung</a> made a page for it.
|
||||
<figure><a href="http://facebook.github.io/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://facebook.github.io/react/jsx-compiler.html">Try it out!</a></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn't force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></h1>
|
||||
<p class="meta">December 19, 2013 by Paul O'Shannessy</p>
|
||||
@@ -355,153 +437,6 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
|
||||
<p class="meta">November 5, 2013 by Pete Hunt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.</p>
|
||||
|
||||
<p>One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.</p>
|
||||
<h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="hash-link" href="#start-with-a-mock">#</a></h2>
|
||||
<p>Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:</p>
|
||||
|
||||
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
|
||||
|
||||
<p>Our JSON API returns some data that looks like this:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">[
|
||||
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
|
||||
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
|
||||
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
|
||||
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
|
||||
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
|
||||
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
|
||||
];
|
||||
</code></pre></div><h2><a class="anchor" name="step-1-break-the-ui-into-a-component-hierarchy"></a>Step 1: break the UI into a component hierarchy <a class="hash-link" href="#step-1-break-the-ui-into-a-component-hierarchy">#</a></h2>
|
||||
<p>The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</p>
|
||||
|
||||
<p>But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">single responsibility principle</a>, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.</p>
|
||||
|
||||
<p>Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same <em>information architecture</em> which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.</p>
|
||||
|
||||
<p><img src="/react/img/blog/thinking-in-react-components.png" alt="Component diagram"></p>
|
||||
|
||||
<p>You'll see here that we have five components in our simple app. I've italicized the data each component represents.</p>
|
||||
|
||||
<ol>
|
||||
<li><strong><code>FilterableProductTable</code> (orange):</strong> contains the entirety of the example</li>
|
||||
<li><strong><code>SearchBar</code> (blue):</strong> receives all <em>user input</em></li>
|
||||
<li><strong><code>ProductTable</code> (green):</strong> displays and filters the <em>data collection</em> based on <em>user input</em></li>
|
||||
<li><strong><code>ProductCategoryRow</code> (turquoise):</strong> displays a heading for each <em>category</em></li>
|
||||
<li><strong><code>ProductRow</code> (red):</strong> displays a row for each <em>product</em></li>
|
||||
</ol>
|
||||
|
||||
<p>If you look at <code>ProductTable</code> you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of <code>ProductTable</code> because it is part of rendering the <em>data collection</em> which is <code>ProductTable</code>'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own <code>ProductTableHeader</code> component.</p>
|
||||
|
||||
<p>Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>FilterableProductTable</code>
|
||||
|
||||
<ul>
|
||||
<li><code>SearchBar</code></li>
|
||||
<li><code>ProductTable</code>
|
||||
|
||||
<ul>
|
||||
<li><code>ProductCategoryRow</code></li>
|
||||
<li><code>ProductRow</code></li>
|
||||
</ul></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.</p>
|
||||
|
||||
<p>To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using <em>props</em>. <em>props</em> are a way of passing data from parent to child. If you're familiar with the concept of <em>state</em>, <strong>don't use state at all</strong> to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.</p>
|
||||
|
||||
<p>You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with <code>FilterableProductTable</code>) or with the ones lower in it (<code>ProductRow</code>). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.</p>
|
||||
|
||||
<p>At the end of this step you'll have a library of reusable components that render your data model. The components will only have <code>render()</code> methods since this is a static version of your app. The component at the top of the hierarchy (<code>FilterableProductTable</code>) will take your data model as a prop. If you make a change to your underlying data model and call <code>renderComponent()</code> again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's <strong>one-way data flow</strong> (also called <em>one-way binding</em>) keeps everything modular, easy to reason about, and fast.</p>
|
||||
|
||||
<p>Simply refer to the <a href="http://facebook.github.io/react/docs/">React docs</a> if you need help executing this step.</p>
|
||||
<h3><a class="anchor" name="a-brief-interlude-props-vs-state"></a>A brief interlude: props vs state <a class="hash-link" href="#a-brief-interlude-props-vs-state">#</a></h3>
|
||||
<p>There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html">the official React docs</a> if you aren't sure what the difference is.</p>
|
||||
<h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representation-of-ui-state"></a>Step 3: Identify the minimal (but complete) representation of UI state <a class="hash-link" href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">#</a></h2>
|
||||
<p>To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with <strong>state</strong>.</p>
|
||||
|
||||
<p>To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: <em>Don't Repeat Yourself</em>. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.</p>
|
||||
|
||||
<p>Think of all of the pieces of data in our example application. We have:</p>
|
||||
|
||||
<ul>
|
||||
<li>The original list of products</li>
|
||||
<li>The search text the user has entered</li>
|
||||
<li>The value of the checkbox</li>
|
||||
<li>The filtered list of products</li>
|
||||
</ul>
|
||||
|
||||
<p>Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:</p>
|
||||
|
||||
<ol>
|
||||
<li>Is it passed in from a parent via props? If so, it probably isn't state.</li>
|
||||
<li>Does it change over time? If not, it probably isn't state.</li>
|
||||
<li>Can you compute it based on any other state or props in your component? If so, it's not state.</li>
|
||||
</ol>
|
||||
|
||||
<p>The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.</p>
|
||||
|
||||
<p>So finally, our state is:</p>
|
||||
|
||||
<ul>
|
||||
<li>The search text the user has entered</li>
|
||||
<li>The value of the checkbox</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
|
||||
|
||||
<p>Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. <strong>This is often the most challenging part for newcomers to understand,</strong> so follow these steps to figure it out:</p>
|
||||
|
||||
<p>For each piece of state in your application:</p>
|
||||
|
||||
<ul>
|
||||
<li>Identify every component that renders something based on that state.</li>
|
||||
<li>Find a common owner component (a single component above all the components that need the state in the hierarchy).</li>
|
||||
<li>Either the common owner or another component higher up in the hierarchy should own the state.</li>
|
||||
<li>If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</li>
|
||||
</ul>
|
||||
|
||||
<p>Let's run through this strategy for our application:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state.</li>
|
||||
<li>The common owner component is <code>FilterableProductTable</code>.</li>
|
||||
<li>It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Cool, so we've decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: '', inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>
|
||||
|
||||
<p>You can start seeing how your application will behave: set <code>filterText</code> to <code>"ball"</code> and refresh your app. You'll see the data table is updated correctly.</p>
|
||||
<h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
|
||||
|
||||
<p>React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called <code>ReactLink</code> to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.</p>
|
||||
|
||||
<p>If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the <code>value</code> prop of the <code>input</code> to always be equal to the <code>state</code> passed in from <code>FilterableProductTable</code>.</p>
|
||||
|
||||
<p>Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, <code>FilterableProductTable</code> will pass a callback to <code>SearchBar</code> that will fire whenever the state should be updated. We can use the <code>onChange</code> event on the inputs to be notified of it. And the callback passed by <code>FilterableProductTable</code> will call <code>setState()</code> and the app will be updated.</p>
|
||||
|
||||
<p>Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.</p>
|
||||
<h2><a class="anchor" name="and-thats-it"></a>And that's it <a class="hash-link" href="#and-thats-it">#</a></h2>
|
||||
<p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+149
-84
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,153 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
|
||||
<p class="meta">November 5, 2013 by Pete Hunt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.</p>
|
||||
|
||||
<p>One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.</p>
|
||||
<h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="hash-link" href="#start-with-a-mock">#</a></h2>
|
||||
<p>Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:</p>
|
||||
|
||||
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
|
||||
|
||||
<p>Our JSON API returns some data that looks like this:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">[
|
||||
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
|
||||
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
|
||||
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
|
||||
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
|
||||
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
|
||||
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
|
||||
];
|
||||
</code></pre></div><h2><a class="anchor" name="step-1-break-the-ui-into-a-component-hierarchy"></a>Step 1: break the UI into a component hierarchy <a class="hash-link" href="#step-1-break-the-ui-into-a-component-hierarchy">#</a></h2>
|
||||
<p>The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</p>
|
||||
|
||||
<p>But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">single responsibility principle</a>, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.</p>
|
||||
|
||||
<p>Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same <em>information architecture</em> which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.</p>
|
||||
|
||||
<p><img src="/react/img/blog/thinking-in-react-components.png" alt="Component diagram"></p>
|
||||
|
||||
<p>You'll see here that we have five components in our simple app. I've italicized the data each component represents.</p>
|
||||
|
||||
<ol>
|
||||
<li><strong><code>FilterableProductTable</code> (orange):</strong> contains the entirety of the example</li>
|
||||
<li><strong><code>SearchBar</code> (blue):</strong> receives all <em>user input</em></li>
|
||||
<li><strong><code>ProductTable</code> (green):</strong> displays and filters the <em>data collection</em> based on <em>user input</em></li>
|
||||
<li><strong><code>ProductCategoryRow</code> (turquoise):</strong> displays a heading for each <em>category</em></li>
|
||||
<li><strong><code>ProductRow</code> (red):</strong> displays a row for each <em>product</em></li>
|
||||
</ol>
|
||||
|
||||
<p>If you look at <code>ProductTable</code> you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of <code>ProductTable</code> because it is part of rendering the <em>data collection</em> which is <code>ProductTable</code>'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own <code>ProductTableHeader</code> component.</p>
|
||||
|
||||
<p>Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>FilterableProductTable</code>
|
||||
|
||||
<ul>
|
||||
<li><code>SearchBar</code></li>
|
||||
<li><code>ProductTable</code>
|
||||
|
||||
<ul>
|
||||
<li><code>ProductCategoryRow</code></li>
|
||||
<li><code>ProductRow</code></li>
|
||||
</ul></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.</p>
|
||||
|
||||
<p>To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using <em>props</em>. <em>props</em> are a way of passing data from parent to child. If you're familiar with the concept of <em>state</em>, <strong>don't use state at all</strong> to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.</p>
|
||||
|
||||
<p>You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with <code>FilterableProductTable</code>) or with the ones lower in it (<code>ProductRow</code>). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.</p>
|
||||
|
||||
<p>At the end of this step you'll have a library of reusable components that render your data model. The components will only have <code>render()</code> methods since this is a static version of your app. The component at the top of the hierarchy (<code>FilterableProductTable</code>) will take your data model as a prop. If you make a change to your underlying data model and call <code>renderComponent()</code> again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's <strong>one-way data flow</strong> (also called <em>one-way binding</em>) keeps everything modular, easy to reason about, and fast.</p>
|
||||
|
||||
<p>Simply refer to the <a href="http://facebook.github.io/react/docs/">React docs</a> if you need help executing this step.</p>
|
||||
<h3><a class="anchor" name="a-brief-interlude-props-vs-state"></a>A brief interlude: props vs state <a class="hash-link" href="#a-brief-interlude-props-vs-state">#</a></h3>
|
||||
<p>There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html">the official React docs</a> if you aren't sure what the difference is.</p>
|
||||
<h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representation-of-ui-state"></a>Step 3: Identify the minimal (but complete) representation of UI state <a class="hash-link" href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">#</a></h2>
|
||||
<p>To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with <strong>state</strong>.</p>
|
||||
|
||||
<p>To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: <em>Don't Repeat Yourself</em>. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.</p>
|
||||
|
||||
<p>Think of all of the pieces of data in our example application. We have:</p>
|
||||
|
||||
<ul>
|
||||
<li>The original list of products</li>
|
||||
<li>The search text the user has entered</li>
|
||||
<li>The value of the checkbox</li>
|
||||
<li>The filtered list of products</li>
|
||||
</ul>
|
||||
|
||||
<p>Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:</p>
|
||||
|
||||
<ol>
|
||||
<li>Is it passed in from a parent via props? If so, it probably isn't state.</li>
|
||||
<li>Does it change over time? If not, it probably isn't state.</li>
|
||||
<li>Can you compute it based on any other state or props in your component? If so, it's not state.</li>
|
||||
</ol>
|
||||
|
||||
<p>The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.</p>
|
||||
|
||||
<p>So finally, our state is:</p>
|
||||
|
||||
<ul>
|
||||
<li>The search text the user has entered</li>
|
||||
<li>The value of the checkbox</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
|
||||
|
||||
<p>Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. <strong>This is often the most challenging part for newcomers to understand,</strong> so follow these steps to figure it out:</p>
|
||||
|
||||
<p>For each piece of state in your application:</p>
|
||||
|
||||
<ul>
|
||||
<li>Identify every component that renders something based on that state.</li>
|
||||
<li>Find a common owner component (a single component above all the components that need the state in the hierarchy).</li>
|
||||
<li>Either the common owner or another component higher up in the hierarchy should own the state.</li>
|
||||
<li>If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</li>
|
||||
</ul>
|
||||
|
||||
<p>Let's run through this strategy for our application:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state.</li>
|
||||
<li>The common owner component is <code>FilterableProductTable</code>.</li>
|
||||
<li>It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></li>
|
||||
</ul>
|
||||
|
||||
<p>Cool, so we've decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: '', inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>
|
||||
|
||||
<p>You can start seeing how your application will behave: set <code>filterText</code> to <code>"ball"</code> and refresh your app. You'll see the data table is updated correctly.</p>
|
||||
<h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p>So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
|
||||
|
||||
<p>React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called <code>ReactLink</code> to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.</p>
|
||||
|
||||
<p>If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the <code>value</code> prop of the <code>input</code> to always be equal to the <code>state</code> passed in from <code>FilterableProductTable</code>.</p>
|
||||
|
||||
<p>Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, <code>FilterableProductTable</code> will pass a callback to <code>SearchBar</code> that will fire whenever the state should be updated. We can use the <code>onChange</code> event on the inputs to be notified of it. And the callback passed by <code>FilterableProductTable</code> will call <code>setState()</code> and the app will be updated.</p>
|
||||
|
||||
<p>Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.</p>
|
||||
<h2><a class="anchor" name="and-thats-it"></a>And that's it <a class="hash-link" href="#and-thats-it">#</a></h2>
|
||||
<p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></h1>
|
||||
<p class="meta">October 29, 2013 by Paul O'Shannessy</p>
|
||||
@@ -309,88 +456,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
|
||||
<p class="meta">August 26, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's been three months since we open sourced React and it is going well. Some stats so far:</p>
|
||||
|
||||
<ul>
|
||||
<li>114 285 unique visitors on this website</li>
|
||||
<li><a href="https://github.com/facebook/react/stargazers">1933 stars</a> and <a href="https://github.com/facebook/react/network/members">210 forks</a></li>
|
||||
<li><a href="https://groups.google.com/forum/#!forum/reactjs">226 posts on Google Group</a></li>
|
||||
<li><a href="https://gist.github.com/vjeux/6335762">76 Github projects using React</a></li>
|
||||
<li><a href="https://github.com/facebook/react/graphs/contributors">30 contributors</a></li>
|
||||
<li><a href="http://facebook.github.io/react/blog/">15 blog posts</a></li>
|
||||
<li>2 early adopters: <a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Khan Academy</a> and <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="wolfenstein-rendering-engine-ported-to-react"></a>Wolfenstein Rendering Engine Ported to React <a class="hash-link" href="#wolfenstein-rendering-engine-ported-to-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> ported the render code of the web version of Wolfenstein 3D to React. Check out <a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html">the demo</a> and <a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">render.js</a> file for the implementation.
|
||||
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="react-amp-meteor"></a>React & Meteor <a class="hash-link" href="#react-amp-meteor">#</a></h2>
|
||||
<p><a href="https://twitter.com/benjamn">Ben Newman</a> made a <a href="https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js">13-lines wrapper</a> to use React and Meteor together. <a href="http://www.meteor.com/">Meteor</a> handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
|
||||
|
||||
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
|
||||
|
||||
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="nx">Session</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">)</span> <span class="p">};</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">div</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">foo</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.</p>
|
||||
|
||||
<p><a href="https://github.com/benjamn/meteor-react">Read more ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-page"></a>React Page <a class="hash-link" href="#react-page">#</a></h2>
|
||||
<p><a href="https://github.com/jordwalke">Jordan Walke</a> implemented a complete React project creator called <a href="https://github.com/facebook/react-page/">react-page</a>. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Easy Application Development with React JavaScript
|
||||
<figure><a href="https://github.com/facebook/react-page/"><img src="/react/img/blog/react-page.png" alt=""></a></figure></p>
|
||||
|
||||
<p><strong>Why Server Rendering?</strong></p>
|
||||
|
||||
<ul>
|
||||
<li>Faster initial page speed:
|
||||
|
||||
<ul>
|
||||
<li>Markup displayed before downloading large JavaScript.</li>
|
||||
<li>Markup can be generated more quickly on a fast server than low power client devices.</li>
|
||||
</ul></li>
|
||||
<li>Faster Development and Prototyping:
|
||||
|
||||
<ul>
|
||||
<li>Instantly refresh your app without waiting for any watch scripts or bundlers.</li>
|
||||
</ul></li>
|
||||
<li>Easy deployment of static content pages/blogs: just archive using recursive wget.</li>
|
||||
<li>SEO benefits of indexability and perf.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>How Does Server Rendering Work?</strong></p>
|
||||
|
||||
<ul>
|
||||
<li><code>react-page</code> computes page markup on the server, sends it to the client so the user can see it quickly.</li>
|
||||
<li>The corresponding JavaScript is then packaged and sent.</li>
|
||||
<li>The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.</li>
|
||||
<li>From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+84
-100
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,88 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
|
||||
<p class="meta">August 26, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's been three months since we open sourced React and it is going well. Some stats so far:</p>
|
||||
|
||||
<ul>
|
||||
<li>114 285 unique visitors on this website</li>
|
||||
<li><a href="https://github.com/facebook/react/stargazers">1933 stars</a> and <a href="https://github.com/facebook/react/network/members">210 forks</a></li>
|
||||
<li><a href="https://groups.google.com/forum/#!forum/reactjs">226 posts on Google Group</a></li>
|
||||
<li><a href="https://gist.github.com/vjeux/6335762">76 Github projects using React</a></li>
|
||||
<li><a href="https://github.com/facebook/react/graphs/contributors">30 contributors</a></li>
|
||||
<li><a href="http://facebook.github.io/react/blog/">15 blog posts</a></li>
|
||||
<li>2 early adopters: <a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Khan Academy</a> and <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="wolfenstein-rendering-engine-ported-to-react"></a>Wolfenstein Rendering Engine Ported to React <a class="hash-link" href="#wolfenstein-rendering-engine-ported-to-react">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> ported the render code of the web version of Wolfenstein 3D to React. Check out <a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html">the demo</a> and <a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">render.js</a> file for the implementation.
|
||||
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="react-amp-meteor"></a>React & Meteor <a class="hash-link" href="#react-amp-meteor">#</a></h2>
|
||||
<p><a href="https://twitter.com/benjamn">Ben Newman</a> made a <a href="https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js">13-lines wrapper</a> to use React and Meteor together. <a href="http://www.meteor.com/">Meteor</a> handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
|
||||
|
||||
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
|
||||
|
||||
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="nx">Session</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'foo'</span><span class="p">)</span> <span class="p">};</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">div</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">foo</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.</p>
|
||||
|
||||
<p><a href="https://github.com/benjamn/meteor-react">Read more ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-page"></a>React Page <a class="hash-link" href="#react-page">#</a></h2>
|
||||
<p><a href="https://github.com/jordwalke">Jordan Walke</a> implemented a complete React project creator called <a href="https://github.com/facebook/react-page/">react-page</a>. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Easy Application Development with React JavaScript
|
||||
<figure><a href="https://github.com/facebook/react-page/"><img src="/react/img/blog/react-page.png" alt=""></a></figure></p>
|
||||
|
||||
<p><strong>Why Server Rendering?</strong></p>
|
||||
|
||||
<ul>
|
||||
<li>Faster initial page speed:
|
||||
|
||||
<ul>
|
||||
<li>Markup displayed before downloading large JavaScript.</li>
|
||||
<li>Markup can be generated more quickly on a fast server than low power client devices.</li>
|
||||
</ul></li>
|
||||
<li>Faster Development and Prototyping:
|
||||
|
||||
<ul>
|
||||
<li>Instantly refresh your app without waiting for any watch scripts or bundlers.</li>
|
||||
</ul></li>
|
||||
<li>Easy deployment of static content pages/blogs: just archive using recursive wget.</li>
|
||||
<li>SEO benefits of indexability and perf.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>How Does Server Rendering Work?</strong></p>
|
||||
|
||||
<ul>
|
||||
<li><code>react-page</code> computes page markup on the server, sends it to the client so the user can see it quickly.</li>
|
||||
<li>The corresponding JavaScript is then packaged and sent.</li>
|
||||
<li>The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.</li>
|
||||
<li>From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></h1>
|
||||
<p class="meta">August 19, 2013 by Kunal Mehta</p>
|
||||
@@ -266,104 +348,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
|
||||
<p class="meta">July 23, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We launched the <a href="https://www.facebook.com/react">React Facebook Page</a> along with the React v0.4 launch. 700 people already liked it to get updated on the project :)</p>
|
||||
<h2><a class="anchor" name="cross-browser-onchange"></a>Cross-browser onChange <a class="hash-link" href="#cross-browser-onchange">#</a></h2>
|
||||
<p><a href="http://benalpert.com/">Ben Alpert</a> from <a href="https://www.khanacademy.org/">Khan Academy</a> worked on a cross-browser implementation of <code>onChange</code> event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>First off, what is the input event? If you have an <code><input></code> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.</p>
|
||||
|
||||
<p>Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using <code>setTimeout(fn, 0)</code> or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).</p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-samples"></a>React Samples <a class="hash-link" href="#react-samples">#</a></h2>
|
||||
<p>Learning a new library is always easier when you have working examples you can play with. <a href="https://github.com/jhw">jwh</a> put many of them on his <a href="https://github.com/jhw/react-samples">react-samples Github repo</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Some simple examples with Facebook's React framework</p>
|
||||
|
||||
<ul>
|
||||
<li>Bootstrap action bar, modal and table <a href="https://rawgithub.com/jhw/react-samples/master/html/actionbar.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html">#4</a></li>
|
||||
<li>Comments <a href="https://rawgithub.com/jhw/react-samples/master/html/comments1.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/comments2.html">#2</a></li>
|
||||
<li>Data Table <a href="https://rawgithub.com/jhw/react-samples/master/html/datatable.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable4.html">#4</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable5.html">#5</a></li>
|
||||
<li>Filter Bar <a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html">#4</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html">#5</a></li>
|
||||
<li>Fundoo Rating <a href="https://rawgithub.com/jhw/react-samples/master/html/fundoo.html">#1</a></li>
|
||||
<li>Line Char: <a href="https://rawgithub.com/jhw/react-samples/master/html/linechart.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/linechart2.html">#2</a></li>
|
||||
<li>Multi tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/multitabs.html">#1</a></li>
|
||||
<li>Select <a href="https://rawgithub.com/jhw/react-samples/master/html/select.html">#1</a></li>
|
||||
<li>Simple Tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html">#4</a></li>
|
||||
<li>Toggle <a href="https://rawgithub.com/jhw/react-samples/master/html/toggle.html">#1</a></li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
|
||||
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">"No result"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Harvest"</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Facebook"</span><span class="o">></span><span class="nx">Facebook</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Harvest"</span><span class="o">></span><span class="nx">Harvest</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="err">/Chosen></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="jsx-and-es6-template-strings"></a>JSX and ES6 Template Strings <a class="hash-link" href="#jsx-and-es6-template-strings">#</a></h2>
|
||||
<p><a href="http://domenicdenicola.com/">Domenic Denicola</a> wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.</p>
|
||||
|
||||
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
|
||||
<h2><a class="anchor" name="react-presentation"></a>React Presentation <a class="hash-link" href="#react-presentation">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> and <a href="https://github.com/jordwalke">Jordan Walke</a>, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.</p>
|
||||
|
||||
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="docs"></a>Docs <a class="hash-link" href="#docs">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Guides</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/why-react.html">Why React?</a></li>
|
||||
<li><a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-in-depth.html">JSX in Depth</a></li>
|
||||
<li><a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a></li>
|
||||
</ul></li>
|
||||
<li><a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a></li>
|
||||
<li><a href="/react/docs/multiple-components.html">Multiple Components</a></li>
|
||||
<li><a href="/react/docs/reusable-components.html">Reusable Components</a></li>
|
||||
<li><a href="/react/docs/forms.html">Forms</a></li>
|
||||
<li><a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/more-about-refs.html">More About Refs</a></li>
|
||||
</ul></li>
|
||||
<li><a href="/react/docs/tooling-integration.html">Tooling integration</a></li>
|
||||
<li><a href="/react/docs/top-level-api.html">Reference</a></li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+100
-85
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,104 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
|
||||
<p class="meta">July 23, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>We launched the <a href="https://www.facebook.com/react">React Facebook Page</a> along with the React v0.4 launch. 700 people already liked it to get updated on the project :)</p>
|
||||
<h2><a class="anchor" name="cross-browser-onchange"></a>Cross-browser onChange <a class="hash-link" href="#cross-browser-onchange">#</a></h2>
|
||||
<p><a href="http://benalpert.com/">Ben Alpert</a> from <a href="https://www.khanacademy.org/">Khan Academy</a> worked on a cross-browser implementation of <code>onChange</code> event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>First off, what is the input event? If you have an <code><input></code> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.</p>
|
||||
|
||||
<p>Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using <code>setTimeout(fn, 0)</code> or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).</p>
|
||||
|
||||
<p><a href="http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-samples"></a>React Samples <a class="hash-link" href="#react-samples">#</a></h2>
|
||||
<p>Learning a new library is always easier when you have working examples you can play with. <a href="https://github.com/jhw">jwh</a> put many of them on his <a href="https://github.com/jhw/react-samples">react-samples Github repo</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Some simple examples with Facebook's React framework</p>
|
||||
|
||||
<ul>
|
||||
<li>Bootstrap action bar, modal and table <a href="https://rawgithub.com/jhw/react-samples/master/html/actionbar.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html">#4</a></li>
|
||||
<li>Comments <a href="https://rawgithub.com/jhw/react-samples/master/html/comments1.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/comments2.html">#2</a></li>
|
||||
<li>Data Table <a href="https://rawgithub.com/jhw/react-samples/master/html/datatable.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable4.html">#4</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable5.html">#5</a></li>
|
||||
<li>Filter Bar <a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html">#4</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html">#5</a></li>
|
||||
<li>Fundoo Rating <a href="https://rawgithub.com/jhw/react-samples/master/html/fundoo.html">#1</a></li>
|
||||
<li>Line Char: <a href="https://rawgithub.com/jhw/react-samples/master/html/linechart.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/linechart2.html">#2</a></li>
|
||||
<li>Multi tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/multitabs.html">#1</a></li>
|
||||
<li>Select <a href="https://rawgithub.com/jhw/react-samples/master/html/select.html">#1</a></li>
|
||||
<li>Simple Tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html">#1</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html">#2</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html">#3</a>,
|
||||
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html">#4</a></li>
|
||||
<li>Toggle <a href="https://rawgithub.com/jhw/react-samples/master/html/toggle.html">#1</a></li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
|
||||
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><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">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">"No result"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Harvest"</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Facebook"</span><span class="o">></span><span class="nx">Facebook</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Harvest"</span><span class="o">></span><span class="nx">Harvest</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="err">/Chosen></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="jsx-and-es6-template-strings"></a>JSX and ES6 Template Strings <a class="hash-link" href="#jsx-and-es6-template-strings">#</a></h2>
|
||||
<p><a href="http://domenicdenicola.com/">Domenic Denicola</a> wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.</p>
|
||||
|
||||
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
|
||||
<h2><a class="anchor" name="react-presentation"></a>React Presentation <a class="hash-link" href="#react-presentation">#</a></h2>
|
||||
<p><a href="http://tomocchino.com/">Tom Occhino</a> and <a href="https://github.com/jordwalke">Jordan Walke</a>, React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.</p>
|
||||
|
||||
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<h2><a class="anchor" name="docs"></a>Docs <a class="hash-link" href="#docs">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/">Pete Hunt</a> rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Guides</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/why-react.html">Why React?</a></li>
|
||||
<li><a href="/react/docs/displaying-data.html">Displaying Data</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-in-depth.html">JSX in Depth</a></li>
|
||||
<li><a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a></li>
|
||||
</ul></li>
|
||||
<li><a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a></li>
|
||||
<li><a href="/react/docs/multiple-components.html">Multiple Components</a></li>
|
||||
<li><a href="/react/docs/reusable-components.html">Reusable Components</a></li>
|
||||
<li><a href="/react/docs/forms.html">Forms</a></li>
|
||||
<li><a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
||||
|
||||
<ul>
|
||||
<li><a href="/react/docs/more-about-refs.html">More About Refs</a></li>
|
||||
</ul></li>
|
||||
<li><a href="/react/docs/tooling-integration.html">Tooling integration</a></li>
|
||||
<li><a href="/react/docs/top-level-api.html">Reference</a></li>
|
||||
</ul>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></h1>
|
||||
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
|
||||
@@ -291,89 +389,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/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
|
||||
<p class="meta">June 27, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.</p>
|
||||
<h2><a class="anchor" name="moving-from-backbone-to-react"></a>Moving From Backbone To React <a class="hash-link" href="#moving-from-backbone-to-react">#</a></h2>
|
||||
<p><a href="http://twitter.com/clayallsopp">Clay Allsopp</a> successfully ported <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a>, a fairly big, interaction-heavy JavaScript app, to React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/"><img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" /></a>Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.</p>
|
||||
|
||||
<p>React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]</p>
|
||||
|
||||
<p>We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.</p>
|
||||
|
||||
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="grunt-task-for-jsx"></a>Grunt Task for JSX <a class="hash-link" href="#grunt-task-for-jsx">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> wrote a task for <a href="http://gruntjs.com/">Grunt</a> that applies the JSX transformation to your Javascript files. It also works with <a href="http://browserify.org/">Browserify</a> if you want all your files to be concatenated and minified together.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Grunt task for compiling Facebook React's .jsx templates into .js</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
|
||||
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">'js'</span> <span class="p">},</span>
|
||||
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'path/to/output/dir'</span><span class="o">:</span> <span class="s1">'path/to/jsx/templates/dir'</span> <span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>It also works great with <code>grunt-browserify</code>!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'grunt-react'</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">src</span><span class="o">:</span> <span class="s1">'path/to/source/main.js'</span><span class="p">,</span>
|
||||
<span class="nx">dest</span><span class="o">:</span> <span class="s1">'path/to/target/output.js'</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/ericclemmons/grunt-react">Check out the project ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="backbonehandlebars-nested-views"></a>Backbone/Handlebars Nested Views <a class="hash-link" href="#backbonehandlebars-nested-views">#</a></h2>
|
||||
<p><a href="http://joelburget.com/">Joel Burget</a> wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.</p>
|
||||
|
||||
<p>What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).</p>
|
||||
|
||||
<p>So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.</p>
|
||||
|
||||
<p><a href="http://joelburget.com/react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsromandie-meetup"></a>JSRomandie Meetup <a class="hash-link" href="#jsromandie-meetup">#</a></h2>
|
||||
<p><a href="https://twitter.com/renajohn/">Renault John Lecoultre</a> from <a href="http://www.bugbuster.com">BugBuster</a> did a React introduction talk at a JS meetup called <a href="https://twitter.com/jsromandie">JS Romandie</a> last week.</p>
|
||||
|
||||
<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
|
||||
<h2><a class="anchor" name="coffeescript-integration"></a>CoffeeScript integration <a class="hash-link" href="#coffeescript-integration">#</a></h2>
|
||||
<p><a href="http://blog.vjeux.com/">Vjeux</a> used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <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="nx">className</span><span class="o">:</span> <span class="s1">'MarkdownEditor'</span><span class="p">},</span> <span class="p">[</span>
|
||||
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">'Input'</span><span class="p">),</span>
|
||||
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">'textarea'</span><span class="p">},</span>
|
||||
<span class="err">@</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">])</span>
|
||||
</code></pre></div>
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/react-coffeescript.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="tutorial-in-plain-javascript"></a>Tutorial in Plain Javascript <a class="hash-link" href="#tutorial-in-plain-javascript">#</a></h2>
|
||||
<p>We've seen a lot of people comparing React with various frameworks. <a href="http://ricardo.cc/">Ricardo Tomasi</a> decided to re-implement the tutorial without any framework, just plain Javascript.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.</p>
|
||||
|
||||
<p><a href="http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+89
-16
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,89 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
|
||||
<p class="meta">June 27, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.</p>
|
||||
<h2><a class="anchor" name="moving-from-backbone-to-react"></a>Moving From Backbone To React <a class="hash-link" href="#moving-from-backbone-to-react">#</a></h2>
|
||||
<p><a href="http://twitter.com/clayallsopp">Clay Allsopp</a> successfully ported <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a>, a fairly big, interaction-heavy JavaScript app, to React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/"><img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" /></a>Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.</p>
|
||||
|
||||
<p>React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]</p>
|
||||
|
||||
<p>We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.</p>
|
||||
|
||||
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="grunt-task-for-jsx"></a>Grunt Task for JSX <a class="hash-link" href="#grunt-task-for-jsx">#</a></h2>
|
||||
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> wrote a task for <a href="http://gruntjs.com/">Grunt</a> that applies the JSX transformation to your Javascript files. It also works with <a href="http://browserify.org/">Browserify</a> if you want all your files to be concatenated and minified together.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Grunt task for compiling Facebook React's .jsx templates into .js</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
|
||||
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">'js'</span> <span class="p">},</span>
|
||||
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">'path/to/output/dir'</span><span class="o">:</span> <span class="s1">'path/to/jsx/templates/dir'</span> <span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>It also works great with <code>grunt-browserify</code>!</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'grunt-react'</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">src</span><span class="o">:</span> <span class="s1">'path/to/source/main.js'</span><span class="p">,</span>
|
||||
<span class="nx">dest</span><span class="o">:</span> <span class="s1">'path/to/target/output.js'</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/ericclemmons/grunt-react">Check out the project ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="backbonehandlebars-nested-views"></a>Backbone/Handlebars Nested Views <a class="hash-link" href="#backbonehandlebars-nested-views">#</a></h2>
|
||||
<p><a href="http://joelburget.com/">Joel Burget</a> wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.</p>
|
||||
|
||||
<p>What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).</p>
|
||||
|
||||
<p>So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.</p>
|
||||
|
||||
<p><a href="http://joelburget.com/react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsromandie-meetup"></a>JSRomandie Meetup <a class="hash-link" href="#jsromandie-meetup">#</a></h2>
|
||||
<p><a href="https://twitter.com/renajohn/">Renault John Lecoultre</a> from <a href="http://www.bugbuster.com">BugBuster</a> did a React introduction talk at a JS meetup called <a href="https://twitter.com/jsromandie">JS Romandie</a> last week.</p>
|
||||
|
||||
<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
|
||||
<h2><a class="anchor" name="coffeescript-integration"></a>CoffeeScript integration <a class="hash-link" href="#coffeescript-integration">#</a></h2>
|
||||
<p><a href="http://blog.vjeux.com/">Vjeux</a> used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <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="nx">className</span><span class="o">:</span> <span class="s1">'MarkdownEditor'</span><span class="p">},</span> <span class="p">[</span>
|
||||
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">'Input'</span><span class="p">),</span>
|
||||
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">'textarea'</span><span class="p">},</span>
|
||||
<span class="err">@</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">])</span>
|
||||
</code></pre></div>
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/react-coffeescript.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="tutorial-in-plain-javascript"></a>Tutorial in Plain Javascript <a class="hash-link" href="#tutorial-in-plain-javascript">#</a></h2>
|
||||
<p>We've seen a lot of people comparing React with various frameworks. <a href="http://ricardo.cc/">Ricardo Tomasi</a> decided to re-implement the tutorial without any framework, just plain Javascript.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.</p>
|
||||
|
||||
<p><a href="http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></h1>
|
||||
<p class="meta">June 21, 2013 by Paul O'Shannessy</p>
|
||||
@@ -329,20 +412,6 @@ but if you are interested in the nuts and bolts
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
|
||||
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
||||
|
||||
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
@@ -351,6 +420,10 @@ but if you are interested in the nuts and bolts
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/react/blog/page15/" class="next">
|
||||
Next Page »
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>Blog | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="Blog | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/page15/index.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" src="/react/img/logo.svg" width="36" height="36">
|
||||
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="https://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/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/04/community-roundup-25.html">Community Round-up #25</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/20/introducing-relay-and-graphql.html">Introducing Relay and GraphQL</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
|
||||
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
||||
|
||||
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
<a href="/react/blog/page14/" class="previous">
|
||||
« Previous Page
|
||||
</a>
|
||||
|
||||
|
||||
</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">
|
||||
© 2013–2015 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+75
-43
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,79 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a></h1>
|
||||
<p class="meta">February 24, 2015 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>
|
||||
|
||||
<p>We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">our beta announcement</a>. We're really excited about this! Sebastian also posted earlier this morning about <a href="/react/blog/2015/02/24/streamlining-react-elements.html">some of the other changes coming focused around ReactElement</a>. The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.</p>
|
||||
|
||||
<p>The release candidate is available for download:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.13.0-rc1.js">http://fb.me/react-0.13.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.13.0-rc1.min.js">http://fb.me/react-0.13.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.13.0-rc1.js">http://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc1.min.js">http://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.13.0-rc1.js">http://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.13.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>
|
||||
|
||||
<hr>
|
||||
<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>Mutating <code>props</code> after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated</li>
|
||||
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
|
||||
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component's callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
|
||||
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
|
||||
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
|
||||
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Support for using ES6 classes to build React components; see the <a href="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details</li>
|
||||
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
|
||||
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code><Photo ref={(c) => this._photo = c} /></code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref="photo"</code> which gives <code>this.refs.photo</code>)</li>
|
||||
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) => ({count: state.count + 1}));</code> -- this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
|
||||
<li>Support for iterators and immutable-js sequences as children</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>)</li>
|
||||
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (for example, <code>getDOMNode</code>, <code>setProps</code>, <code>replaceState</code>).</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||||
<ul>
|
||||
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.
|
||||
|
||||
<ul>
|
||||
<li><code>es5</code> is the default.</li>
|
||||
<li><code>es3</code> restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this['static']</code> for IE8 compatibility).</li>
|
||||
</ul></li>
|
||||
<li>The transform for the call spread operator has also been enabled.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||||
<ul>
|
||||
<li>A change was made to how some JSX was parsed, specifically around the use of <code>></code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2015/02/24/streamlining-react-elements.html">Streamlining React Elements</a></h1>
|
||||
<p class="meta">February 24, 2015 by Sebastian Markbåge</p>
|
||||
@@ -708,47 +781,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></h1>
|
||||
<p class="meta">December 19, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>
|
||||
|
||||
<p>I'm really excited about this and I hope you are too! The full announcement is below:</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!</p>
|
||||
|
||||
<p>Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the <a href="http://conf.reactjs.com/">website</a> and <a href="http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html">updates</a> on our blog.</p>
|
||||
|
||||
<p>At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
|
||||
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.</p>
|
||||
|
||||
<p>To apply for the scholarship, please visit the Application Page: <a href="https://www.surveymonkey.com/s/XVJGK6R">https://www.surveymonkey.com/s/XVJGK6R</a></p>
|
||||
<h2><a class="anchor" name="award-includes"></a>Award Includes <a class="hash-link" href="#award-includes">#</a></h2>
|
||||
<ul>
|
||||
<li>Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA</li>
|
||||
<li>Paid travel and lodging expenses</li>
|
||||
<li>Additional $200 meal stipend</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="important-dates"></a>Important Dates <a class="hash-link" href="#important-dates">#</a></h2>
|
||||
<ul>
|
||||
<li>Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full</li>
|
||||
<li>Friday, January 9, 2015: Award recipients will be notified by email of their acceptance</li>
|
||||
<li>Wednesday & Thursday, January 28 & 29, 2015: React.js Conf</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="eligibility"></a>Eligibility <a class="hash-link" href="#eligibility">#</a></h2>
|
||||
<ul>
|
||||
<li>Must currently be studying or working in Computer Science or a related field</li>
|
||||
<li>International applicants are welcome, but you will be responsible for securing your own visa to attend the conference</li>
|
||||
<li>You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+43
-20
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,47 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></h1>
|
||||
<p class="meta">December 19, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>
|
||||
|
||||
<p>I'm really excited about this and I hope you are too! The full announcement is below:</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!</p>
|
||||
|
||||
<p>Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the <a href="http://conf.reactjs.com/">website</a> and <a href="http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html">updates</a> on our blog.</p>
|
||||
|
||||
<p>At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
|
||||
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.</p>
|
||||
|
||||
<p>To apply for the scholarship, please visit the Application Page: <a href="https://www.surveymonkey.com/s/XVJGK6R">https://www.surveymonkey.com/s/XVJGK6R</a></p>
|
||||
<h2><a class="anchor" name="award-includes"></a>Award Includes <a class="hash-link" href="#award-includes">#</a></h2>
|
||||
<ul>
|
||||
<li>Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA</li>
|
||||
<li>Paid travel and lodging expenses</li>
|
||||
<li>Additional $200 meal stipend</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="important-dates"></a>Important Dates <a class="hash-link" href="#important-dates">#</a></h2>
|
||||
<ul>
|
||||
<li>Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full</li>
|
||||
<li>Friday, January 9, 2015: Award recipients will be notified by email of their acceptance</li>
|
||||
<li>Wednesday & Thursday, January 28 & 29, 2015: React.js Conf</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="eligibility"></a>Eligibility <a class="hash-link" href="#eligibility">#</a></h2>
|
||||
<ul>
|
||||
<li>Must currently be studying or working in Computer Science or a related field</li>
|
||||
<li>International applicants are welcome, but you will be responsible for securing your own visa to attend the conference</li>
|
||||
<li>You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a></h1>
|
||||
<p class="meta">December 18, 2014 by Paul O’Shannessy</p>
|
||||
@@ -377,24 +418,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.12.0.mi
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/27/react-js-conf.html">React.js Conf</a></h1>
|
||||
<p class="meta">October 27, 2014 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.</p>
|
||||
|
||||
<p><strong>We're happy to announce <a href="http://conf.reactjs.com/">React.js Conf</a>! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.</strong></p>
|
||||
|
||||
<p>Before we open registration, <a href="http://conf.reactjs.com/call-for-presenters.html">we're looking for great talks</a>. We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!</p>
|
||||
|
||||
<p>Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...</p>
|
||||
|
||||
<p>We look forward to seeing many of you in person in just a few short months!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+20
-58
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,24 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/27/react-js-conf.html">React.js Conf</a></h1>
|
||||
<p class="meta">October 27, 2014 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.</p>
|
||||
|
||||
<p><strong>We're happy to announce <a href="http://conf.reactjs.com/">React.js Conf</a>! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.</strong></p>
|
||||
|
||||
<p>Before we open registration, <a href="http://conf.reactjs.com/call-for-presenters.html">we're looking for great talks</a>. We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!</p>
|
||||
|
||||
<p>Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...</p>
|
||||
|
||||
<p>We look forward to seeing many of you in person in just a few short months!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/10/17/community-roundup-23.html">Community Round-up #23</a></h1>
|
||||
<p class="meta">October 17, 2014 by Lou Husson</p>
|
||||
@@ -747,62 +765,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.12.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/16/react-v0.11.2.html">React v0.11.2</a></h1>
|
||||
<p class="meta">September 16, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing React v0.11.2 to add a few small features.</p>
|
||||
|
||||
<p>We're adding support for two more DOM elements, <code><dialog></code> and <code><picture></code>, as well as the associated attributes needed to use these elements: <code>open</code>, <code>media</code>, and <code>sizes</code>. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.</p>
|
||||
|
||||
<p>We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing <code>React.createDescriptor</code> with <code>React.createElement</code>. <code>createDescriptor</code> will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.</p>
|
||||
|
||||
<p>And lastly, on the heels of announcing Flow at <a href="http://atscaleconference.com/">@Scale</a> yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the <code>jsx</code> transform. To use, simply use the <code>--strip-types</code> flag on the command line, or set <code>stripTypes</code> in the <code>options</code> object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.11.2.js">http://fb.me/react-0.11.2.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.2.min.js">http://fb.me/react-0.11.2.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.2.js">http://fb.me/react-with-addons-0.11.2.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.2.min.js">http://fb.me/react-with-addons-0.11.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.2.js">http://fb.me/JSXTransformer-0.11.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.2</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>
|
||||
<h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added support for <code><dialog></code> element and associated <code>open</code> attribute</li>
|
||||
<li>Added support for <code><picture></code> element and associated <code>media</code> and <code>sizes</code> attributes</li>
|
||||
<li>Added <code>React.createElement</code> API in preparation for React v0.12
|
||||
|
||||
<ul>
|
||||
<li><code>React.createDescriptor</code> has been deprecated as a result</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li><code><picture></code> is now parsed into <code>React.DOM.picture</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Update <code>esprima</code> and <code>jstransform</code> for correctness fixes</li>
|
||||
<li>The <code>jsx</code> executable now exposes a <code>--strip-types</code> flag which can be used to remove TypeScript-like type annotations
|
||||
|
||||
<ul>
|
||||
<li>This option is also exposed to <code>require('react-tools').transform</code> as <code>stripTypes</code></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+58
-89
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,62 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/16/react-v0.11.2.html">React v0.11.2</a></h1>
|
||||
<p class="meta">September 16, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing React v0.11.2 to add a few small features.</p>
|
||||
|
||||
<p>We're adding support for two more DOM elements, <code><dialog></code> and <code><picture></code>, as well as the associated attributes needed to use these elements: <code>open</code>, <code>media</code>, and <code>sizes</code>. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.</p>
|
||||
|
||||
<p>We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing <code>React.createDescriptor</code> with <code>React.createElement</code>. <code>createDescriptor</code> will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.</p>
|
||||
|
||||
<p>And lastly, on the heels of announcing Flow at <a href="http://atscaleconference.com/">@Scale</a> yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the <code>jsx</code> transform. To use, simply use the <code>--strip-types</code> flag on the command line, or set <code>stripTypes</code> in the <code>options</code> object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.</p>
|
||||
|
||||
<p>The release is available for download from the CDN:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>React</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-0.11.2.js">http://fb.me/react-0.11.2.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.11.2.min.js">http://fb.me/react-0.11.2.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.2.js">http://fb.me/react-with-addons-0.11.2.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.11.2.min.js">http://fb.me/react-with-addons-0.11.2.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.11.2.js">http://fb.me/JSXTransformer-0.11.2.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.11.2</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>
|
||||
<h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added support for <code><dialog></code> element and associated <code>open</code> attribute</li>
|
||||
<li>Added support for <code><picture></code> element and associated <code>media</code> and <code>sizes</code> attributes</li>
|
||||
<li>Added <code>React.createElement</code> API in preparation for React v0.12
|
||||
|
||||
<ul>
|
||||
<li><code>React.createDescriptor</code> has been deprecated as a result</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li><code><picture></code> is now parsed into <code>React.DOM.picture</code></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Update <code>esprima</code> and <code>jstransform</code> for correctness fixes</li>
|
||||
<li>The <code>jsx</code> executable now exposes a <code>--strip-types</code> flag which can be used to remove TypeScript-like type annotations
|
||||
|
||||
<ul>
|
||||
<li>This option is also exposed to <code>require('react-tools').transform</code> as <code>stripTypes</code></li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/09/12/community-round-up-22.html">Community Round-up #22</a></h1>
|
||||
<p class="meta">September 12, 2014 by Lou Husson</p>
|
||||
@@ -317,93 +373,6 @@ This is not the intended way to use React but can be useful as last resort if yo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/28/community-roundup-20.html">Community Round-up #20</a></h1>
|
||||
<p class="meta">July 28, 2014 by Lou Husson</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)</p>
|
||||
<h2><a class="anchor" name="atom-moves-to-react"></a>Atom moves to React <a class="hash-link" href="#atom-moves-to-react">#</a></h2>
|
||||
<p><a href="http://blog.atom.io/2014/07/02/moving-atom-to-react.html">Atom, GitHub's code editor, is now using React</a> to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.</p>
|
||||
|
||||
<p><a href="http://blog.atom.io/2014/07/02/moving-atom-to-react.html"><img src="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" /></a></p>
|
||||
<h2><a class="anchor" name="why-does-react-scale"></a>Why Does React Scale? <a class="hash-link" href="#why-does-react-scale">#</a></h2>
|
||||
<p>At the last <a href="http://2014.jsconf.us/">JSConf.us</a>, Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the <a href="https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014">annotated slides</a>.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="live-editing"></a>Live Editing <a class="hash-link" href="#live-editing">#</a></h2>
|
||||
<p>One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... <a href="https://twitter.com/dan_abramov">Dan Abramov</a> got hot code reloading working with webpack in order to <a href="http://gaearon.github.io/react-hot-loader/">live edit a React project</a>!</p>
|
||||
|
||||
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="reactintl-mixin-by-yahoo"></a>ReactIntl Mixin by Yahoo <a class="hash-link" href="#reactintl-mixin-by-yahoo">#</a></h2>
|
||||
<p>There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It's great to see them getting excited about React and contributing back to the community.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactIntlMixin</span><span class="p">],</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">intlDate</span><span class="p">(</span><span class="mi">1390518044403</span><span class="p">,</span> <span class="p">{</span> <span class="nx">hour</span><span class="o">:</span> <span class="s1">'numeric'</span><span class="p">,</span> <span class="nx">minute</span><span class="o">:</span> <span class="s1">'numeric'</span> <span class="p">})}</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">intlNumber</span><span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="p">{</span> <span class="nx">style</span><span class="o">:</span> <span class="s1">'percent'</span> <span class="p">})}</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">MyComponent</span> <span class="nx">locales</span><span class="o">=</span><span class="p">{[</span><span class="s1">'fr-FR'</span><span class="p">]}</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="thinking-and-learning-react"></a>Thinking and Learning React <a class="hash-link" href="#thinking-and-learning-react">#</a></h2>
|
||||
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.</p>
|
||||
<h2><a class="anchor" name="london-react-meetup"></a>London React Meetup <a class="hash-link" href="#london-react-meetup">#</a></h2>
|
||||
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content.</p>
|
||||
|
||||
<ul>
|
||||
<li>What's new in React 0.11 and how to improve performance by guaranteeing immutability</li>
|
||||
<li>State handling in React with Morearty.JS</li>
|
||||
<li>React on Rails - How to use React with Ruby on Rails to build isomorphic apps</li>
|
||||
<li>Building an isomorphic, real-time to-do list with moped and node.js</li>
|
||||
</ul>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>In related news, the next <a href="http://www.meetup.com/ReactJS-San-Francisco/events/195518392/">React SF Meetup</a> will be from Prezi: <a href="https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135">“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”</a>. While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.</p>
|
||||
<h2><a class="anchor" name="using-react-and-kendoui-together"></a>Using React and KendoUI Together <a class="hash-link" href="#using-react-and-kendoui-together">#</a></h2>
|
||||
<p>One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write <a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/">React component adapters for KendoUI</a>.</p>
|
||||
|
||||
<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/react/img/blog/kendoui.png" /></a></figure>
|
||||
<h2><a class="anchor" name="acorn-jsx"></a>Acorn JSX <a class="hash-link" href="#acorn-jsx">#</a></h2>
|
||||
<p>Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a <a href="https://github.com/RReverser/acorn-jsx">JSX parser</a> that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!</p>
|
||||
<h2><a class="anchor" name="reactscriptloader"></a>ReactScriptLoader <a class="hash-link" href="#reactscriptloader">#</a></h2>
|
||||
<p>Yariv Sadan created <a href="https://github.com/yariv/ReactScriptLoader">ReactScriptLoader</a> to make it easier to write components that require an external script.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactScriptLoaderMixin</span><span class="p">],</span>
|
||||
<span class="nx">getScriptURL</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="s1">'http://d3js.org/d3.v3.min.js'</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onScriptLoaded</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onScriptError</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</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="kd">var</span> <span class="nx">message</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">scriptLoading</span> <span class="o">?</span> <span class="s1">'Loading script...'</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">scriptLoadError</span> <span class="o">?</span> <span class="s1">'Loading failed'</span> <span class="o">:</span>
|
||||
<span class="s1">'Loading succeeded'</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="nx">message</span><span class="p">}</span><span class="o"><</span><span class="err">/span>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>— Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+89
-20
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,93 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/28/community-roundup-20.html">Community Round-up #20</a></h1>
|
||||
<p class="meta">July 28, 2014 by Lou Husson</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)</p>
|
||||
<h2><a class="anchor" name="atom-moves-to-react"></a>Atom moves to React <a class="hash-link" href="#atom-moves-to-react">#</a></h2>
|
||||
<p><a href="http://blog.atom.io/2014/07/02/moving-atom-to-react.html">Atom, GitHub's code editor, is now using React</a> to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.</p>
|
||||
|
||||
<p><a href="http://blog.atom.io/2014/07/02/moving-atom-to-react.html"><img src="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" /></a></p>
|
||||
<h2><a class="anchor" name="why-does-react-scale"></a>Why Does React Scale? <a class="hash-link" href="#why-does-react-scale">#</a></h2>
|
||||
<p>At the last <a href="http://2014.jsconf.us/">JSConf.us</a>, Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the <a href="https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014">annotated slides</a>.</p>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="live-editing"></a>Live Editing <a class="hash-link" href="#live-editing">#</a></h2>
|
||||
<p>One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... <a href="https://twitter.com/dan_abramov">Dan Abramov</a> got hot code reloading working with webpack in order to <a href="http://gaearon.github.io/react-hot-loader/">live edit a React project</a>!</p>
|
||||
|
||||
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="reactintl-mixin-by-yahoo"></a>ReactIntl Mixin by Yahoo <a class="hash-link" href="#reactintl-mixin-by-yahoo">#</a></h2>
|
||||
<p>There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It's great to see them getting excited about React and contributing back to the community.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactIntlMixin</span><span class="p">],</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">intlDate</span><span class="p">(</span><span class="mi">1390518044403</span><span class="p">,</span> <span class="p">{</span> <span class="nx">hour</span><span class="o">:</span> <span class="s1">'numeric'</span><span class="p">,</span> <span class="nx">minute</span><span class="o">:</span> <span class="s1">'numeric'</span> <span class="p">})}</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">intlNumber</span><span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="p">{</span> <span class="nx">style</span><span class="o">:</span> <span class="s1">'percent'</span> <span class="p">})}</span><span class="o"><</span><span class="err">/p></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">MyComponent</span> <span class="nx">locales</span><span class="o">=</span><span class="p">{[</span><span class="s1">'fr-FR'</span><span class="p">]}</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div><h2><a class="anchor" name="thinking-and-learning-react"></a>Thinking and Learning React <a class="hash-link" href="#thinking-and-learning-react">#</a></h2>
|
||||
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.</p>
|
||||
<h2><a class="anchor" name="london-react-meetup"></a>London React Meetup <a class="hash-link" href="#london-react-meetup">#</a></h2>
|
||||
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content.</p>
|
||||
|
||||
<ul>
|
||||
<li>What's new in React 0.11 and how to improve performance by guaranteeing immutability</li>
|
||||
<li>State handling in React with Morearty.JS</li>
|
||||
<li>React on Rails - How to use React with Ruby on Rails to build isomorphic apps</li>
|
||||
<li>Building an isomorphic, real-time to-do list with moped and node.js</li>
|
||||
</ul>
|
||||
|
||||
<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<p>In related news, the next <a href="http://www.meetup.com/ReactJS-San-Francisco/events/195518392/">React SF Meetup</a> will be from Prezi: <a href="https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135">“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”</a>. While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.</p>
|
||||
<h2><a class="anchor" name="using-react-and-kendoui-together"></a>Using React and KendoUI Together <a class="hash-link" href="#using-react-and-kendoui-together">#</a></h2>
|
||||
<p>One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write <a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/">React component adapters for KendoUI</a>.</p>
|
||||
|
||||
<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="/react/img/blog/kendoui.png" /></a></figure>
|
||||
<h2><a class="anchor" name="acorn-jsx"></a>Acorn JSX <a class="hash-link" href="#acorn-jsx">#</a></h2>
|
||||
<p>Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a <a href="https://github.com/RReverser/acorn-jsx">JSX parser</a> that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!</p>
|
||||
<h2><a class="anchor" name="reactscriptloader"></a>ReactScriptLoader <a class="hash-link" href="#reactscriptloader">#</a></h2>
|
||||
<p>Yariv Sadan created <a href="https://github.com/yariv/ReactScriptLoader">ReactScriptLoader</a> to make it easier to write components that require an external script.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactScriptLoaderMixin</span><span class="p">],</span>
|
||||
<span class="nx">getScriptURL</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="s1">'http://d3js.org/d3.v3.min.js'</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span> <span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">false</span> <span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onScriptLoaded</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">onScriptError</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</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="kd">var</span> <span class="nx">message</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">scriptLoading</span> <span class="o">?</span> <span class="s1">'Loading script...'</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">scriptLoadError</span> <span class="o">?</span> <span class="s1">'Loading failed'</span> <span class="o">:</span>
|
||||
<span class="s1">'Loading succeeded'</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="nx">message</span><span class="p">}</span><span class="o"><</span><span class="err">/span>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>— Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/07/25/react-v0.11.1.html">React v0.11.1</a></h1>
|
||||
<p class="meta">July 25, 2014 by Paul O’Shannessy</p>
|
||||
@@ -473,24 +560,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a></h1>
|
||||
<p class="meta">May 29, 2014 by Cheng Lou</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today marks the one-year open-source anniversary of React.</p>
|
||||
|
||||
<p>It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The <a href="http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html">roadmap</a> gives a glimpse into the future of the library; exciting stuff lies ahead!</p>
|
||||
|
||||
<p>Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was <a href="http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/">similarly skeptical</a>. It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. <a href="http://facebook.github.io/react/docs/jsx-in-depth.html">JSX</a>, in particular, filtered out a huge chunk of potential early adopters.</p>
|
||||
|
||||
<p>Fast forward one year, React has strongly <a href="https://news.ycombinator.com/item?id=7489959">grown in popularity</a>. Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the <a href="https://github.com/facebook/react/graphs/contributors">individual contributors</a> who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.</p>
|
||||
|
||||
<p>Here’s to another year!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+20
-76
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,24 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a></h1>
|
||||
<p class="meta">May 29, 2014 by Cheng Lou</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today marks the one-year open-source anniversary of React.</p>
|
||||
|
||||
<p>It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The <a href="http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html">roadmap</a> gives a glimpse into the future of the library; exciting stuff lies ahead!</p>
|
||||
|
||||
<p>Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was <a href="http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/">similarly skeptical</a>. It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. <a href="http://facebook.github.io/react/docs/jsx-in-depth.html">JSX</a>, in particular, filtered out a huge chunk of potential early adopters.</p>
|
||||
|
||||
<p>Fast forward one year, React has strongly <a href="https://news.ycombinator.com/item?id=7489959">grown in popularity</a>. Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the <a href="https://github.com/facebook/react/graphs/contributors">individual contributors</a> who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.</p>
|
||||
|
||||
<p>Here’s to another year!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/05/06/flux.html">Flux: An Application Architecture for React</a></h1>
|
||||
<p class="meta">May 6, 2014 by Bill Fisher and Jing Chen</p>
|
||||
@@ -239,80 +257,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.mi
|
||||
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>srcSet</code> for <code><img></code> to specify images at different pixel ratios</li>
|
||||
<li><code>textAnchor</code> for SVG</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
|
||||
<li>Ensure <code>className={false}</code> behaves consistently</li>
|
||||
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></h1>
|
||||
<p class="meta">March 19, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html">v0.9 has only been out for a month</a>, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.</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.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.10.0-rc1.js">http://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.10.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
|
||||
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
|
||||
|
||||
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
|
||||
|
||||
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
|
||||
<span class="c1">// "descriptor", not necessarily the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
|
||||
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
|
||||
<span class="c1">// the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">)</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
</code></pre></div>
|
||||
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
|
||||
|
||||
<p>The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added warnings to help migrate towards descriptors</li>
|
||||
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>srcSet</code> for <code><img></code> to specify images at different pixel ratios</li>
|
||||
<li><code>textAnchor</code> for SVG</li>
|
||||
|
||||
+76
-69
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,80 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></h1>
|
||||
<p class="meta">March 19, 2014 by Paul O’Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p><a href="http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html">v0.9 has only been out for a month</a>, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.</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.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a><br></li>
|
||||
<li><strong>React with Add-Ons</strong><br>
|
||||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
|
||||
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
|
||||
<li><strong>In-Browser JSX transformer</strong><br>
|
||||
<a href="http://fb.me/JSXTransformer-0.10.0-rc1.js">http://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
|
||||
</ul>
|
||||
|
||||
<p>We've also published version <code>0.10.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||||
|
||||
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
|
||||
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
|
||||
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
|
||||
|
||||
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
|
||||
|
||||
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
|
||||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
|
||||
<span class="c1">// "descriptor", not necessarily the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
|
||||
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
|
||||
<span class="c1">// the mounted instance.</span>
|
||||
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">MyComponent</span><span class="o">/></span><span class="p">)</span>
|
||||
<span class="c1">// ...</span>
|
||||
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
|
||||
</code></pre></div>
|
||||
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
|
||||
|
||||
<p>The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||||
<ul>
|
||||
<li>Added warnings to help migrate towards descriptors</li>
|
||||
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
|
||||
<li>Added support for more attributes:
|
||||
|
||||
<ul>
|
||||
<li><code>srcSet</code> for <code><img></code> to specify images at different pixel ratios</li>
|
||||
<li><code>textAnchor</code> for SVG</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||||
<ul>
|
||||
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
|
||||
<li>Ensure <code>className={false}</code> behaves consistently</li>
|
||||
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
|
||||
<ul>
|
||||
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||||
<ul>
|
||||
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></h1>
|
||||
<p class="meta">March 14, 2014 by Jonas Gebhardt</p>
|
||||
@@ -489,73 +563,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
|
||||
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.</p>
|
||||
<h2><a class="anchor" name="react-in-a-nutshell"></a>React in a nutshell <a class="hash-link" href="#react-in-a-nutshell">#</a></h2>
|
||||
<p>Got five minutes to pitch React to your coworkers? John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) put together <a href="http://slid.es/johnlynch/reactjs">this excellent and refreshing slideshow</a>:</p>
|
||||
|
||||
<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="reacts-diff-algorithm"></a>React's diff algorithm <a class="hash-link" href="#reacts-diff-algorithm">#</a></h2>
|
||||
<p>React core team member Christopher Chedeau (<a href="https://twitter.com/vjeux">@vjeux</a>) explores the innards of React's tree diffing algorithm in this <a href="http://calendar.perfplanet.com/2013/diff/">extensive and well-illustrated post</a>. <figure><a href="http://calendar.perfplanet.com/2013/diff/"><img src="/react/img/blog/react-diff-tree.png" alt=""></a></figure></p>
|
||||
|
||||
<p>While we're talking about tree diffing: Matt Esch (<a href="https://twitter.com/MatthewEsch">@MatthewEsch</a>) created <a href="https://github.com/Matt-Esch/virtual-dom">this project</a>, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.</p>
|
||||
<h2><a class="anchor" name="many-many-new-introductions-to-react"></a>Many, many new introductions to React! <a class="hash-link" href="#many-many-new-introductions-to-react">#</a></h2>
|
||||
<p>James Padosley wrote a short post on the basics (and merits) of React: <a href="http://james.padolsey.com/javascript/what-is-react/">What is React?</a></p>
|
||||
|
||||
<blockquote>
|
||||
<p>What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.</p>
|
||||
|
||||
<p><a href="http://james.padolsey.com/javascript/what-is-react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Taylor Lapeyre (<a href="https://twitter.com/taylorlapeyre">@taylorlapeyre</a>) wrote another nice <a href="http://words.taylorlapeyre.me/an-introduction-to-react">introduction to React</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.</p>
|
||||
|
||||
<p><a href="http://words.taylorlapeyre.me/an-introduction-to-react">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p><a href="http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs">This "Deep explanation for newbies"</a> by <a href="https://twitter.com/ProJavaScript">@ProJavaScript</a> explains how to get started building a React game without using the optional JSX syntax.</p>
|
||||
<h3><a class="anchor" name="react-around-the-world"></a>React around the world <a class="hash-link" href="#react-around-the-world">#</a></h3>
|
||||
<p>It's great to see the React community expand internationally. <a href="http://habrahabr.ru/post/189230/">This site</a> features a React introduction in Russian.</p>
|
||||
<h3><a class="anchor" name="react-tutorial-series"></a>React tutorial series <a class="hash-link" href="#react-tutorial-series">#</a></h3>
|
||||
<p><a href="https://medium.com/@followchrisp">Christopher Pitt</a> explains <a href="https://medium.com/react-tutorials/828c397e3dc8">React Components</a> and <a href="https://medium.com/react-tutorials/ef11cd55caa0">React Properties</a>. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the <a href="https://medium.com/react-tutorials">other posts in his React Tutorial series</a>, e.g. on using <a href="https://medium.com/react-tutorials/8aaec65a546c">React + Backbone Model</a> and <a href="https://medium.com/react-tutorials/c00be0cf1592">React + Backbone Router</a>.</p>
|
||||
<h3><a class="anchor" name="beginner-tutorial-implementing-the-board-game-go"></a>Beginner tutorial: Implementing the board game Go <a class="hash-link" href="#beginner-tutorial-implementing-the-board-game-go">#</a></h3>
|
||||
<p><a href="http://cjlarose.com/">Chris LaRose</a> walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his <a href="http://cjlarose.com/2014/01/09/react-board-game-tutorial.html">tutorial</a> or go straight to the <a href="https://github.com/cjlarose/react-go">code</a>.</p>
|
||||
<h3><a class="anchor" name="egghead.io-video-tutorials"></a>Egghead.io video tutorials <a class="hash-link" href="#egghead.io-video-tutorials">#</a></h3>
|
||||
<p>Joe Maddalone (<a href="https://twitter.com/joemaddalone">@joemaddalone</a>) of <a href="https://egghead.io/">egghead.io</a> created a series of React video tutorials, such as <a href="http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a">this</a> introduction to React Components. [<a href="http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a">part 1</a>], [<a href="http://www.youtube.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
|
||||
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>"React: Finally, a great server/client web stack" <a class="hash-link" href="#react-finally-a-great-serverclient-web-stack">#</a></h3>
|
||||
<p>Eric Florenzano (<a href="https://twitter.com/ericflo">@ericflo</a>) sheds some light on what makes React perfect for server rendering:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>[...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]</p>
|
||||
|
||||
<p>What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.</p>
|
||||
|
||||
<p><a href="http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="building-a-complex-react-component"></a>Building a complex React component <a class="hash-link" href="#building-a-complex-react-component">#</a></h2>
|
||||
<p><a href="http://matt-harrison.com/">Matt Harrison</a> walks through the process of <a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/">creating an SVG-based Resistance Calculator</a> using React. <figure><a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/"><img src="/react/img/blog/resistance-calculator.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>— Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>— andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>— julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
|
||||
</p>— Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+69
-84
@@ -63,6 +63,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html">Building The Facebook News Feed With Relay</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2015/03/10/react-v0.13.html">React v0.13</a></li>
|
||||
@@ -81,8 +83,6 @@
|
||||
|
||||
<li><a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -90,6 +90,73 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
|
||||
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.</p>
|
||||
<h2><a class="anchor" name="react-in-a-nutshell"></a>React in a nutshell <a class="hash-link" href="#react-in-a-nutshell">#</a></h2>
|
||||
<p>Got five minutes to pitch React to your coworkers? John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) put together <a href="http://slid.es/johnlynch/reactjs">this excellent and refreshing slideshow</a>:</p>
|
||||
|
||||
<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<h2><a class="anchor" name="reacts-diff-algorithm"></a>React's diff algorithm <a class="hash-link" href="#reacts-diff-algorithm">#</a></h2>
|
||||
<p>React core team member Christopher Chedeau (<a href="https://twitter.com/vjeux">@vjeux</a>) explores the innards of React's tree diffing algorithm in this <a href="http://calendar.perfplanet.com/2013/diff/">extensive and well-illustrated post</a>. <figure><a href="http://calendar.perfplanet.com/2013/diff/"><img src="/react/img/blog/react-diff-tree.png" alt=""></a></figure></p>
|
||||
|
||||
<p>While we're talking about tree diffing: Matt Esch (<a href="https://twitter.com/MatthewEsch">@MatthewEsch</a>) created <a href="https://github.com/Matt-Esch/virtual-dom">this project</a>, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.</p>
|
||||
<h2><a class="anchor" name="many-many-new-introductions-to-react"></a>Many, many new introductions to React! <a class="hash-link" href="#many-many-new-introductions-to-react">#</a></h2>
|
||||
<p>James Padosley wrote a short post on the basics (and merits) of React: <a href="http://james.padolsey.com/javascript/what-is-react/">What is React?</a></p>
|
||||
|
||||
<blockquote>
|
||||
<p>What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.</p>
|
||||
|
||||
<p><a href="http://james.padolsey.com/javascript/what-is-react/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>Taylor Lapeyre (<a href="https://twitter.com/taylorlapeyre">@taylorlapeyre</a>) wrote another nice <a href="http://words.taylorlapeyre.me/an-introduction-to-react">introduction to React</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.</p>
|
||||
|
||||
<p><a href="http://words.taylorlapeyre.me/an-introduction-to-react">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p><a href="http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs">This "Deep explanation for newbies"</a> by <a href="https://twitter.com/ProJavaScript">@ProJavaScript</a> explains how to get started building a React game without using the optional JSX syntax.</p>
|
||||
<h3><a class="anchor" name="react-around-the-world"></a>React around the world <a class="hash-link" href="#react-around-the-world">#</a></h3>
|
||||
<p>It's great to see the React community expand internationally. <a href="http://habrahabr.ru/post/189230/">This site</a> features a React introduction in Russian.</p>
|
||||
<h3><a class="anchor" name="react-tutorial-series"></a>React tutorial series <a class="hash-link" href="#react-tutorial-series">#</a></h3>
|
||||
<p><a href="https://medium.com/@followchrisp">Christopher Pitt</a> explains <a href="https://medium.com/react-tutorials/828c397e3dc8">React Components</a> and <a href="https://medium.com/react-tutorials/ef11cd55caa0">React Properties</a>. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the <a href="https://medium.com/react-tutorials">other posts in his React Tutorial series</a>, e.g. on using <a href="https://medium.com/react-tutorials/8aaec65a546c">React + Backbone Model</a> and <a href="https://medium.com/react-tutorials/c00be0cf1592">React + Backbone Router</a>.</p>
|
||||
<h3><a class="anchor" name="beginner-tutorial-implementing-the-board-game-go"></a>Beginner tutorial: Implementing the board game Go <a class="hash-link" href="#beginner-tutorial-implementing-the-board-game-go">#</a></h3>
|
||||
<p><a href="http://cjlarose.com/">Chris LaRose</a> walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his <a href="http://cjlarose.com/2014/01/09/react-board-game-tutorial.html">tutorial</a> or go straight to the <a href="https://github.com/cjlarose/react-go">code</a>.</p>
|
||||
<h3><a class="anchor" name="egghead.io-video-tutorials"></a>Egghead.io video tutorials <a class="hash-link" href="#egghead.io-video-tutorials">#</a></h3>
|
||||
<p>Joe Maddalone (<a href="https://twitter.com/joemaddalone">@joemaddalone</a>) of <a href="https://egghead.io/">egghead.io</a> created a series of React video tutorials, such as <a href="http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a">this</a> introduction to React Components. [<a href="http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a">part 1</a>], [<a href="http://www.youtube.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
|
||||
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>"React: Finally, a great server/client web stack" <a class="hash-link" href="#react-finally-a-great-serverclient-web-stack">#</a></h3>
|
||||
<p>Eric Florenzano (<a href="https://twitter.com/ericflo">@ericflo</a>) sheds some light on what makes React perfect for server rendering:</p>
|
||||
|
||||
<blockquote>
|
||||
<p>[...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]</p>
|
||||
|
||||
<p>What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.</p>
|
||||
|
||||
<p><a href="http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="building-a-complex-react-component"></a>Building a complex React component <a class="hash-link" href="#building-a-complex-react-component">#</a></h2>
|
||||
<p><a href="http://matt-harrison.com/">Matt Harrison</a> walks through the process of <a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/">creating an SVG-based Resistance Calculator</a> using React. <figure><a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/"><img src="/react/img/blog/resistance-calculator.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>— Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>— andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>— julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
|
||||
|
||||
<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
|
||||
</p>— Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></h1>
|
||||
<p class="meta">February 5, 2014 by Jonas Gebhardt</p>
|
||||
@@ -394,88 +461,6 @@ rails s
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
|
||||
<p class="meta">December 23, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href="/react/docs/getting-started.html">docs</a> and do not hesitate to ask questions on the <a href="http://groups.google.com/group/reactjs">Google Group</a>, <a href="irc://chat.freenode.net/reactjs">IRC</a> or <a href="http://stackoverflow.com/questions/tagged/reactjs">Stack Overflow</a>. We are trying our best to help you out!</p>
|
||||
<h2><a class="anchor" name="the-future-of-javascript-mvc"></a>The Future of Javascript MVC <a class="hash-link" href="#the-future-of-javascript-mvc">#</a></h2>
|
||||
<p><a href="http://swannodette.github.io/">David Nolen</a> announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient <a href="http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.</p>
|
||||
|
||||
<p>Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?</p>
|
||||
|
||||
<p>A whole lot.
|
||||
<figure><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/react/img/blog/om-backbone.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="scroll-position-with-react"></a>Scroll Position with React <a class="hash-link" href="#scroll-position-with-react">#</a></h2>
|
||||
<p>Managing the scroll position when new content is inserted is usually very tricky to get right. <a href="http://blog.vjeux.com/">Vjeux</a> discovered that <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate">componentDidUpdate</a> were triggered exactly at the right time to manage the scroll position.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">componentWillUpdate: function() {
|
||||
var node = this.getDOMNode();
|
||||
this.shouldScrollBottom =
|
||||
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
|
||||
},
|
||||
componentDidUpdate: function() {
|
||||
if (this.shouldScrollBottom) {
|
||||
var node = this.getDOMNode();
|
||||
node.scrollTop = node.scrollHeight
|
||||
}
|
||||
},
|
||||
</code></pre></div>
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html">Check out the blog article...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="lights-out"></a>Lights Out <a class="hash-link" href="#lights-out">#</a></h2>
|
||||
<p>React declarative approach is well suited to write games. <a href="https://github.com/chenglou">Cheng Lou</a> wrote the famous Lights Out game in React. It's a good example of use of <a href="http://facebook.github.io/react/docs/animation.html">TransitionGroup</a> to implement animations.
|
||||
<figure><a href="http://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://chenglou.github.io/react-lights-out/">Try it out!</a></p>
|
||||
<h2><a class="anchor" name="reactive-table-bookmarklet"></a>Reactive Table Bookmarklet <a class="hash-link" href="#reactive-table-bookmarklet">#</a></h2>
|
||||
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
|
||||
<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="/react/img/blog/reactive-bookmarklet.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://www.phpied.com/reactivetable-bookmarklet/">Check out the blog post...</a></p>
|
||||
<h2><a class="anchor" name="montagejs-tutorial-in-react"></a>MontageJS Tutorial in React <a class="hash-link" href="#montagejs-tutorial-in-react">#</a></h2>
|
||||
<p><a href="https://twitter.com/ssorallen">Ross Allen</a> implemented <a href="http://montagejs.org/">MontageJS</a>'s <a href="http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html">Reddit tutorial</a> in React. This is a good opportunity to compare the philosophies of the two libraries.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p><a href="http://jsfiddle.net/ssorallen/fEsYt/">View the source on JSFiddle...</a></p>
|
||||
<h2><a class="anchor" name="writing-good-react-components"></a>Writing Good React Components <a class="hash-link" href="#writing-good-react-components">#</a></h2>
|
||||
<p><a href="http://blog.whn.se/">William Högman Rudenmalm</a> wrote an article on how to write good React components. This is full of good advice.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.</p>
|
||||
|
||||
<p>The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.</p>
|
||||
|
||||
<p>You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.</p>
|
||||
|
||||
<p><a href="http://blog.whn.se/post/69621609605/writing-good-react-components">Read the full article ...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
|
||||
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/hoodiehq/hoodie-react-todomvc">Check out on GitHub...</a></p>
|
||||
<h2><a class="anchor" name="jsx-compiler"></a>JSX Compiler <a class="hash-link" href="#jsx-compiler">#</a></h2>
|
||||
<p>Ever wanted to have a quick way to see what a JSX tag would be converted to? <a href="http://www.yungsters.com/">Tim Yung</a> made a page for it.
|
||||
<figure><a href="http://facebook.github.io/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://facebook.github.io/react/jsx-compiler.html">Try it out!</a></p>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<p><center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn't force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -6,6 +6,198 @@
|
||||
<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>Building The Facebook News Feed With Relay</title>
|
||||
<description><p>At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we&#39;ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven&#39;t already we recommend reading <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube.com/watch?v=9sc8Pyc51uU">the conference talk</a>.</p>
|
||||
|
||||
<p>We&#39;re working hard to prepare GraphQL and Relay for public release. In the meantime, we&#39;ll continue to provide information about what you can expect.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-relay-architecture"></a>The Relay Architecture <a class="hash-link" href="#the-relay-architecture">#</a></h2>
|
||||
<p>The diagram below shows the main parts of the Relay architecture on the client and the server:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" /></p>
|
||||
|
||||
<p>The main pieces are as follows:</p>
|
||||
|
||||
<ul>
|
||||
<li>Relay Components: React components annotated with declarative data descriptions.</li>
|
||||
<li>Actions: Descriptions of how data should change in response to user actions.</li>
|
||||
<li>Relay Store: A client-side data store that is fully managed by the framework.</li>
|
||||
<li>Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.</li>
|
||||
</ul>
|
||||
|
||||
<p>This post will focus on <strong>Relay components</strong> that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="a-relay-application"></a>A Relay Application <a class="hash-link" href="#a-relay-application">#</a></h2>
|
||||
<p>To see how components work and can be composed, let&#39;s implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <code>&lt;NewsFeed&gt;</code> that renders a list of <code>&lt;Story&gt;</code> items. We&#39;ll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="the-ltstorygt-begins"></a>The <code>&lt;Story&gt;</code> Begins <a class="hash-link" href="#the-ltstorygt-begins">#</a></h2>
|
||||
<p>The first step is a React <code>&lt;Story&gt;</code> component that accepts a <code>story</code> prop with the story&#39;s text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="kd">var</span> <span class="nx">story</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">View</span><span class="o">&gt;</span>
|
||||
<span class="o">&lt;</span><span class="nx">Image</span> <span class="nx">uri</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">profile_picture</span><span class="p">.</span><span class="nx">uri</span><span class="p">}</span> <span class="o">/&gt;</span>
|
||||
<span class="o">&lt;</span><span class="nx">Text</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
|
||||
<span class="o">&lt;</span><span class="nx">Text</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
|
||||
<span class="o">&lt;</span><span class="err">/View&gt;</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Story</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="whats-the-ltstorygt"></a>What&#39;s the <code>&lt;Story&gt;</code>? <a class="hash-link" href="#whats-the-ltstorygt">#</a></h2>
|
||||
<p>Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="cm">/* TODO */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Before adding the GraphQL query, let&#39;s look at the component hierarchy this creates:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" /></p>
|
||||
|
||||
<p>Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we&#39;ll add a GraphQL query for <code>story</code>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">Story</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">story</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Story</span> <span class="p">{</span>
|
||||
<span class="nx">author</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Queries use ES6 template literals tagged with the <code>graphql</code> function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query&#39;s structure closely matches the object structure that we expected in <code>&lt;Story&gt;</code>&#39;s render function.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltstorygts-on-demand"></a><code>&lt;Story&gt;</code>s on Demand <a class="hash-link" href="#ltstorygts-on-demand">#</a></h2>
|
||||
<p>We can render a Relay component by providing Relay with the component (<code>&lt;Story&gt;</code>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then <code>render()</code> the component. The value of <code>props.story</code> will be a plain JavaScript object such as the following:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||||
<span class="nx">author</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Greg&quot;</span><span class="p">,</span>
|
||||
<span class="nx">profile_picture</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">uri</span><span class="o">:</span> <span class="s2">&quot;https://…&quot;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;The first Relay blog post is up…&quot;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Relay guarantees that all data required to render a component will be available before it is rendered. This means that <code>&lt;Story&gt;</code> does not need to handle a loading state; the <code>story</code> is <em>guaranteed</em> to be available before <code>render()</code> is called. We have found that this invariant simplifies our application code <em>and</em> improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.</p>
|
||||
|
||||
<p>The diagram below shows how Relay containers make data available to our React components:</p>
|
||||
|
||||
<p><img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" /></p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="ltnewsfeedgt-worthy"></a><code>&lt;NewsFeed&gt;</code> Worthy <a class="hash-link" href="#ltnewsfeedgt-worthy">#</a></h2>
|
||||
<p>Now that the <code>&lt;Story&gt;</code> is over we can continue with the <code>&lt;NewsFeed&gt;</code> component. Again, we&#39;ll start with a React version:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="kd">var</span> <span class="nx">stories</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">viewer</span><span class="p">.</span><span class="nx">stories</span><span class="p">;</span> <span class="c1">// `viewer` is the active user</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o">&lt;</span><span class="nx">View</span><span class="o">&gt;</span>
|
||||
<span class="p">{</span><span class="nx">stories</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">story</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">Story</span> <span class="nx">story</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">)}</span>
|
||||
<span class="o">&lt;</span><span class="nx">Button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadMore</span><span class="p">()}</span><span class="o">&gt;</span><span class="nx">Load</span> <span class="nx">More</span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
|
||||
<span class="o">&lt;</span><span class="err">/View&gt;</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// TODO: fetch more stories</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">NewsFeed</span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="all-the-news-fit-to-be-relayed"></a>All the News Fit to be Relayed <a class="hash-link" href="#all-the-news-fit-to-be-relayed">#</a></h2>
|
||||
<p><code>&lt;NewsFeed&gt;</code> has two new requirements: it composes <code>&lt;Story&gt;</code> and requests more data at runtime.</p>
|
||||
|
||||
<p>Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: <code>${Component.getQuery(&#39;prop&#39;)}</code>. Pagination can be accomplished with a query parameter, specified with <code>&lt;param&gt;</code> (as in <code>stories(first: &lt;count&gt;)</code>):</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="p">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">NewsFeed</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">queryParams</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="mi">3</span> <span class="cm">/* default to 3 stories */</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">viewer</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||||
<span class="nx">Viewer</span> <span class="p">{</span>
|
||||
<span class="nx">stories</span><span class="p">(</span><span class="nx">first</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">count</span><span class="o">&gt;</span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* fetch viewer&#39;s stories */</span>
|
||||
<span class="nx">edges</span> <span class="p">{</span> <span class="cm">/* traverse the graph */</span>
|
||||
<span class="nx">node</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">{</span><span class="nx">Story</span><span class="p">.</span><span class="nx">getQuery</span><span class="p">(</span><span class="s1">&#39;story&#39;</span><span class="p">)}</span> <span class="cm">/* compose child query */</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="err">`</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Whenever <code>&lt;NewsFeed&gt;</code> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the <code>text</code> and <code>author</code> data will be fetched for each of the 3 story nodes.</p>
|
||||
|
||||
<p>Query parameters are available to components as <code>props.queryParams</code> and can be modified with <code>props.setQueryParams(nextParams)</code>. We can use these to implement pagination:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||||
<span class="kr">class</span> <span class="nx">NewsFeed</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="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// read current params</span>
|
||||
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">queryParams</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
<span class="c1">// update params</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">setQueryParams</span><span class="p">({</span>
|
||||
<span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="o">+</span> <span class="mi">5</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now when <code>loadMore()</code> is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in <code>props.viewer.stories</code> and the updated count reflected in <code>props.queryParams.count</code>.</p>
|
||||
|
||||
<p><br/></p>
|
||||
<h2><a class="anchor" name="in-conclusion"></a>In Conclusion <a class="hash-link" href="#in-conclusion">#</a></h2>
|
||||
<p>These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we&#39;ve enabled the following benefits:</p>
|
||||
|
||||
<ul>
|
||||
<li>Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.</li>
|
||||
<li>Trivial pagination with automatic optimizations to fetch only the additional items.</li>
|
||||
<li>View composition and reusability, so that <code>&lt;Story&gt;</code> can be used on its own or within <code>&lt;NewsFeed&gt;</code>, without any changes to either component.</li>
|
||||
<li>Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.</li>
|
||||
<li>Exactly <em>zero</em> lines of imperative data fetching logic. Relay takes full advantage of React&#39;s declarative component model.</li>
|
||||
</ul>
|
||||
|
||||
<p>But Relay has many more tricks up its sleeve. For example, it&#39;s built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.</p>
|
||||
</description>
|
||||
<pubDate>2015-03-19T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React v0.13.1</title>
|
||||
<description><p>It&#39;s been less than a week since we shipped v0.13.0 but it&#39;s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>
|
||||
@@ -933,45 +1125,5 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React.js Conf Diversity Scholarship</title>
|
||||
<description><p>Today I&#39;m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>
|
||||
|
||||
<p>I&#39;m really excited about this and I hope you are too! The full announcement is below:</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!</p>
|
||||
|
||||
<p>Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 &amp; 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the <a href="http://conf.reactjs.com/">website</a> and <a href="http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html">updates</a> on our blog.</p>
|
||||
|
||||
<p>At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
|
||||
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.</p>
|
||||
|
||||
<p>To apply for the scholarship, please visit the Application Page: <a href="https://www.surveymonkey.com/s/XVJGK6R">https://www.surveymonkey.com/s/XVJGK6R</a></p>
|
||||
<h2><a class="anchor" name="award-includes"></a>Award Includes <a class="hash-link" href="#award-includes">#</a></h2>
|
||||
<ul>
|
||||
<li>Paid registration fee for the React.js Conf January 28 &amp; 29th at Facebook’s Headquarters in Menlo Park, CA</li>
|
||||
<li>Paid travel and lodging expenses</li>
|
||||
<li>Additional $200 meal stipend</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="important-dates"></a>Important Dates <a class="hash-link" href="#important-dates">#</a></h2>
|
||||
<ul>
|
||||
<li>Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full</li>
|
||||
<li>Friday, January 9, 2015: Award recipients will be notified by email of their acceptance</li>
|
||||
<li>Wednesday &amp; Thursday, January 28 &amp; 29, 2015: React.js Conf</li>
|
||||
</ul>
|
||||
<h2><a class="anchor" name="eligibility"></a>Eligibility <a class="hash-link" href="#eligibility">#</a></h2>
|
||||
<ul>
|
||||
<li>Must currently be studying or working in Computer Science or a related field</li>
|
||||
<li>International applicants are welcome, but you will be responsible for securing your own visa to attend the conference</li>
|
||||
<li>You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2014-12-19T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Reference in New Issue
Block a user