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

Rebuild website

Browse Source
This commit is contained in:
Travis CI
2015-08-03 22:19:54 +00:00
parent eae015d0ee
commit 083c2fa33f
103 changed files with 1813 additions and 1598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/05/why-react.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/12/community-roundup.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/19/community-roundup-2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/21/react-v0-3-3.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/27/community-roundup-3.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/03/community-roundup-4.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/17/react-v0-4-0.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/23/community-roundup-5.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/26/react-v0-4-1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/05/community-roundup-6.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/26/community-roundup-7.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/09/24/community-roundup-8.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/03/community-roundup-9.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/16/react-v0.5.0.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/29/react-v0-5-1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/06/community-roundup-10.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/18/community-roundup-11.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/18/react-v0.5.2-v0.4.2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/19/react-v0.8.0.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/23/community-roundup-12.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/30/community-roundup-13.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/02/react-chrome-developer-tools.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/06/community-roundup-14.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/05/community-roundup-15.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/15/community-roundup-16.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/16/react-v0.9-rc1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/20/react-v0.9.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/24/community-roundup-17.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/14/community-roundup-18.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/19/react-v0.10-rc1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/21/react-v0.10.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/28/the-road-to-1.0.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/04/04/reactnet.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/06/flux.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/05/29/one-year-of-open-source-react.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/06/27/community-roundup-19.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/13/react-v0.11-rc1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/17/react-v0.11.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/25/react-v0.11.1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/28/community-roundup-20.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/07/30/flux-actions-and-the-dispatcher.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/08/03/community-roundup-21.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/03/introducing-the-jsx-specification.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/12/community-round-up-22.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/16/react-v0.11.2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/09/24/testing-flux-applications.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/14/introducing-react-elements.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/16/react-v0.12-rc1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/17/community-roundup-23.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/27/react-js-conf.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/10/28/react-v0.12.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/11/24/react-js-conf-updates.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/11/25/community-roundup-24.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/12/18/react-v0.12.2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/12/19/react-js-conf-diversity-scholarship.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/01/27/react-v0.13.0-beta-1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/18/react-conf-roundup-2015.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/20/introducing-relay-and-graphql.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/24/react-v0.13-rc1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/02/24/streamlining-react-elements.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/03/react-v0.13-rc2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/04/community-roundup-25.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/10/react-v0.13.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/16/react-v0.13.1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/19/building-the-facebook-news-feed-with-relay.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/26/introducing-react-native.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html" class="active">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/03/30/community-roundup-26.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/04/17/react-native-v0.4.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/04/18/react-v0.13.2.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/01/graphql-introduction.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/08/react-v0.13.3.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/05/22/react-native-release-process.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/06/12/deprecating-jstransform-and-react-tools.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html" class="active">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/07/03/react-v0.14-beta-1.html
+2 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html" class="active">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
blog/2015/08/03/new-react-devtools-beta.html
+228
View File
@@ -0,0 +1,228 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>New React Devtools Beta | React</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="New React Devtools Beta | React">
<meta property="og:type" content="website">
<meta property="og:url" content="https://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html">
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
<meta property="og:description" content="A JavaScript library for building user interfaces">
<meta property="fb:app_id" content="623268441017527">
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script 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>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
React
</a>
<ul class="nav-site nav-site-internal">
<li><a href="/react/docs/getting-started.html">Docs</a></li>
<li><a href="/react/support.html">Support</a></li>
<li><a href="/react/downloads.html">Download</a></li>
<li><a href="/react/blog/" class="active">Blog</a></li>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a>
<li><a href="https://facebook.github.io/react-native/">React Native</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/08/03/new-react-devtools-beta.html" class="active">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
<li><a href="/react/blog/2015/05/22/react-native-release-process.html">React Native Release Process</a></li>
<li><a href="/react/blog/2015/05/08/react-v0.13.3.html">React v0.13.3</a></li>
<li><a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a></li>
<li><a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a></li>
<li><a href="/react/blog/2015/04/17/react-native-v0.4.html">React Native v0.4</a></li>
<li><a href="/react/blog/2015/03/30/community-roundup-26.html">Community Round-up #26</a></li>
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>
New React Devtools Beta
</h1>
<p class="meta">
August 3, 2015
by
<a href="https://twitter.com/jaredforsyth">Jared Forsyth</a>
</p>
<hr>
<div class="post">
<p>We&#39;ve made an entirely new version of the devtools, and we want you to try it
out!</p>
<p><img src="/react/img/blog/devtools-full.gif" alt="The full devtools gif"></p>
<h2><a class="anchor" name="why-entirely-new"></a>Why entirely new? <a class="hash-link" href="#why-entirely-new">#</a></h2>
<p>Perhaps the biggest reason was to create a defined API for dealing with
internals, so that other tools could benefit as well and not have to depend on
implementation details. This gives us more freedom to refactor things
internally without worrying about breaking tooling.</p>
<p>The current version of the devtools is a fork of Blink&#39;s &quot;Elements&quot; pane, and
is imperative, mutation-driven, and tightly integrated with Chrome-specific
APIs. The new devtools are much less coupled to Chrome, and easier to reason
about thanks to React.</p>
<h2><a class="anchor" name="what-are-the-benefits"></a>What are the benefits? <a class="hash-link" href="#what-are-the-benefits">#</a></h2>
<ul>
<li>100% React</li>
<li>Firefox compatible</li>
<li>React Native compatible</li>
<li>more extensible &amp; hackable</li>
</ul>
<h2><a class="anchor" name="are-there-any-new-features"></a>Are there any new features? <a class="hash-link" href="#are-there-any-new-features">#</a></h2>
<p>Yeah!</p>
<h3><a class="anchor" name="the-tree-view"></a>The Tree View <a class="hash-link" href="#the-tree-view">#</a></h3>
<p><img src="/react/img/blog/devtools-tree-view.png" alt="The new tree view of the devtools"></p>
<ul>
<li>Much richer view of your props, including the contents of objects and arrays</li>
<li>Custom components are emphasized, native components are de-emphasized</li>
<li>Stateful components have a red collapser</li>
<li>Improved keyboard navigation (hjkl or arrow keys)</li>
<li>Selected component is available in the console as <code>$r</code></li>
<li>Props that change highlight in green</li>
<li><p>Right-click menu</p>
<ul>
<li>Scroll node into view</li>
<li>Show the source for a component in the &quot;Sources&quot; pane</li>
<li>Show the element in the &quot;Elements&quot; pane</li>
</ul></li>
</ul>
<h3><a class="anchor" name="searching"></a>Searching <a class="hash-link" href="#searching">#</a></h3>
<p>Select the search bar (or press &quot;/&quot;), and start searching for a component by
name.</p>
<p><img src="/react/img/blog/devtools-search.gif" alt=""></p>
<h3><a class="anchor" name="the-side-pane"></a>The Side Pane <a class="hash-link" href="#the-side-pane">#</a></h3>
<ul>
<li>Now shows the <code>context</code> for a component</li>
<li>Right-click to store a prop/state value as a global variable</li>
</ul>
<p><img src="/react/img/blog/devtools-side-pane.gif" alt=""></p>
<h2><a class="anchor" name="how-do-i-install-it"></a>How do I install it? <a class="hash-link" href="#how-do-i-install-it">#</a></h2>
<p>First, disable the Chrome web store version, or it will break things. Then
<a href="https://github.com/facebook/react-devtools/releases">download the .crx</a> and
drag it into your <code>chrome://extensions</code> page. If it&#39;s not working to drag it
from the downloads bar, try opening your downloads folder and drag it from
there.</p>
<p>Once we&#39;ve determined that there aren&#39;t any major regressions, we&#39;ll update
the official web store version, and everyone will be automatically upgraded.</p>
<h3><a class="anchor" name="also-firefox"></a>Also Firefox! <a class="hash-link" href="#also-firefox">#</a></h3>
<p>We also have an initial version of the devtools for Firefox, which you can
download from the same <a href="https://github.com/facebook/react-devtools/releases">release page</a>.</p>
<h2><a class="anchor" name="feedback-welcome"></a>Feedback welcome <a class="hash-link" href="#feedback-welcome">#</a></h2>
<p>Let us know what issues you run into
<a href="https://github.com/facebook/react-devtools/issues">on GitHub</a>, and check out
<a href="https://github.com/facebook/react-devtools/tree/devtools-next">the README</a>
for more info.</p>
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">
&copy; 2013&ndash;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>
blog/all.html
+3
View File
@@ -65,6 +65,9 @@
<h1>All Posts</h1>
<p><strong><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></strong> on August 3, 2015 by Jared Forsyth</p>
<p><strong><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></strong> on July 3, 2015 by Ben Alpert</p>
blog/index.html
+100 -116
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,104 @@
<h1>
<a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a>
</h1>
<p class="meta">
August 3, 2015
by
<a href="https://twitter.com/jaredforsyth">Jared Forsyth</a>
</p>
<hr>
<div class="post">
<p>We&#39;ve made an entirely new version of the devtools, and we want you to try it
out!</p>
<p><img src="/react/img/blog/devtools-full.gif" alt="The full devtools gif"></p>
<h2><a class="anchor" name="why-entirely-new"></a>Why entirely new? <a class="hash-link" href="#why-entirely-new">#</a></h2>
<p>Perhaps the biggest reason was to create a defined API for dealing with
internals, so that other tools could benefit as well and not have to depend on
implementation details. This gives us more freedom to refactor things
internally without worrying about breaking tooling.</p>
<p>The current version of the devtools is a fork of Blink&#39;s &quot;Elements&quot; pane, and
is imperative, mutation-driven, and tightly integrated with Chrome-specific
APIs. The new devtools are much less coupled to Chrome, and easier to reason
about thanks to React.</p>
<h2><a class="anchor" name="what-are-the-benefits"></a>What are the benefits? <a class="hash-link" href="#what-are-the-benefits">#</a></h2>
<ul>
<li>100% React</li>
<li>Firefox compatible</li>
<li>React Native compatible</li>
<li>more extensible &amp; hackable</li>
</ul>
<h2><a class="anchor" name="are-there-any-new-features"></a>Are there any new features? <a class="hash-link" href="#are-there-any-new-features">#</a></h2>
<p>Yeah!</p>
<h3><a class="anchor" name="the-tree-view"></a>The Tree View <a class="hash-link" href="#the-tree-view">#</a></h3>
<p><img src="/react/img/blog/devtools-tree-view.png" alt="The new tree view of the devtools"></p>
<ul>
<li>Much richer view of your props, including the contents of objects and arrays</li>
<li>Custom components are emphasized, native components are de-emphasized</li>
<li>Stateful components have a red collapser</li>
<li>Improved keyboard navigation (hjkl or arrow keys)</li>
<li>Selected component is available in the console as <code>$r</code></li>
<li>Props that change highlight in green</li>
<li><p>Right-click menu</p>
<ul>
<li>Scroll node into view</li>
<li>Show the source for a component in the &quot;Sources&quot; pane</li>
<li>Show the element in the &quot;Elements&quot; pane</li>
</ul></li>
</ul>
<h3><a class="anchor" name="searching"></a>Searching <a class="hash-link" href="#searching">#</a></h3>
<p>Select the search bar (or press &quot;/&quot;), and start searching for a component by
name.</p>
<p><img src="/react/img/blog/devtools-search.gif" alt=""></p>
<h3><a class="anchor" name="the-side-pane"></a>The Side Pane <a class="hash-link" href="#the-side-pane">#</a></h3>
<ul>
<li>Now shows the <code>context</code> for a component</li>
<li>Right-click to store a prop/state value as a global variable</li>
</ul>
<p><img src="/react/img/blog/devtools-side-pane.gif" alt=""></p>
<h2><a class="anchor" name="how-do-i-install-it"></a>How do I install it? <a class="hash-link" href="#how-do-i-install-it">#</a></h2>
<p>First, disable the Chrome web store version, or it will break things. Then
<a href="https://github.com/facebook/react-devtools/releases">download the .crx</a> and
drag it into your <code>chrome://extensions</code> page. If it&#39;s not working to drag it
from the downloads bar, try opening your downloads folder and drag it from
there.</p>
<p>Once we&#39;ve determined that there aren&#39;t any major regressions, we&#39;ll update
the official web store version, and everyone will be automatically upgraded.</p>
<h3><a class="anchor" name="also-firefox"></a>Also Firefox! <a class="hash-link" href="#also-firefox">#</a></h3>
<p>We also have an initial version of the devtools for Firefox, which you can
download from the same <a href="https://github.com/facebook/react-devtools/releases">release page</a>.</p>
<h2><a class="anchor" name="feedback-welcome"></a>Feedback welcome <a class="hash-link" href="#feedback-welcome">#</a></h2>
<p>Let us know what issues you run into
<a href="https://github.com/facebook/react-devtools/issues">on GitHub</a>, and check out
<a href="https://github.com/facebook/react-devtools/tree/devtools-next">the README</a>
for more info.</p>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a>
@@ -332,120 +430,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.13.3.m
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a>
</h1>
<p class="meta">
May 1, 2015
by
<a href="https://twitter.com/schrockn">Nick Schrock</a>
</p>
<hr>
<div class="post">
<p>At the React.js conference in late January 2015, we revealed our next major technology in the React family: <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">Relay</a>. </p>
<p>Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a <em>declarative</em> data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.</p>
<p>GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook&#39;s HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion&#39;s share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.</p>
<p>We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.</p>
<h2><a class="anchor" name="what-is-graphql"></a>What is GraphQL? <a class="hash-link" href="#what-is-graphql">#</a></h2>
<p>A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query: </p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">{</span>
<span class="nx">user</span><span class="p">(</span><span class="nx">id</span><span class="o">:</span> <span class="mi">3500401</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">id</span><span class="p">,</span>
<span class="nx">name</span><span class="p">,</span>
<span class="nx">isViewerFriend</span><span class="p">,</span>
<span class="nx">profilePicture</span><span class="p">(</span><span class="nx">size</span><span class="o">:</span> <span class="mi">50</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">uri</span><span class="p">,</span>
<span class="nx">width</span><span class="p">,</span>
<span class="nx">height</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>(Note: this syntax is slightly different from previous GraphQL examples. We&#39;ve recently been making improvements to the language.)</p>
<p>And here is the response to that query.</p>
<div class="highlight"><pre><code class="language-json" data-lang="json"><span class="p">{</span>
<span class="nt">&quot;user&quot;</span> <span class="p">:</span> <span class="p">{</span>
<span class="nt">&quot;id&quot;</span><span class="p">:</span> <span class="mi">3500401</span><span class="p">,</span>
<span class="nt">&quot;name&quot;</span><span class="p">:</span> <span class="s2">&quot;Jing Chen&quot;</span><span class="p">,</span>
<span class="nt">&quot;isViewerFriend&quot;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nt">&quot;profilePicture&quot;</span><span class="p">:</span> <span class="p">{</span>
<span class="nt">&quot;uri&quot;</span><span class="p">:</span> <span class="s2">&quot;http://someurl.cdn/pic.jpg&quot;</span><span class="p">,</span>
<span class="nt">&quot;width&quot;</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span>
<span class="nt">&quot;height&quot;</span><span class="p">:</span> <span class="mi">50</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:</p>
<ul>
<li><strong>Hierarchical:</strong> Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.</li>
<li><strong>Product-centric:</strong> GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.</li>
<li><strong>Client-specified queries:</strong> In GraphQL, the specification for queries are encoded in the <em>client</em> rather than the <em>server</em>. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.</li>
<li><strong>Backwards Compatible:</strong> In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for <em>at least</em> two years. This means there are at a <em>minimum</em> 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.</li>
<li><strong>Structured, Arbitrary Code:</strong> Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by <em>arbitrary code</em>. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.</li>
<li><strong>Application-Layer Protocol:</strong> GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.</li>
<li><strong>Strongly-typed:</strong> GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.</li>
<li><strong>Introspective:</strong> GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.</li>
</ul>
<h2><a class="anchor" name="why-invent-something-new"></a>Why invent something new? <a class="hash-link" href="#why-invent-something-new">#</a></h2>
<p>Obviously GraphQL is not the first system to manage client-server interactions. In today&#39;s world there are two dominant architectural styles for client-server interaction: REST and <em>ad hoc</em> endpoints. </p>
<h3><a class="anchor" name="rest"></a>REST <a class="hash-link" href="#rest">#</a></h3>
<p>REST an acronym for Representational State Transfer, which is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that <em>self-identify</em> as REST, rather than systems which are formally REST.</p>
<p>Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.</p>
<p>We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:</p>
<ul>
<li>Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.</li>
<li>Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.</li>
<li>REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.</li>
<li>Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” <a href="http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven">according to its inventor</a>. This is not a requirement for APIs that serve a client app built within the same organization.</li>
</ul>
<p>Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all <em>internal</em> REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.</p>
<p>Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building <em>ad hoc</em> endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST&#39;s major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to <em>ad hoc</em> endpoints.</p>
<h3><a class="anchor" name="ad-hoc-endpoints"></a>Ad Hoc Endpoints <a class="hash-link" href="#ad-hoc-endpoints">#</a></h3>
<p>Many applications have no formalized client-server contract. Product developers access server capabilities through <em>ad hoc</em> endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.</p>
<ul>
<li>These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.</li>
<li>Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.</li>
<li>Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.</li>
<li>Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of <em>ad hoc</em> endpoints remain.</li>
</ul>
<p>We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.</p>
<p>This is a liberating platform for product developers. With GraphQL, no more contending with <em>ad hoc</em> endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from <em>ad hoc</em> endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.</p>
<p>Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application&#39;s data model. </p>
<h2><a class="anchor" name="whats-next"></a>What&#39;s next? <a class="hash-link" href="#whats-next">#</a></h2>
<p>Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We&#39;re incredibly excited to share this system and work with the open source community to improve it.</p>
</div>
</div>
blog/page10/index.html
+95 -88
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,99 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p><a href="/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&#39;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="https://fb.me/react-0.10.0-rc1.js">https://fb.me/react-0.10.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.10.0-rc1.min.js">https://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="https://fb.me/react-with-addons-0.10.0-rc1.js">https://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.10.0-rc1.min.js">https://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.10.0-rc1.js">https://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
</ul>
<p>We&#39;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="https://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">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a>
@@ -566,92 +659,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.9.0-rc
</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
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
</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&#39;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&#39;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&#39;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&#39;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&#39;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&amp;utm_medium=post&amp;utm_campaign=echojs">This &quot;Deep explanation for newbies&quot;</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&#39;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-nocookie.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">this</a> introduction to React Components. [<a href="http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">part 1</a>], [<a href="http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>&quot;React: Finally, a great server/client web stack&quot; <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&#39;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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
</div>
</div>
blog/page11/index.html
+88 -101
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,92 @@
<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
<a href="https://twitter.com/jonasgebhardt">Jonas Gebhardt</a>
</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&#39;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&#39;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&#39;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&#39;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&#39;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&amp;utm_medium=post&amp;utm_campaign=echojs">This &quot;Deep explanation for newbies&quot;</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&#39;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-nocookie.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">this</a> introduction to React Components. [<a href="http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">part 1</a>], [<a href="http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>&quot;React: Finally, a great server/client web stack&quot; <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&#39;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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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>
@@ -471,105 +557,6 @@ rails s
</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
<a href="https://twitter.com/vjeux">Vjeux</a>
</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="https://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="https://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="/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
<blockquote>
<p>We&#39;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&#39;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="https://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="https://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="/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="/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&#39;s a good example of use of <a href="/react/docs/animation.html">TransitionGroup</a> to implement animations.
<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
<p><a href="https://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 &quot;pop&quot; 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>&#39;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>
<p><a href="https://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 &quot;hoodiehq/hoodie-react-todomvc&quot;
</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="/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
<p><a href="/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&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center></p>
</div>
</div>
blog/page12/index.html
+101 -42
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,105 @@
<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
<a href="https://twitter.com/vjeux">Vjeux</a>
</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="https://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="https://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="/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
<blockquote>
<p>We&#39;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&#39;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="https://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="https://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="/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="/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&#39;s a good example of use of <a href="/react/docs/animation.html">TransitionGroup</a> to implement animations.
<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
<p><a href="https://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 &quot;pop&quot; 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>&#39;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>
<p><a href="https://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 &quot;hoodiehq/hoodie-react-todomvc&quot;
</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="/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
<p><a href="/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&#39;t force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; 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>
@@ -432,46 +531,6 @@ Is this some sort of template language? Specifically no. This might have been th
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
<li>Fixed bug with selection and focus.</li>
<li>Made it possible to unmount components from the document root.</li>
<li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li>Fixed bug with transition and animation event detection.</li>
</ul>
</div>
</div>
blog/page13/index.html
+42 -63
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,46 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to <a href="https://github.com/spicyj">Ben Alpert</a>, <a href="https://github.com/andreypopp">Andrey Popp</a>, and <a href="https://github.com/lrowe">Laurence Rowe</a> for their contributions!</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Fixed bug with <code>&lt;input type=&quot;range&quot;&gt;</code> and selection events.</li>
<li>Fixed bug with selection and focus.</li>
<li>Made it possible to unmount components from the document root.</li>
<li>Fixed bug for <code>disabled</code> attribute handling on non-<code>&lt;input&gt;</code> elements.</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li>Fixed bug with transition and animation event detection.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a>
@@ -447,67 +487,6 @@
</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
<a href="https://github.com/kmeht">Kunal Mehta</a>
</p>
<hr>
<div class="post">
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
<span class="c"># For a single file, you can use a shortcut method.</span>
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
</div>
</div>
blog/page14/index.html
+63 -62
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,67 @@
<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
<a href="https://github.com/kmeht">Kunal Mehta</a>
</p>
<hr>
<div class="post">
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
<span class="c"># For a single file, you can use a shortcut method.</span>
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a>
@@ -399,66 +460,6 @@
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>Over the past 2 months we&#39;ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we&#39;re proud to announce the availability of React v0.4!</p>
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="https://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We&#39;ve had contributions ranging from documentation improvements to major changes to React&#39;s rendering. We&#39;ve seen people integrate React into the tools they&#39;re using and the products they&#39;re building, and we&#39;re all very excited to see what our budding community builds next!</p>
<p>React v0.4 has some big changes. We&#39;ve also restructured the documentation to better communicate how to use React. We&#39;ve summarized the changes below and linked to documentation where we think it will be especially useful.</p>
<p>When you&#39;re ready, <a href="/react/downloads.html">go download it</a>!</p>
<h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
<li>Support for more DOM elements and attributes (e.g., <code>&lt;canvas&gt;</code>)</li>
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(&lt;component&gt;, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
<li><code>prop</code> improvements: validation and default values. <a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="/react/docs/multiple-components.html">Read the docs for details...</a></li>
<li>Removed <code>React.autoBind</code>. <a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
<li>Improvements to forms. We&#39;ve written wrappers around <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;option&gt;</code>, and <code>&lt;select&gt;</code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="/react/docs/forms.html">Read the docs for details...</a></li>
<li>We&#39;ve implemented an improved synthetic event system that conforms to the W3C spec.</li>
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as its second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you&#39;ll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
</ul>
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
<ul>
<li>Support for comment nodes <code>&lt;div&gt;{/* this is a comment and won&#39;t be rendered */}&lt;/div&gt;</code></li>
<li>Children are now transformed directly into arguments instead of being wrapped in an array
E.g. <code>&lt;div&gt;&lt;Component1/&gt;&lt;Component2/&gt;&lt;/div&gt;</code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
If you were using React without JSX previously, your code should still work.</li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Fixed a number of bugs when transforming directories</li>
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
</ul>
</div>
</div>
blog/page15/index.html
+62 -45
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,66 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>Over the past 2 months we&#39;ve been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we&#39;re proud to announce the availability of React v0.4!</p>
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="https://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We&#39;ve had contributions ranging from documentation improvements to major changes to React&#39;s rendering. We&#39;ve seen people integrate React into the tools they&#39;re using and the products they&#39;re building, and we&#39;re all very excited to see what our budding community builds next!</p>
<p>React v0.4 has some big changes. We&#39;ve also restructured the documentation to better communicate how to use React. We&#39;ve summarized the changes below and linked to documentation where we think it will be especially useful.</p>
<p>When you&#39;re ready, <a href="/react/downloads.html">go download it</a>!</p>
<h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
<ul>
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
<li>Support for more DOM elements and attributes (e.g., <code>&lt;canvas&gt;</code>)</li>
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(&lt;component&gt;, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
<li><code>prop</code> improvements: validation and default values. <a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="/react/docs/multiple-components.html">Read the docs for details...</a></li>
<li>Removed <code>React.autoBind</code>. <a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
<li>Improvements to forms. We&#39;ve written wrappers around <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;option&gt;</code>, and <code>&lt;select&gt;</code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="/react/docs/forms.html">Read the docs for details...</a></li>
<li>We&#39;ve implemented an improved synthetic event system that conforms to the W3C spec.</li>
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as its second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you&#39;ll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
</ul>
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
<ul>
<li>Support for comment nodes <code>&lt;div&gt;{/* this is a comment and won&#39;t be rendered */}&lt;/div&gt;</code></li>
<li>Children are now transformed directly into arguments instead of being wrapped in an array
E.g. <code>&lt;div&gt;&lt;Component1/&gt;&lt;Component2/&gt;&lt;/div&gt;</code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
If you were using React without JSX previously, your code should still work.</li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Fixed a number of bugs when transforming directories</li>
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a>
@@ -410,49 +470,6 @@
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>We have a ton of great stuff coming in v0.4, but in the meantime we&#39;re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>
<h2><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h2>
<ul>
<li>Upgrade Commoner so <code>require</code> statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn&#39;t translate well for other consumers of <code>bin/jsx</code>.</li>
<li>Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.</li>
<li>Freeze our esprima dependency.</li>
</ul>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li>Allow reusing the same DOM node to render different components. e.g. <code>React.renderComponent(&lt;div/&gt;, domNode); React.renderComponent(&lt;span/&gt;, domNode);</code> will work now.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.</li>
</ul>
</div>
</div>
blog/page16/index.html
+45 -2
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,49 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>We have a ton of great stuff coming in v0.4, but in the meantime we&#39;re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>
<h2><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h2>
<ul>
<li>Upgrade Commoner so <code>require</code> statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn&#39;t translate well for other consumers of <code>bin/jsx</code>.</li>
<li>Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.</li>
<li>Freeze our esprima dependency.</li>
</ul>
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<ul>
<li>Allow reusing the same DOM node to render different components. e.g. <code>React.renderComponent(&lt;div/&gt;, domNode); React.renderComponent(&lt;span/&gt;, domNode);</code> will work now.</li>
</ul>
<h2><a class="anchor" name="jsxtransformer"></a>JSXTransformer <a class="hash-link" href="#jsxtransformer">#</a></h2>
<ul>
<li>Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a>
blog/page2/index.html
+116 -214
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,120 @@
<h1>
<a href="/react/blog/2015/05/01/graphql-introduction.html">GraphQL Introduction</a>
</h1>
<p class="meta">
May 1, 2015
by
<a href="https://twitter.com/schrockn">Nick Schrock</a>
</p>
<hr>
<div class="post">
<p>At the React.js conference in late January 2015, we revealed our next major technology in the React family: <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">Relay</a>. </p>
<p>Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a <em>declarative</em> data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.</p>
<p>GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook&#39;s HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion&#39;s share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.</p>
<p>We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.</p>
<h2><a class="anchor" name="what-is-graphql"></a>What is GraphQL? <a class="hash-link" href="#what-is-graphql">#</a></h2>
<p>A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query: </p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">{</span>
<span class="nx">user</span><span class="p">(</span><span class="nx">id</span><span class="o">:</span> <span class="mi">3500401</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">id</span><span class="p">,</span>
<span class="nx">name</span><span class="p">,</span>
<span class="nx">isViewerFriend</span><span class="p">,</span>
<span class="nx">profilePicture</span><span class="p">(</span><span class="nx">size</span><span class="o">:</span> <span class="mi">50</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">uri</span><span class="p">,</span>
<span class="nx">width</span><span class="p">,</span>
<span class="nx">height</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>(Note: this syntax is slightly different from previous GraphQL examples. We&#39;ve recently been making improvements to the language.)</p>
<p>And here is the response to that query.</p>
<div class="highlight"><pre><code class="language-json" data-lang="json"><span class="p">{</span>
<span class="nt">&quot;user&quot;</span> <span class="p">:</span> <span class="p">{</span>
<span class="nt">&quot;id&quot;</span><span class="p">:</span> <span class="mi">3500401</span><span class="p">,</span>
<span class="nt">&quot;name&quot;</span><span class="p">:</span> <span class="s2">&quot;Jing Chen&quot;</span><span class="p">,</span>
<span class="nt">&quot;isViewerFriend&quot;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nt">&quot;profilePicture&quot;</span><span class="p">:</span> <span class="p">{</span>
<span class="nt">&quot;uri&quot;</span><span class="p">:</span> <span class="s2">&quot;http://someurl.cdn/pic.jpg&quot;</span><span class="p">,</span>
<span class="nt">&quot;width&quot;</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span>
<span class="nt">&quot;height&quot;</span><span class="p">:</span> <span class="mi">50</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:</p>
<ul>
<li><strong>Hierarchical:</strong> Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.</li>
<li><strong>Product-centric:</strong> GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.</li>
<li><strong>Client-specified queries:</strong> In GraphQL, the specification for queries are encoded in the <em>client</em> rather than the <em>server</em>. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.</li>
<li><strong>Backwards Compatible:</strong> In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for <em>at least</em> two years. This means there are at a <em>minimum</em> 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.</li>
<li><strong>Structured, Arbitrary Code:</strong> Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by <em>arbitrary code</em>. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.</li>
<li><strong>Application-Layer Protocol:</strong> GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.</li>
<li><strong>Strongly-typed:</strong> GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.</li>
<li><strong>Introspective:</strong> GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.</li>
</ul>
<h2><a class="anchor" name="why-invent-something-new"></a>Why invent something new? <a class="hash-link" href="#why-invent-something-new">#</a></h2>
<p>Obviously GraphQL is not the first system to manage client-server interactions. In today&#39;s world there are two dominant architectural styles for client-server interaction: REST and <em>ad hoc</em> endpoints. </p>
<h3><a class="anchor" name="rest"></a>REST <a class="hash-link" href="#rest">#</a></h3>
<p>REST an acronym for Representational State Transfer, which is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that <em>self-identify</em> as REST, rather than systems which are formally REST.</p>
<p>Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.</p>
<p>We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:</p>
<ul>
<li>Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.</li>
<li>Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.</li>
<li>REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.</li>
<li>Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” <a href="http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven">according to its inventor</a>. This is not a requirement for APIs that serve a client app built within the same organization.</li>
</ul>
<p>Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all <em>internal</em> REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.</p>
<p>Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building <em>ad hoc</em> endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST&#39;s major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to <em>ad hoc</em> endpoints.</p>
<h3><a class="anchor" name="ad-hoc-endpoints"></a>Ad Hoc Endpoints <a class="hash-link" href="#ad-hoc-endpoints">#</a></h3>
<p>Many applications have no formalized client-server contract. Product developers access server capabilities through <em>ad hoc</em> endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.</p>
<ul>
<li>These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.</li>
<li>Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.</li>
<li>Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.</li>
<li>Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of <em>ad hoc</em> endpoints remain.</li>
</ul>
<p>We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.</p>
<p>This is a liberating platform for product developers. With GraphQL, no more contending with <em>ad hoc</em> endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from <em>ad hoc</em> endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.</p>
<p>Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application&#39;s data model. </p>
<h2><a class="anchor" name="whats-next"></a>What&#39;s next? <a class="hash-link" href="#whats-next">#</a></h2>
<p>Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We&#39;re incredibly excited to share this system and work with the open source community to improve it.</p>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/04/18/react-v0.13.2.html">React v0.13.2</a>
@@ -332,218 +446,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.13.2.m
</div>
<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
<a href="https://twitter.com/en_JS">Joseph Savona</a>
</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&#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="/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube-nocookie.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>
</div>
</div>
blog/page3/index.html
+214 -94
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,218 @@
<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
<a href="https://twitter.com/en_JS">Joseph Savona</a>
</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&#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="/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube-nocookie.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>
</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>
@@ -412,98 +624,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-r
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</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&#39;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&#39;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&#39;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="https://fb.me/react-0.13.0-rc1.js">https://fb.me/react-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0-rc1.min.js">https://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="https://fb.me/react-with-addons-0.13.0-rc1.js">https://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-rc1.min.js">https://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0-rc1.js">https://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
</ul>
<p>We&#39;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&#39;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&#39;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="/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>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</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) =&gt; ({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[&#39;static&#39;]</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>&gt;</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>
blog/page4/index.html
+94 -62
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,98 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</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&#39;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&#39;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&#39;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="https://fb.me/react-0.13.0-rc1.js">https://fb.me/react-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0-rc1.min.js">https://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="https://fb.me/react-with-addons-0.13.0-rc1.js">https://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-rc1.min.js">https://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0-rc1.js">https://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
</ul>
<p>We&#39;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&#39;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&#39;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="/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>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</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) =&gt; ({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[&#39;static&#39;]</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>&gt;</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>
@@ -785,66 +877,6 @@
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<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="/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="/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>
</div>
</div>
blog/page5/index.html
+62 -39
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,66 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<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="/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="/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>
</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>
@@ -454,43 +514,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.12.0.m
</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
<a href="https://twitter.com/vjeux">Vjeux</a>
</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 &quot;some day&quot;. 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&#39;re happy to announce <a href="http://conf.reactjs.com/">React.js Conf</a>! It will take place January 28-29, 2015 on Facebook&#39;s campus in Menlo Park, California.</strong></p>
<p>Before we open registration, <a href="http://conf.reactjs.com/call-for-presenters.html">we&#39;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>
blog/page6/index.html
+39 -77
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,43 @@
<h1>
<a href="/react/blog/2014/10/27/react-js-conf.html">React.js Conf</a>
</h1>
<p class="meta">
October 27, 2014
by
<a href="https://twitter.com/vjeux">Vjeux</a>
</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 &quot;some day&quot;. 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&#39;re happy to announce <a href="http://conf.reactjs.com/">React.js Conf</a>! It will take place January 28-29, 2015 on Facebook&#39;s campus in Menlo Park, California.</strong></p>
<p>Before we open registration, <a href="http://conf.reactjs.com/call-for-presenters.html">we&#39;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>
@@ -824,81 +861,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.12.0-r
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>Today we&#39;re releasing React v0.11.2 to add a few small features.</p>
<p>We&#39;re adding support for two more DOM elements, <code>&lt;dialog&gt;</code> and <code>&lt;picture&gt;</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&#39;re making them available to everybody.</p>
<p>We&#39;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&#39;t affect anybody.</p>
<p>And lastly, on the heels of announcing Flow at <a href="http://atscaleconference.com/">@Scale</a> yesterday, we&#39;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&#39;ll be talking about Flow more in the coming months. But for now, it&#39;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="https://fb.me/react-0.11.2.js">https://fb.me/react-0.11.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.11.2.min.js">https://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="https://fb.me/react-with-addons-0.11.2.js">https://fb.me/react-with-addons-0.11.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.11.2.min.js">https://fb.me/react-with-addons-0.11.2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.11.2.js">https://fb.me/JSXTransformer-0.11.2.js</a></li>
</ul>
<p>We&#39;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>&lt;dialog&gt;</code> element and associated <code>open</code> attribute</li>
<li>Added support for <code>&lt;picture&gt;</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>&lt;picture&gt;</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(&#39;react-tools&#39;).transform</code> as <code>stripTypes</code></li>
</ul></li>
</ul>
</div>
</div>
blog/page7/index.html
+77 -108
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,81 @@
<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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>Today we&#39;re releasing React v0.11.2 to add a few small features.</p>
<p>We&#39;re adding support for two more DOM elements, <code>&lt;dialog&gt;</code> and <code>&lt;picture&gt;</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&#39;re making them available to everybody.</p>
<p>We&#39;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&#39;t affect anybody.</p>
<p>And lastly, on the heels of announcing Flow at <a href="http://atscaleconference.com/">@Scale</a> yesterday, we&#39;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&#39;ll be talking about Flow more in the coming months. But for now, it&#39;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="https://fb.me/react-0.11.2.js">https://fb.me/react-0.11.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.11.2.min.js">https://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="https://fb.me/react-with-addons-0.11.2.js">https://fb.me/react-with-addons-0.11.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.11.2.min.js">https://fb.me/react-with-addons-0.11.2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.11.2.js">https://fb.me/JSXTransformer-0.11.2.js</a></li>
</ul>
<p>We&#39;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>&lt;dialog&gt;</code> element and associated <code>open</code> attribute</li>
<li>Added support for <code>&lt;picture&gt;</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>&lt;picture&gt;</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(&#39;react-tools&#39;).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>
@@ -394,112 +469,6 @@ This is not the intended way to use React but can be useful as last resort if yo
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/07/28/community-roundup-20.html">Community Round-up #20</a>
</h1>
<p class="meta">
July 28, 2014
by
<a href="https://twitter.com/loukan42">Lou Husson</a>
</p>
<hr>
<div class="post">
<p>It&#39;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&#39;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&#39;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="/react/img/blog/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&#39;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-nocookie.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="https://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&#39;s GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It&#39;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">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</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">&#39;numeric&#39;</span><span class="p">,</span> <span class="nx">minute</span><span class="o">:</span> <span class="s1">&#39;numeric&#39;</span> <span class="p">})}</span><span class="o">&lt;</span><span class="err">/p&gt;</span>
<span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</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">&#39;percent&#39;</span> <span class="p">})}</span><span class="o">&lt;</span><span class="err">/p&gt;</span>
<span class="o">&lt;</span><span class="err">/div&gt;</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">&lt;</span><span class="nx">MyComponent</span> <span class="nx">locales</span><span class="o">=</span><span class="p">{[</span><span class="s1">&#39;fr-FR&#39;</span><span class="p">]}</span> <span class="o">/&gt;</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">&#39;example&#39;</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&#39;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&#39;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-nocookie.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&#39;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&#39;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&#39;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">&#39;http://d3js.org/d3.v3.min.js&#39;</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">&#39;Loading script...&#39;</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">&#39;Loading failed&#39;</span> <span class="o">:</span>
<span class="s1">&#39;Loading succeeded&#39;</span><span class="p">;</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/span&gt;;</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>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
</div>
</div>
blog/page8/index.html
+108 -39
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,112 @@
<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
<a href="https://twitter.com/loukan42">Lou Husson</a>
</p>
<hr>
<div class="post">
<p>It&#39;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&#39;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&#39;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="/react/img/blog/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&#39;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-nocookie.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="https://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&#39;s GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It&#39;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">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</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">&#39;numeric&#39;</span><span class="p">,</span> <span class="nx">minute</span><span class="o">:</span> <span class="s1">&#39;numeric&#39;</span> <span class="p">})}</span><span class="o">&lt;</span><span class="err">/p&gt;</span>
<span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</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">&#39;percent&#39;</span> <span class="p">})}</span><span class="o">&lt;</span><span class="err">/p&gt;</span>
<span class="o">&lt;</span><span class="err">/div&gt;</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">&lt;</span><span class="nx">MyComponent</span> <span class="nx">locales</span><span class="o">=</span><span class="p">{[</span><span class="s1">&#39;fr-FR&#39;</span><span class="p">]}</span> <span class="o">/&gt;</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">&#39;example&#39;</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&#39;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&#39;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-nocookie.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&#39;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&#39;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&#39;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">&#39;http://d3js.org/d3.v3.min.js&#39;</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">&#39;Loading script...&#39;</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">&#39;Loading failed&#39;</span> <span class="o">:</span>
<span class="s1">&#39;Loading succeeded&#39;</span><span class="p">;</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/span&gt;;</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>&mdash; 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>
@@ -550,43 +656,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.11.0-r
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/05/29/one-year-of-open-source-react.html">One Year of Open-Source React</a>
</h1>
<p class="meta">
May 29, 2014
by
<a href="https://twitter.com/_chenglou">Cheng Lou</a>
</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="/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="https://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&#39;s been hard to convince people to try React. <a href="/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&#39;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&#39;t have gained as much traction without them. In the future, we will continue to try to set an example of what&#39;s possible to achieve when we rethink about current “best practices”.</p>
<p>Here’s to another year!</p>
</div>
</div>
blog/page9/index.html
+39 -95
View File
@@ -66,6 +66,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2015/08/03/new-react-devtools-beta.html">New React Devtools Beta</a></li>
<li><a href="/react/blog/2015/07/03/react-v0.14-beta-1.html">React v0.14 Beta 1</a></li>
<li><a href="/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html">Deprecating JSTransform and react-tools</a></li>
@@ -84,8 +86,6 @@
<li><a href="/react/blog/2015/03/26/introducing-react-native.html">Introducing React Native</a></li>
<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/all.html">All posts ...</a></li>
</ul>
</div>
@@ -97,6 +97,43 @@
<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
<a href="https://twitter.com/_chenglou">Cheng Lou</a>
</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="/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="https://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&#39;s been hard to convince people to try React. <a href="/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&#39;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&#39;t have gained as much traction without them. In the future, we will continue to try to set an example of what&#39;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>
@@ -339,99 +376,6 @@ Minified build for production: <a href="https://fb.me/react-with-addons-0.10.0.m
</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
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p><a href="/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&#39;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="https://fb.me/react-0.10.0-rc1.js">https://fb.me/react-0.10.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.10.0-rc1.min.js">https://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="https://fb.me/react-with-addons-0.10.0-rc1.js">https://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.10.0-rc1.min.js">https://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.10.0-rc1.js">https://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
</ul>
<p>We&#39;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="https://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">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
</div>
css/react.css
+1 -1
View File
File diff suppressed because one or more lines are too long
feed.xml
+78 -192
View File
@@ -6,6 +6,84 @@
<link>https://facebook.github.io/react</link>
<atom:link href="https://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
<item>
<title>New React Devtools Beta</title>
<description>&lt;p&gt;We&amp;#39;ve made an entirely new version of the devtools, and we want you to try it
out!&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/devtools-full.gif&quot; alt=&quot;The full devtools gif&quot;&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;why-entirely-new&quot;&gt;&lt;/a&gt;Why entirely new? &lt;a class=&quot;hash-link&quot; href=&quot;#why-entirely-new&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Perhaps the biggest reason was to create a defined API for dealing with
internals, so that other tools could benefit as well and not have to depend on
implementation details. This gives us more freedom to refactor things
internally without worrying about breaking tooling.&lt;/p&gt;
&lt;p&gt;The current version of the devtools is a fork of Blink&amp;#39;s &amp;quot;Elements&amp;quot; pane, and
is imperative, mutation-driven, and tightly integrated with Chrome-specific
APIs. The new devtools are much less coupled to Chrome, and easier to reason
about thanks to React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;what-are-the-benefits&quot;&gt;&lt;/a&gt;What are the benefits? &lt;a class=&quot;hash-link&quot; href=&quot;#what-are-the-benefits&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;100% React&lt;/li&gt;
&lt;li&gt;Firefox compatible&lt;/li&gt;
&lt;li&gt;React Native compatible&lt;/li&gt;
&lt;li&gt;more extensible &amp;amp; hackable&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;are-there-any-new-features&quot;&gt;&lt;/a&gt;Are there any new features? &lt;a class=&quot;hash-link&quot; href=&quot;#are-there-any-new-features&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Yeah!&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-tree-view&quot;&gt;&lt;/a&gt;The Tree View &lt;a class=&quot;hash-link&quot; href=&quot;#the-tree-view&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/devtools-tree-view.png&quot; alt=&quot;The new tree view of the devtools&quot;&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Much richer view of your props, including the contents of objects and arrays&lt;/li&gt;
&lt;li&gt;Custom components are emphasized, native components are de-emphasized&lt;/li&gt;
&lt;li&gt;Stateful components have a red collapser&lt;/li&gt;
&lt;li&gt;Improved keyboard navigation (hjkl or arrow keys)&lt;/li&gt;
&lt;li&gt;Selected component is available in the console as &lt;code&gt;$r&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Props that change highlight in green&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Right-click menu&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Scroll node into view&lt;/li&gt;
&lt;li&gt;Show the source for a component in the &amp;quot;Sources&amp;quot; pane&lt;/li&gt;
&lt;li&gt;Show the element in the &amp;quot;Elements&amp;quot; pane&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;searching&quot;&gt;&lt;/a&gt;Searching &lt;a class=&quot;hash-link&quot; href=&quot;#searching&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Select the search bar (or press &amp;quot;/&amp;quot;), and start searching for a component by
name.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/devtools-search.gif&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-side-pane&quot;&gt;&lt;/a&gt;The Side Pane &lt;a class=&quot;hash-link&quot; href=&quot;#the-side-pane&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Now shows the &lt;code&gt;context&lt;/code&gt; for a component&lt;/li&gt;
&lt;li&gt;Right-click to store a prop/state value as a global variable&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/devtools-side-pane.gif&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;how-do-i-install-it&quot;&gt;&lt;/a&gt;How do I install it? &lt;a class=&quot;hash-link&quot; href=&quot;#how-do-i-install-it&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;First, disable the Chrome web store version, or it will break things. Then
&lt;a href=&quot;https://github.com/facebook/react-devtools/releases&quot;&gt;download the .crx&lt;/a&gt; and
drag it into your &lt;code&gt;chrome://extensions&lt;/code&gt; page. If it&amp;#39;s not working to drag it
from the downloads bar, try opening your downloads folder and drag it from
there.&lt;/p&gt;
&lt;p&gt;Once we&amp;#39;ve determined that there aren&amp;#39;t any major regressions, we&amp;#39;ll update
the official web store version, and everyone will be automatically upgraded.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;also-firefox&quot;&gt;&lt;/a&gt;Also Firefox! &lt;a class=&quot;hash-link&quot; href=&quot;#also-firefox&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We also have an initial version of the devtools for Firefox, which you can
download from the same &lt;a href=&quot;https://github.com/facebook/react-devtools/releases&quot;&gt;release page&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;feedback-welcome&quot;&gt;&lt;/a&gt;Feedback welcome &lt;a class=&quot;hash-link&quot; href=&quot;#feedback-welcome&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Let us know what issues you run into
&lt;a href=&quot;https://github.com/facebook/react-devtools/issues&quot;&gt;on GitHub&lt;/a&gt;, and check out
&lt;a href=&quot;https://github.com/facebook/react-devtools/tree/devtools-next&quot;&gt;the README&lt;/a&gt;
for more info.&lt;/p&gt;
</description>
<pubDate>2015-08-03T00:00:00-07:00</pubDate>
<link>https://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html</link>
<guid isPermaLink="true">https://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html</guid>
</item>
<item>
<title>React v0.14 Beta 1</title>
<description>&lt;p&gt;This week, many people in the React community are at &lt;a href=&quot;https://www.react-europe.org/&quot;&gt;ReactEurope&lt;/a&gt; in the beautiful (and very warm) city of Paris, the second React conference that&amp;#39;s been held to date. At our last conference, we released the first beta of React 0.13, and we figured we&amp;#39;d do the same today with our first beta of React 0.14, giving you something to play with if you&amp;#39;re not at the conference or you&amp;#39;re looking for something to do on the way home.&lt;/p&gt;
@@ -422,197 +500,5 @@ Minified build for production: &lt;a href=&quot;https://fb.me/react-with-addons-
<guid isPermaLink="true">https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html</guid>
</item>
<item>
<title>Building The Facebook News Feed With Relay</title>
<description>&lt;p&gt;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&amp;#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&amp;#39;t already we recommend reading &lt;a href=&quot;/react/blog/2015/02/20/introducing-relay-and-graphql.html&quot;&gt;our introductory blog post&lt;/a&gt; or watching &lt;a href=&quot;https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU&quot;&gt;the conference talk&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re working hard to prepare GraphQL and Relay for public release. In the meantime, we&amp;#39;ll continue to provide information about what you can expect.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-relay-architecture&quot;&gt;&lt;/a&gt;The Relay Architecture &lt;a class=&quot;hash-link&quot; href=&quot;#the-relay-architecture&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The diagram below shows the main parts of the Relay architecture on the client and the server:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-architecture.png&quot; alt=&quot;Relay Architecture&quot; width=&quot;650&quot; /&gt;&lt;/p&gt;
&lt;p&gt;The main pieces are as follows:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Relay Components: React components annotated with declarative data descriptions.&lt;/li&gt;
&lt;li&gt;Actions: Descriptions of how data should change in response to user actions.&lt;/li&gt;
&lt;li&gt;Relay Store: A client-side data store that is fully managed by the framework.&lt;/li&gt;
&lt;li&gt;Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This post will focus on &lt;strong&gt;Relay components&lt;/strong&gt; that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;a-relay-application&quot;&gt;&lt;/a&gt;A Relay Application &lt;a class=&quot;hash-link&quot; href=&quot;#a-relay-application&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To see how components work and can be composed, let&amp;#39;s implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; that renders a list of &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; items. We&amp;#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:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/sample-newsfeed.png&quot; alt=&quot;Sample News Feed&quot; width=&quot;360&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-ltstorygt-begins&quot;&gt;&lt;/a&gt;The &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; Begins &lt;a class=&quot;hash-link&quot; href=&quot;#the-ltstorygt-begins&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The first step is a React &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; component that accepts a &lt;code&gt;story&lt;/code&gt; prop with the story&amp;#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.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Image&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;uri&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;author&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;profile_picture&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;uri&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;author&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Text&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Text&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/View&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;whats-the-ltstorygt&quot;&gt;&lt;/a&gt;What&amp;#39;s the &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;? &lt;a class=&quot;hash-link&quot; href=&quot;#whats-the-ltstorygt&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;queries&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* TODO */&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Before adding the GraphQL query, let&amp;#39;s look at the component hierarchy this creates:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-containers.png&quot; width=&quot;397&quot; alt=&quot;React Container Data Flow&quot; /&gt;&lt;/p&gt;
&lt;p&gt;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&amp;#39;ll add a GraphQL query for &lt;code&gt;story&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;queries&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;graphql&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;author&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;profile_picture&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;uri&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Queries use ES6 template literals tagged with the &lt;code&gt;graphql&lt;/code&gt; 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&amp;#39;s structure closely matches the object structure that we expected in &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;&amp;#39;s render function.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ltstorygts-on-demand&quot;&gt;&lt;/a&gt;&lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;s on Demand &lt;a class=&quot;hash-link&quot; href=&quot;#ltstorygts-on-demand&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We can render a Relay component by providing Relay with the component (&lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then &lt;code&gt;render()&lt;/code&gt; the component. The value of &lt;code&gt;props.story&lt;/code&gt; will be a plain JavaScript object such as the following:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;author&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Greg&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;profile_picture&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;uri&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;https://…&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;The first Relay blog post is up…&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Relay guarantees that all data required to render a component will be available before it is rendered. This means that &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; does not need to handle a loading state; the &lt;code&gt;story&lt;/code&gt; is &lt;em&gt;guaranteed&lt;/em&gt; to be available before &lt;code&gt;render()&lt;/code&gt; is called. We have found that this invariant simplifies our application code &lt;em&gt;and&lt;/em&gt; improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.&lt;/p&gt;
&lt;p&gt;The diagram below shows how Relay containers make data available to our React components:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-containers-data-flow.png&quot; width=&quot;650&quot; alt=&quot;Relay Container Data Flow&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ltnewsfeedgt-worthy&quot;&gt;&lt;/a&gt;&lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; Worthy &lt;a class=&quot;hash-link&quot; href=&quot;#ltnewsfeedgt-worthy&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Now that the &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; is over we can continue with the &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; component. Again, we&amp;#39;ll start with a React version:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;stories&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;viewer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;stories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// `viewer` is the active user&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;stories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;onClick&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{()&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Load&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;More&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Button&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/View&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// TODO: fetch more stories&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;all-the-news-fit-to-be-relayed&quot;&gt;&lt;/a&gt;All the News Fit to be Relayed &lt;a class=&quot;hash-link&quot; href=&quot;#all-the-news-fit-to-be-relayed&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; has two new requirements: it composes &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; and requests more data at runtime.&lt;/p&gt;
&lt;p&gt;Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: &lt;code&gt;${Component.getQuery(&amp;#39;prop&amp;#39;)}&lt;/code&gt;. Pagination can be accomplished with a query parameter, specified with &lt;code&gt;&amp;lt;param&amp;gt;&lt;/code&gt; (as in &lt;code&gt;stories(first: &amp;lt;count&amp;gt;)&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;queryParams&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* default to 3 stories */&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;queries&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;viewer&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;graphql&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Viewer&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;stories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* fetch viewer&amp;#39;s stories */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;edges&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* traverse the graph */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;node&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getQuery&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;story&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* compose child query */&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Whenever &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the &lt;code&gt;text&lt;/code&gt; and &lt;code&gt;author&lt;/code&gt; data will be fetched for each of the 3 story nodes.&lt;/p&gt;
&lt;p&gt;Query parameters are available to components as &lt;code&gt;props.queryParams&lt;/code&gt; and can be modified with &lt;code&gt;props.setQueryParams(nextParams)&lt;/code&gt;. We can use these to implement pagination:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// read current params&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;queryParams&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// update params&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setQueryParams&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;count&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now when &lt;code&gt;loadMore()&lt;/code&gt; 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 &lt;code&gt;props.viewer.stories&lt;/code&gt; and the updated count reflected in &lt;code&gt;props.queryParams.count&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;in-conclusion&quot;&gt;&lt;/a&gt;In Conclusion &lt;a class=&quot;hash-link&quot; href=&quot;#in-conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we&amp;#39;ve enabled the following benefits:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.&lt;/li&gt;
&lt;li&gt;Trivial pagination with automatic optimizations to fetch only the additional items.&lt;/li&gt;
&lt;li&gt;View composition and reusability, so that &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; can be used on its own or within &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt;, without any changes to either component.&lt;/li&gt;
&lt;li&gt;Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.&lt;/li&gt;
&lt;li&gt;Exactly &lt;em&gt;zero&lt;/em&gt; lines of imperative data fetching logic. Relay takes full advantage of React&amp;#39;s declarative component model.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;But Relay has many more tricks up its sleeve. For example, it&amp;#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.&lt;/p&gt;
</description>
<pubDate>2015-03-19T00:00:00-07:00</pubDate>
<link>https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</link>
<guid isPermaLink="true">https://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</guid>
</item>
</channel>
</rss>
img/blog/devtools-full.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

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