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

Community Roundup 16

Browse Source
This commit is contained in:
Paul O’Shannessy
2014-02-15 15:59:02 -08:00
parent 2d42e44128
commit 8ac8f35db4
42 changed files with 1040 additions and 724 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/05/why-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/12/community-roundup.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/19/community-roundup-2.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/21/react-v0-3-3.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/27/community-roundup-3.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/03/community-roundup-4.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/17/react-v0-4-0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/23/community-roundup-5.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/26/react-v0-4-1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/05/community-roundup-6.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/26/community-roundup-7.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/09/24/community-roundup-8.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/03/community-roundup-9.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/16/react-v0.5.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/29/react-v0-5-1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/05/thinking-in-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html" class="active">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/06/community-roundup-10.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html" class="active">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/18/community-roundup-11.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/18/react-v0.5.2-v0.4.2.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/19/react-v0.8.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/23/community-roundup-12.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/30/community-roundup-13.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/02/react-chrome-developer-tools.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/06/community-roundup-14.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html" class="active">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/05/community-roundup-15.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html" class="active">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/15/community-roundup-16.html
+191
View File
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Community Round-up #16</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Community Round-up #16" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<meta property="fb:app_id" content="623268441017527" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html" class="active">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></li>
<li><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></li>
<li><a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a></li>
<li><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></li>
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Community Round-up #16</h1>
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
<hr>
<div class="post">
<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week&#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.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">this</a> introduction to React Components. [<a href="http://www.youtube.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">part 1</a>], [<a href="http://www.youtube.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>&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 class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html"></div>
</div>
</section>
<footer class="wrap">
<div class="left">A Facebook &amp; Instagram collaboration.</div>
<div class="right">&copy; 2014 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
blog/all.html
+2
View File
@@ -61,6 +61,8 @@
<div class="inner-content">
<h1>All Posts</h1>
<p><strong><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></strong> on February 15, 2014 by Jonas Gebhardt</p>
<p><strong><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></strong> on February 5, 2014 by Jonas Gebhardt</p>
<p><strong><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></strong> on January 6, 2014 by Vjeux</p>
blog/index.html
+69 -84
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,73 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week&#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.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">this</a> introduction to React Components. [<a href="http://www.youtube.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">part 1</a>], [<a href="http://www.youtube.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>&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></h1>
<p class="meta">February 5, 2014 by Jonas Gebhardt</p>
@@ -394,88 +461,6 @@ rails s
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
<p class="meta">December 23, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href="/react/docs/getting-started.html">docs</a> and do not hesitate to ask questions on the <a href="http://groups.google.com/group/reactjs">Google Group</a>, <a href="irc://chat.freenode.net/reactjs">IRC</a> or <a href="http://stackoverflow.com/questions/tagged/reactjs">Stack Overflow</a>. We are trying our best to help you out!</p>
<h2><a class="anchor" name="the-future-of-javascript-mvc"></a>The Future of Javascript MVC <a class="hash-link" href="#the-future-of-javascript-mvc">#</a></h2>
<p><a href="http://swannodette.github.io/">David Nolen</a> announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient <a href="http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
<blockquote>
<p>We&#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="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/react/img/blog/om-backbone.png" alt=""></a></figure></p>
<p><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="scroll-position-with-react"></a>Scroll Position with React <a class="hash-link" href="#scroll-position-with-react">#</a></h2>
<p>Managing the scroll position when new content is inserted is usually very tricky to get right. <a href="http://blog.vjeux.com/">Vjeux</a> discovered that <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate">componentDidUpdate</a> were triggered exactly at the right time to manage the scroll position.</p>
<blockquote>
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
<div class="highlight"><pre><code class="text 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="http://facebook.github.io/react/docs/animation.html">TransitionGroup</a> to implement animations.
<figure><a href="http://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
<p><a href="http://chenglou.github.io/react-lights-out/">Try it out!</a></p>
<h2><a class="anchor" name="reactive-table-bookmarklet"></a>Reactive Table Bookmarklet <a class="hash-link" href="#reactive-table-bookmarklet">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> wrote a bookmarklet to process tables on the internet. It adds a little &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>
<iframe width="100%" height="300" src="http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p><a href="http://jsfiddle.net/ssorallen/fEsYt/">View the source on JSFiddle...</a></p>
<h2><a class="anchor" name="writing-good-react-components"></a>Writing Good React Components <a class="hash-link" href="#writing-good-react-components">#</a></h2>
<p><a href="http://blog.whn.se/">William Högman Rudenmalm</a> wrote an article on how to write good React components. This is full of good advice.</p>
<blockquote>
<p>The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.</p>
<p>The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.</p>
<p>You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.</p>
<p><a href="http://blog.whn.se/post/69621609605/writing-good-react-components">Read the full article ...</a></p>
</blockquote>
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
<div class="highlight"><pre><code class="text 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="http://facebook.github.io/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
<p><a href="http://facebook.github.io/react/jsx-compiler.html">Try it out!</a></p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p><center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#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="pagination">
blog/page2/index.html
+84 -149
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,88 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></h1>
<p class="meta">December 23, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the <a href="/react/docs/getting-started.html">docs</a> and do not hesitate to ask questions on the <a href="http://groups.google.com/group/reactjs">Google Group</a>, <a href="irc://chat.freenode.net/reactjs">IRC</a> or <a href="http://stackoverflow.com/questions/tagged/reactjs">Stack Overflow</a>. We are trying our best to help you out!</p>
<h2><a class="anchor" name="the-future-of-javascript-mvc"></a>The Future of Javascript MVC <a class="hash-link" href="#the-future-of-javascript-mvc">#</a></h2>
<p><a href="http://swannodette.github.io/">David Nolen</a> announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient <a href="http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate">shouldComponentUpdate</a> and get huge performance improvements on some tasks.</p>
<blockquote>
<p>We&#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="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="/react/img/blog/om-backbone.png" alt=""></a></figure></p>
<p><a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="scroll-position-with-react"></a>Scroll Position with React <a class="hash-link" href="#scroll-position-with-react">#</a></h2>
<p>Managing the scroll position when new content is inserted is usually very tricky to get right. <a href="http://blog.vjeux.com/">Vjeux</a> discovered that <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate">componentWillUpdate</a> and <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate">componentDidUpdate</a> were triggered exactly at the right time to manage the scroll position.</p>
<blockquote>
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
<div class="highlight"><pre><code class="text 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="http://facebook.github.io/react/docs/animation.html">TransitionGroup</a> to implement animations.
<figure><a href="http://chenglou.github.io/react-lights-out/"><img src="/react/img/blog/lights-out.png" alt=""></a></figure></p>
<p><a href="http://chenglou.github.io/react-lights-out/">Try it out!</a></p>
<h2><a class="anchor" name="reactive-table-bookmarklet"></a>Reactive Table Bookmarklet <a class="hash-link" href="#reactive-table-bookmarklet">#</a></h2>
<p><a href="http://www.phpied.com/">Stoyan Stefanov</a> wrote a bookmarklet to process tables on the internet. It adds a little &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>
<iframe width="100%" height="300" src="http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p><a href="http://jsfiddle.net/ssorallen/fEsYt/">View the source on JSFiddle...</a></p>
<h2><a class="anchor" name="writing-good-react-components"></a>Writing Good React Components <a class="hash-link" href="#writing-good-react-components">#</a></h2>
<p><a href="http://blog.whn.se/">William Högman Rudenmalm</a> wrote an article on how to write good React components. This is full of good advice.</p>
<blockquote>
<p>The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.</p>
<p>The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.</p>
<p>You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.</p>
<p><a href="http://blog.whn.se/post/69621609605/writing-good-react-components">Read the full article ...</a></p>
</blockquote>
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
<div class="highlight"><pre><code class="text 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="http://facebook.github.io/react/jsx-compiler.html"><img src="/react/img/blog/jsx-compiler.png" alt=""></a></figure></p>
<p><a href="http://facebook.github.io/react/jsx-compiler.html">Try it out!</a></p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<p><center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn&#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></h1>
<p class="meta">December 19, 2013 by Paul O'Shannessy</p>
@@ -355,153 +437,6 @@ Is this some sort of template language? Specifically no. This might have been th
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
<p class="meta">November 5, 2013 by Pete Hunt</p>
<hr />
<div class="post">
<p>React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It&#39;s scaled very well for us at Facebook and Instagram.</p>
<p>One of the many great parts of React is how it makes you think about apps as you build them. In this post I&#39;ll walk you through the thought process of building a searchable product data table using React.</p>
<h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="hash-link" href="#start-with-a-mock">#</a></h2>
<p>Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn&#39;t very good because the mock looks like this:</p>
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
<p>Our JSON API returns some data that looks like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">[
{category: &quot;Sporting Goods&quot;, price: &quot;$49.99&quot;, stocked: true, name: &quot;Football&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$9.99&quot;, stocked: true, name: &quot;Baseball&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$29.99&quot;, stocked: false, name: &quot;Basketball&quot;},
{category: &quot;Electronics&quot;, price: &quot;$99.99&quot;, stocked: true, name: &quot;iPod Touch&quot;},
{category: &quot;Electronics&quot;, price: &quot;$399.99&quot;, stocked: false, name: &quot;iPhone 5&quot;},
{category: &quot;Electronics&quot;, price: &quot;$199.99&quot;, stocked: true, name: &quot;Nexus 7&quot;}
];
</code></pre></div><h2><a class="anchor" name="step-1-break-the-ui-into-a-component-hierarchy"></a>Step 1: break the UI into a component hierarchy <a class="hash-link" href="#step-1-break-the-ui-into-a-component-hierarchy">#</a></h2>
<p>The first thing you&#39;ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you&#39;re working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</p>
<p>But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">single responsibility principle</a>, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.</p>
<p>Since you&#39;re often displaying a JSON data model to a user, you&#39;ll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That&#39;s because user interfaces and data models tend to adhere to the same <em>information architecture</em> which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.</p>
<p><img src="/react/img/blog/thinking-in-react-components.png" alt="Component diagram"></p>
<p>You&#39;ll see here that we have five components in our simple app. I&#39;ve italicized the data each component represents.</p>
<ol>
<li><strong><code>FilterableProductTable</code> (orange):</strong> contains the entirety of the example</li>
<li><strong><code>SearchBar</code> (blue):</strong> receives all <em>user input</em></li>
<li><strong><code>ProductTable</code> (green):</strong> displays and filters the <em>data collection</em> based on <em>user input</em></li>
<li><strong><code>ProductCategoryRow</code> (turquoise):</strong> displays a heading for each <em>category</em></li>
<li><strong><code>ProductRow</code> (red):</strong> displays a row for each <em>product</em></li>
</ol>
<p>If you look at <code>ProductTable</code> you&#39;ll see that the table header (containing the &quot;Name&quot; and &quot;Price&quot; labels) isn&#39;t its own component. This is a matter of preference and there&#39;s an argument to be made either way. For this example I left it as part of <code>ProductTable</code> because it is part of rendering the <em>data collection</em> which is <code>ProductTable</code>&#39;s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own <code>ProductTableHeader</code> component.</p>
<p>Now that we&#39;ve identified the components in our mock, let&#39;s arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:</p>
<ul>
<li><code>FilterableProductTable</code>
<ul>
<li><code>SearchBar</code></li>
<li><code>ProductTable</code>
<ul>
<li><code>ProductCategoryRow</code></li>
<li><code>ProductRow</code></li>
</ul></li>
</ul></li>
</ul>
<h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Now that you have your component hierarchy it&#39;s time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It&#39;s easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We&#39;ll see why.</p>
<p>To build a static version of your app that renders your data model you&#39;ll want to build components that reuse other components and pass data using <em>props</em>. <em>props</em> are a way of passing data from parent to child. If you&#39;re familiar with the concept of <em>state</em>, <strong>don&#39;t use state at all</strong> to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don&#39;t need it.</p>
<p>You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with <code>FilterableProductTable</code>) or with the ones lower in it (<code>ProductRow</code>). In simpler examples it&#39;s usually easier to go top-down and on larger projects it&#39;s easier to go bottom-up and write tests as you build.</p>
<p>At the end of this step you&#39;ll have a library of reusable components that render your data model. The components will only have <code>render()</code> methods since this is a static version of your app. The component at the top of the hierarchy (<code>FilterableProductTable</code>) will take your data model as a prop. If you make a change to your underlying data model and call <code>renderComponent()</code> again the UI will be updated. It&#39;s easy to see how your UI is updated and where to make changes since there&#39;s nothing complicated going on since React&#39;s <strong>one-way data flow</strong> (also called <em>one-way binding</em>) keeps everything modular, easy to reason about, and fast.</p>
<p>Simply refer to the <a href="http://facebook.github.io/react/docs/">React docs</a> if you need help executing this step.</p>
<h3><a class="anchor" name="a-brief-interlude-props-vs-state"></a>A brief interlude: props vs state <a class="hash-link" href="#a-brief-interlude-props-vs-state">#</a></h3>
<p>There are two types of &quot;model&quot; data in React: props and state. It&#39;s important to understand the distinction between the two; skim <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html">the official React docs</a> if you aren&#39;t sure what the difference is.</p>
<h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representation-of-ui-state"></a>Step 3: Identify the minimal (but complete) representation of UI state <a class="hash-link" href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">#</a></h2>
<p>To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with <strong>state</strong>.</p>
<p>To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: <em>Don&#39;t Repeat Yourself</em>. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you&#39;re building a TODO list, just keep an array of the TODO items around; don&#39;t keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.</p>
<p>Think of all of the pieces of data in our example application. We have:</p>
<ul>
<li>The original list of products</li>
<li>The search text the user has entered</li>
<li>The value of the checkbox</li>
<li>The filtered list of products</li>
</ul>
<p>Let&#39;s go through each one and figure out which one is state. Simply ask three questions about each piece of data:</p>
<ol>
<li>Is it passed in from a parent via props? If so, it probably isn&#39;t state.</li>
<li>Does it change over time? If not, it probably isn&#39;t state.</li>
<li>Can you compute it based on any other state or props in your component? If so, it&#39;s not state.</li>
</ol>
<p>The original list of products is passed in as props, so that&#39;s not state. The search text and the checkbox seem to be state since they change over time and can&#39;t be computed from anything. And finally, the filtered list of products isn&#39;t state because it can be computed by combining the original list of products with the search text and value of the checkbox.</p>
<p>So finally, our state is:</p>
<ul>
<li>The search text the user has entered</li>
<li>The value of the checkbox</li>
</ul>
<h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>OK, so we&#39;ve identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
<p>Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. <strong>This is often the most challenging part for newcomers to understand,</strong> so follow these steps to figure it out:</p>
<p>For each piece of state in your application:</p>
<ul>
<li>Identify every component that renders something based on that state.</li>
<li>Find a common owner component (a single component above all the components that need the state in the hierarchy).</li>
<li>Either the common owner or another component higher up in the hierarchy should own the state.</li>
<li>If you can&#39;t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</li>
</ul>
<p>Let&#39;s run through this strategy for our application:</p>
<ul>
<li><code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state.</li>
<li>The common owner component is <code>FilterableProductTable</code>.</li>
<li>It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></li>
</ul>
<p>Cool, so we&#39;ve decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: &#39;&#39;, inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>
<p>You can start seeing how your application will behave: set <code>filterText</code> to <code>&quot;ball&quot;</code> and refresh your app. You&#39;ll see the data table is updated correctly.</p>
<h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>So far we&#39;ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it&#39;s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
<p>React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called <code>ReactLink</code> to make this pattern as convenient as two-way binding, but for the purpose of this post we&#39;ll keep everything explicit.</p>
<p>If you try to type or check the box in the current version of the example you&#39;ll see that React ignores your input. This is intentional, as we&#39;ve set the <code>value</code> prop of the <code>input</code> to always be equal to the <code>state</code> passed in from <code>FilterableProductTable</code>.</p>
<p>Let&#39;s think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, <code>FilterableProductTable</code> will pass a callback to <code>SearchBar</code> that will fire whenever the state should be updated. We can use the <code>onChange</code> event on the inputs to be notified of it. And the callback passed by <code>FilterableProductTable</code> will call <code>setState()</code> and the app will be updated.</p>
<p>Though this sounds like a lot it&#39;s really just a few lines of code. And it&#39;s really explicit how your data is flowing throughout the app.</p>
<h2><a class="anchor" name="and-thats-it"></a>And that&#39;s it <a class="hash-link" href="#and-thats-it">#</a></h2>
<p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you&#39;re used to, remember that code is read far more than it&#39;s written, and it&#39;s extremely easy to read this modular, explicit code. As you start to build large libraries of components you&#39;ll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
</div>
</div>
<div class="pagination">
blog/page3/index.html
+149 -84
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,153 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></h1>
<p class="meta">November 5, 2013 by Pete Hunt</p>
<hr />
<div class="post">
<p>React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It&#39;s scaled very well for us at Facebook and Instagram.</p>
<p>One of the many great parts of React is how it makes you think about apps as you build them. In this post I&#39;ll walk you through the thought process of building a searchable product data table using React.</p>
<h2><a class="anchor" name="start-with-a-mock"></a>Start with a mock <a class="hash-link" href="#start-with-a-mock">#</a></h2>
<p>Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn&#39;t very good because the mock looks like this:</p>
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
<p>Our JSON API returns some data that looks like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">[
{category: &quot;Sporting Goods&quot;, price: &quot;$49.99&quot;, stocked: true, name: &quot;Football&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$9.99&quot;, stocked: true, name: &quot;Baseball&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$29.99&quot;, stocked: false, name: &quot;Basketball&quot;},
{category: &quot;Electronics&quot;, price: &quot;$99.99&quot;, stocked: true, name: &quot;iPod Touch&quot;},
{category: &quot;Electronics&quot;, price: &quot;$399.99&quot;, stocked: false, name: &quot;iPhone 5&quot;},
{category: &quot;Electronics&quot;, price: &quot;$199.99&quot;, stocked: true, name: &quot;Nexus 7&quot;}
];
</code></pre></div><h2><a class="anchor" name="step-1-break-the-ui-into-a-component-hierarchy"></a>Step 1: break the UI into a component hierarchy <a class="hash-link" href="#step-1-break-the-ui-into-a-component-hierarchy">#</a></h2>
<p>The first thing you&#39;ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you&#39;re working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!</p>
<p>But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">single responsibility principle</a>, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.</p>
<p>Since you&#39;re often displaying a JSON data model to a user, you&#39;ll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That&#39;s because user interfaces and data models tend to adhere to the same <em>information architecture</em> which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.</p>
<p><img src="/react/img/blog/thinking-in-react-components.png" alt="Component diagram"></p>
<p>You&#39;ll see here that we have five components in our simple app. I&#39;ve italicized the data each component represents.</p>
<ol>
<li><strong><code>FilterableProductTable</code> (orange):</strong> contains the entirety of the example</li>
<li><strong><code>SearchBar</code> (blue):</strong> receives all <em>user input</em></li>
<li><strong><code>ProductTable</code> (green):</strong> displays and filters the <em>data collection</em> based on <em>user input</em></li>
<li><strong><code>ProductCategoryRow</code> (turquoise):</strong> displays a heading for each <em>category</em></li>
<li><strong><code>ProductRow</code> (red):</strong> displays a row for each <em>product</em></li>
</ol>
<p>If you look at <code>ProductTable</code> you&#39;ll see that the table header (containing the &quot;Name&quot; and &quot;Price&quot; labels) isn&#39;t its own component. This is a matter of preference and there&#39;s an argument to be made either way. For this example I left it as part of <code>ProductTable</code> because it is part of rendering the <em>data collection</em> which is <code>ProductTable</code>&#39;s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own <code>ProductTableHeader</code> component.</p>
<p>Now that we&#39;ve identified the components in our mock, let&#39;s arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:</p>
<ul>
<li><code>FilterableProductTable</code>
<ul>
<li><code>SearchBar</code></li>
<li><code>ProductTable</code>
<ul>
<li><code>ProductCategoryRow</code></li>
<li><code>ProductRow</code></li>
</ul></li>
</ul></li>
</ul>
<h2><a class="anchor" name="step-2-build-a-static-version-in-react"></a>Step 2: Build a static version in React <a class="hash-link" href="#step-2-build-a-static-version-in-react">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Now that you have your component hierarchy it&#39;s time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It&#39;s easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We&#39;ll see why.</p>
<p>To build a static version of your app that renders your data model you&#39;ll want to build components that reuse other components and pass data using <em>props</em>. <em>props</em> are a way of passing data from parent to child. If you&#39;re familiar with the concept of <em>state</em>, <strong>don&#39;t use state at all</strong> to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don&#39;t need it.</p>
<p>You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with <code>FilterableProductTable</code>) or with the ones lower in it (<code>ProductRow</code>). In simpler examples it&#39;s usually easier to go top-down and on larger projects it&#39;s easier to go bottom-up and write tests as you build.</p>
<p>At the end of this step you&#39;ll have a library of reusable components that render your data model. The components will only have <code>render()</code> methods since this is a static version of your app. The component at the top of the hierarchy (<code>FilterableProductTable</code>) will take your data model as a prop. If you make a change to your underlying data model and call <code>renderComponent()</code> again the UI will be updated. It&#39;s easy to see how your UI is updated and where to make changes since there&#39;s nothing complicated going on since React&#39;s <strong>one-way data flow</strong> (also called <em>one-way binding</em>) keeps everything modular, easy to reason about, and fast.</p>
<p>Simply refer to the <a href="http://facebook.github.io/react/docs/">React docs</a> if you need help executing this step.</p>
<h3><a class="anchor" name="a-brief-interlude-props-vs-state"></a>A brief interlude: props vs state <a class="hash-link" href="#a-brief-interlude-props-vs-state">#</a></h3>
<p>There are two types of &quot;model&quot; data in React: props and state. It&#39;s important to understand the distinction between the two; skim <a href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html">the official React docs</a> if you aren&#39;t sure what the difference is.</p>
<h2><a class="anchor" name="step-3-identify-the-minimal-but-complete-representation-of-ui-state"></a>Step 3: Identify the minimal (but complete) representation of UI state <a class="hash-link" href="#step-3-identify-the-minimal-but-complete-representation-of-ui-state">#</a></h2>
<p>To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with <strong>state</strong>.</p>
<p>To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: <em>Don&#39;t Repeat Yourself</em>. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you&#39;re building a TODO list, just keep an array of the TODO items around; don&#39;t keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.</p>
<p>Think of all of the pieces of data in our example application. We have:</p>
<ul>
<li>The original list of products</li>
<li>The search text the user has entered</li>
<li>The value of the checkbox</li>
<li>The filtered list of products</li>
</ul>
<p>Let&#39;s go through each one and figure out which one is state. Simply ask three questions about each piece of data:</p>
<ol>
<li>Is it passed in from a parent via props? If so, it probably isn&#39;t state.</li>
<li>Does it change over time? If not, it probably isn&#39;t state.</li>
<li>Can you compute it based on any other state or props in your component? If so, it&#39;s not state.</li>
</ol>
<p>The original list of products is passed in as props, so that&#39;s not state. The search text and the checkbox seem to be state since they change over time and can&#39;t be computed from anything. And finally, the filtered list of products isn&#39;t state because it can be computed by combining the original list of products with the search text and value of the checkbox.</p>
<p>So finally, our state is:</p>
<ul>
<li>The search text the user has entered</li>
<li>The value of the checkbox</li>
</ul>
<h2><a class="anchor" name="step-4-identify-where-your-state-should-live"></a>Step 4: Identify where your state should live <a class="hash-link" href="#step-4-identify-where-your-state-should-live">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>OK, so we&#39;ve identified what the minimal set of app state is. Next we need to identify which component mutates, or <em>owns</em>, this state.</p>
<p>Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. <strong>This is often the most challenging part for newcomers to understand,</strong> so follow these steps to figure it out:</p>
<p>For each piece of state in your application:</p>
<ul>
<li>Identify every component that renders something based on that state.</li>
<li>Find a common owner component (a single component above all the components that need the state in the hierarchy).</li>
<li>Either the common owner or another component higher up in the hierarchy should own the state.</li>
<li>If you can&#39;t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.</li>
</ul>
<p>Let&#39;s run through this strategy for our application:</p>
<ul>
<li><code>ProductTable</code> needs to filter the product list based on state and <code>SearchBar</code> needs to display the search text and checked state.</li>
<li>The common owner component is <code>FilterableProductTable</code>.</li>
<li>It conceptually makes sense for the filter text and checked value to live in <code>FilterableProductTable</code></li>
</ul>
<p>Cool, so we&#39;ve decided that our state lives in <code>FilterableProductTable</code>. First, add a <code>getInitialState()</code> method to <code>FilterableProductTable</code> that returns <code>{filterText: &#39;&#39;, inStockOnly: false}</code> to reflect the initial state of your application. Then pass <code>filterText</code> and <code>inStockOnly</code> to <code>ProductTable</code> and <code>SearchBar</code> as a prop. Finally, use these props to filter the rows in <code>ProductTable</code> and set the values of the form fields in <code>SearchBar</code>.</p>
<p>You can start seeing how your application will behave: set <code>filterText</code> to <code>&quot;ball&quot;</code> and refresh your app. You&#39;ll see the data table is updated correctly.</p>
<h2><a class="anchor" name="step-5-add-inverse-data-flow"></a>Step 5: Add inverse data flow <a class="hash-link" href="#step-5-add-inverse-data-flow">#</a></h2>
<iframe width="100%" height="300" src="http://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>So far we&#39;ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it&#39;s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in <code>FilterableProductTable</code>.</p>
<p>React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called <code>ReactLink</code> to make this pattern as convenient as two-way binding, but for the purpose of this post we&#39;ll keep everything explicit.</p>
<p>If you try to type or check the box in the current version of the example you&#39;ll see that React ignores your input. This is intentional, as we&#39;ve set the <code>value</code> prop of the <code>input</code> to always be equal to the <code>state</code> passed in from <code>FilterableProductTable</code>.</p>
<p>Let&#39;s think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, <code>FilterableProductTable</code> will pass a callback to <code>SearchBar</code> that will fire whenever the state should be updated. We can use the <code>onChange</code> event on the inputs to be notified of it. And the callback passed by <code>FilterableProductTable</code> will call <code>setState()</code> and the app will be updated.</p>
<p>Though this sounds like a lot it&#39;s really just a few lines of code. And it&#39;s really explicit how your data is flowing throughout the app.</p>
<h2><a class="anchor" name="and-thats-it"></a>And that&#39;s it <a class="hash-link" href="#and-thats-it">#</a></h2>
<p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you&#39;re used to, remember that code is read far more than it&#39;s written, and it&#39;s extremely easy to read this modular, explicit code. As you start to build large libraries of components you&#39;ll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></h1>
<p class="meta">October 29, 2013 by Paul O'Shannessy</p>
@@ -309,88 +456,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
<p class="meta">August 26, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>It&#39;s been three months since we open sourced React and it is going well. Some stats so far:</p>
<ul>
<li>114 285 unique visitors on this website</li>
<li><a href="https://github.com/facebook/react/stargazers">1933 stars</a> and <a href="https://github.com/facebook/react/network/members">210 forks</a></li>
<li><a href="https://groups.google.com/forum/#!forum/reactjs">226 posts on Google Group</a></li>
<li><a href="https://gist.github.com/vjeux/6335762">76 Github projects using React</a></li>
<li><a href="https://github.com/facebook/react/graphs/contributors">30 contributors</a></li>
<li><a href="http://facebook.github.io/react/blog/">15 blog posts</a></li>
<li>2 early adopters: <a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Khan Academy</a> and <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a></li>
</ul>
<h2><a class="anchor" name="wolfenstein-rendering-engine-ported-to-react"></a>Wolfenstein Rendering Engine Ported to React <a class="hash-link" href="#wolfenstein-rendering-engine-ported-to-react">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> ported the render code of the web version of Wolfenstein 3D to React. Check out <a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html">the demo</a> and <a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">render.js</a> file for the implementation.
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></figure></p>
<h2><a class="anchor" name="react-amp-meteor"></a>React &amp; Meteor <a class="hash-link" href="#react-amp-meteor">#</a></h2>
<p><a href="https://twitter.com/benjamn">Ben Newman</a> made a <a href="https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js">13-lines wrapper</a> to use React and Meteor together. <a href="http://www.meteor.com/">Meteor</a> handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.</p>
<blockquote>
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="nx">Session</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">)</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">foo</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.</p>
<p><a href="https://github.com/benjamn/meteor-react">Read more ...</a></p>
</blockquote>
<h2><a class="anchor" name="react-page"></a>React Page <a class="hash-link" href="#react-page">#</a></h2>
<p><a href="https://github.com/jordwalke">Jordan Walke</a> implemented a complete React project creator called <a href="https://github.com/facebook/react-page/">react-page</a>. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.</p>
<blockquote>
<p>Easy Application Development with React JavaScript
<figure><a href="https://github.com/facebook/react-page/"><img src="/react/img/blog/react-page.png" alt=""></a></figure></p>
<p><strong>Why Server Rendering?</strong></p>
<ul>
<li>Faster initial page speed:
<ul>
<li>Markup displayed before downloading large JavaScript.</li>
<li>Markup can be generated more quickly on a fast server than low power client devices.</li>
</ul></li>
<li>Faster Development and Prototyping:
<ul>
<li>Instantly refresh your app without waiting for any watch scripts or bundlers.</li>
</ul></li>
<li>Easy deployment of static content pages/blogs: just archive using recursive wget.</li>
<li>SEO benefits of indexability and perf.</li>
</ul>
<p><strong>How Does Server Rendering Work?</strong></p>
<ul>
<li><code>react-page</code> computes page markup on the server, sends it to the client so the user can see it quickly.</li>
<li>The corresponding JavaScript is then packaged and sent.</li>
<li>The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.</li>
<li>From the developer&#39;s (and the user&#39;s) perspective, it&#39;s just as if the rendering occurred on the client, only faster.</li>
</ul>
<p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
</blockquote>
</div>
</div>
<div class="pagination">
blog/page4/index.html
+84 -100
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,88 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></h1>
<p class="meta">August 26, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>It&#39;s been three months since we open sourced React and it is going well. Some stats so far:</p>
<ul>
<li>114 285 unique visitors on this website</li>
<li><a href="https://github.com/facebook/react/stargazers">1933 stars</a> and <a href="https://github.com/facebook/react/network/members">210 forks</a></li>
<li><a href="https://groups.google.com/forum/#!forum/reactjs">226 posts on Google Group</a></li>
<li><a href="https://gist.github.com/vjeux/6335762">76 Github projects using React</a></li>
<li><a href="https://github.com/facebook/react/graphs/contributors">30 contributors</a></li>
<li><a href="http://facebook.github.io/react/blog/">15 blog posts</a></li>
<li>2 early adopters: <a href="http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html">Khan Academy</a> and <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a></li>
</ul>
<h2><a class="anchor" name="wolfenstein-rendering-engine-ported-to-react"></a>Wolfenstein Rendering Engine Ported to React <a class="hash-link" href="#wolfenstein-rendering-engine-ported-to-react">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> ported the render code of the web version of Wolfenstein 3D to React. Check out <a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html">the demo</a> and <a href="https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183">render.js</a> file for the implementation.
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="/react/img/blog/wolfenstein_react.png" alt=""></a></figure></p>
<h2><a class="anchor" name="react-amp-meteor"></a>React &amp; Meteor <a class="hash-link" href="#react-amp-meteor">#</a></h2>
<p><a href="https://twitter.com/benjamn">Ben Newman</a> made a <a href="https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js">13-lines wrapper</a> to use React and Meteor together. <a href="http://www.meteor.com/">Meteor</a> handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.</p>
<blockquote>
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="nx">Session</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;foo&#39;</span><span class="p">)</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">foo</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.</p>
<p><a href="https://github.com/benjamn/meteor-react">Read more ...</a></p>
</blockquote>
<h2><a class="anchor" name="react-page"></a>React Page <a class="hash-link" href="#react-page">#</a></h2>
<p><a href="https://github.com/jordwalke">Jordan Walke</a> implemented a complete React project creator called <a href="https://github.com/facebook/react-page/">react-page</a>. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.</p>
<blockquote>
<p>Easy Application Development with React JavaScript
<figure><a href="https://github.com/facebook/react-page/"><img src="/react/img/blog/react-page.png" alt=""></a></figure></p>
<p><strong>Why Server Rendering?</strong></p>
<ul>
<li>Faster initial page speed:
<ul>
<li>Markup displayed before downloading large JavaScript.</li>
<li>Markup can be generated more quickly on a fast server than low power client devices.</li>
</ul></li>
<li>Faster Development and Prototyping:
<ul>
<li>Instantly refresh your app without waiting for any watch scripts or bundlers.</li>
</ul></li>
<li>Easy deployment of static content pages/blogs: just archive using recursive wget.</li>
<li>SEO benefits of indexability and perf.</li>
</ul>
<p><strong>How Does Server Rendering Work?</strong></p>
<ul>
<li><code>react-page</code> computes page markup on the server, sends it to the client so the user can see it quickly.</li>
<li>The corresponding JavaScript is then packaged and sent.</li>
<li>The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.</li>
<li>From the developer&#39;s (and the user&#39;s) perspective, it&#39;s just as if the rendering occurred on the client, only faster.</li>
</ul>
<p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
</blockquote>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></h1>
<p class="meta">August 19, 2013 by Kunal Mehta</p>
@@ -266,104 +348,6 @@
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
<p class="meta">July 23, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>We launched the <a href="https://www.facebook.com/react">React Facebook Page</a> along with the React v0.4 launch. 700 people already liked it to get updated on the project :)</p>
<h2><a class="anchor" name="cross-browser-onchange"></a>Cross-browser onChange <a class="hash-link" href="#cross-browser-onchange">#</a></h2>
<p><a href="http://benalpert.com/">Ben Alpert</a> from <a href="https://www.khanacademy.org/">Khan Academy</a> worked on a cross-browser implementation of <code>onChange</code> event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.</p>
<blockquote>
<p>First off, what is the input event? If you have an <code>&lt;input&gt;</code> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn&#39;t catch input that doesn&#39;t involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.</p>
<p>Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using <code>setTimeout(fn, 0)</code> or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn&#39;t change at all (such as when pressing the arrow keys).</p>
<p><a href="http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="react-samples"></a>React Samples <a class="hash-link" href="#react-samples">#</a></h2>
<p>Learning a new library is always easier when you have working examples you can play with. <a href="https://github.com/jhw">jwh</a> put many of them on his <a href="https://github.com/jhw/react-samples">react-samples Github repo</a>.</p>
<blockquote>
<p>Some simple examples with Facebook&#39;s React framework</p>
<ul>
<li>Bootstrap action bar, modal and table <a href="https://rawgithub.com/jhw/react-samples/master/html/actionbar.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html">#4</a></li>
<li>Comments <a href="https://rawgithub.com/jhw/react-samples/master/html/comments1.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/comments2.html">#2</a></li>
<li>Data Table <a href="https://rawgithub.com/jhw/react-samples/master/html/datatable.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable4.html">#4</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable5.html">#5</a></li>
<li>Filter Bar <a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html">#4</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html">#5</a></li>
<li>Fundoo Rating <a href="https://rawgithub.com/jhw/react-samples/master/html/fundoo.html">#1</a></li>
<li>Line Char: <a href="https://rawgithub.com/jhw/react-samples/master/html/linechart.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/linechart2.html">#2</a></li>
<li>Multi tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/multitabs.html">#1</a></li>
<li>Select <a href="https://rawgithub.com/jhw/react-samples/master/html/select.html">#1</a></li>
<li>Simple Tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html">#4</a></li>
<li>Toggle <a href="https://rawgithub.com/jhw/react-samples/master/html/toggle.html">#1</a></li>
</ul>
</blockquote>
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">&quot;No result&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Facebook&quot;</span><span class="o">&gt;</span><span class="nx">Facebook</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span><span class="o">&gt;</span><span class="nx">Harvest</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="err">/Chosen&gt;</span>
<span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="jsx-and-es6-template-strings"></a>JSX and ES6 Template Strings <a class="hash-link" href="#jsx-and-es6-template-strings">#</a></h2>
<p><a href="http://domenicdenicola.com/">Domenic Denicola</a> wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.</p>
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
<h2><a class="anchor" name="react-presentation"></a>React Presentation <a class="hash-link" href="#react-presentation">#</a></h2>
<p><a href="http://tomocchino.com/">Tom Occhino</a> and <a href="https://github.com/jordwalke">Jordan Walke</a>, React developers, did a presentation of React at Facebook Seattle&#39;s office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&amp;A. I highly recommend you watching this video.</p>
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="docs"></a>Docs <a class="hash-link" href="#docs">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.</p>
<blockquote>
<p>Guides</p>
<ul>
<li><a href="/react/docs/why-react.html">Why React?</a></li>
<li><a href="/react/docs/displaying-data.html">Displaying Data</a>
<ul>
<li><a href="/react/docs/jsx-in-depth.html">JSX in Depth</a></li>
<li><a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a></li>
</ul></li>
<li><a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a></li>
<li><a href="/react/docs/multiple-components.html">Multiple Components</a></li>
<li><a href="/react/docs/reusable-components.html">Reusable Components</a></li>
<li><a href="/react/docs/forms.html">Forms</a></li>
<li><a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
<ul>
<li><a href="/react/docs/more-about-refs.html">More About Refs</a></li>
</ul></li>
<li><a href="/react/docs/tooling-integration.html">Tooling integration</a></li>
<li><a href="/react/docs/top-level-api.html">Reference</a></li>
</ul>
</blockquote>
</div>
</div>
<div class="pagination">
blog/page5/index.html
+100 -85
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,104 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></h1>
<p class="meta">July 23, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>We launched the <a href="https://www.facebook.com/react">React Facebook Page</a> along with the React v0.4 launch. 700 people already liked it to get updated on the project :)</p>
<h2><a class="anchor" name="cross-browser-onchange"></a>Cross-browser onChange <a class="hash-link" href="#cross-browser-onchange">#</a></h2>
<p><a href="http://benalpert.com/">Ben Alpert</a> from <a href="https://www.khanacademy.org/">Khan Academy</a> worked on a cross-browser implementation of <code>onChange</code> event that landed in v0.4. He wrote a blog post explaining the various browser quirks he had to deal with.</p>
<blockquote>
<p>First off, what is the input event? If you have an <code>&lt;input&gt;</code> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn&#39;t catch input that doesn&#39;t involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.</p>
<p>Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using <code>setTimeout(fn, 0)</code> or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn&#39;t change at all (such as when pressing the arrow keys).</p>
<p><a href="http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="react-samples"></a>React Samples <a class="hash-link" href="#react-samples">#</a></h2>
<p>Learning a new library is always easier when you have working examples you can play with. <a href="https://github.com/jhw">jwh</a> put many of them on his <a href="https://github.com/jhw/react-samples">react-samples Github repo</a>.</p>
<blockquote>
<p>Some simple examples with Facebook&#39;s React framework</p>
<ul>
<li>Bootstrap action bar, modal and table <a href="https://rawgithub.com/jhw/react-samples/master/html/actionbar.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html">#4</a></li>
<li>Comments <a href="https://rawgithub.com/jhw/react-samples/master/html/comments1.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/comments2.html">#2</a></li>
<li>Data Table <a href="https://rawgithub.com/jhw/react-samples/master/html/datatable.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable4.html">#4</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/datatable5.html">#5</a></li>
<li>Filter Bar <a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html">#4</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html">#5</a></li>
<li>Fundoo Rating <a href="https://rawgithub.com/jhw/react-samples/master/html/fundoo.html">#1</a></li>
<li>Line Char: <a href="https://rawgithub.com/jhw/react-samples/master/html/linechart.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/linechart2.html">#2</a></li>
<li>Multi tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/multitabs.html">#1</a></li>
<li>Select <a href="https://rawgithub.com/jhw/react-samples/master/html/select.html">#1</a></li>
<li>Simple Tabs <a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html">#1</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html">#2</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html">#3</a>,
<a href="https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html">#4</a></li>
<li>Toggle <a href="https://rawgithub.com/jhw/react-samples/master/html/toggle.html">#1</a></li>
</ul>
</blockquote>
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">&quot;No result&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Facebook&quot;</span><span class="o">&gt;</span><span class="nx">Facebook</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span><span class="o">&gt;</span><span class="nx">Harvest</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="err">/Chosen&gt;</span>
<span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="jsx-and-es6-template-strings"></a>JSX and ES6 Template Strings <a class="hash-link" href="#jsx-and-es6-template-strings">#</a></h2>
<p><a href="http://domenicdenicola.com/">Domenic Denicola</a> wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.</p>
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
<h2><a class="anchor" name="react-presentation"></a>React Presentation <a class="hash-link" href="#react-presentation">#</a></h2>
<p><a href="http://tomocchino.com/">Tom Occhino</a> and <a href="https://github.com/jordwalke">Jordan Walke</a>, React developers, did a presentation of React at Facebook Seattle&#39;s office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&amp;A. I highly recommend you watching this video.</p>
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="docs"></a>Docs <a class="hash-link" href="#docs">#</a></h2>
<p><a href="http://www.petehunt.net/">Pete Hunt</a> rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.</p>
<blockquote>
<p>Guides</p>
<ul>
<li><a href="/react/docs/why-react.html">Why React?</a></li>
<li><a href="/react/docs/displaying-data.html">Displaying Data</a>
<ul>
<li><a href="/react/docs/jsx-in-depth.html">JSX in Depth</a></li>
<li><a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a></li>
</ul></li>
<li><a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a></li>
<li><a href="/react/docs/multiple-components.html">Multiple Components</a></li>
<li><a href="/react/docs/reusable-components.html">Reusable Components</a></li>
<li><a href="/react/docs/forms.html">Forms</a></li>
<li><a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
<ul>
<li><a href="/react/docs/more-about-refs.html">More About Refs</a></li>
</ul></li>
<li><a href="/react/docs/tooling-integration.html">Tooling integration</a></li>
<li><a href="/react/docs/top-level-api.html">Reference</a></li>
</ul>
</blockquote>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></h1>
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
@@ -291,89 +389,6 @@ If you were using React without JSX previously, your code should still work.</li
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
<p class="meta">June 27, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.</p>
<h2><a class="anchor" name="moving-from-backbone-to-react"></a>Moving From Backbone To React <a class="hash-link" href="#moving-from-backbone-to-react">#</a></h2>
<p><a href="http://twitter.com/clayallsopp">Clay Allsopp</a> successfully ported <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a>, a fairly big, interaction-heavy JavaScript app, to React.</p>
<blockquote>
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/"><img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" /></a>Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn&#39;t automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they&#39;re all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.</p>
<p>React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The &quot;elements&quot; you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]</p>
<p>We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it&#39;s allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn&#39;t require you to drop-everything-and-refactor like a move to Ember or Angular would demand.</p>
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="grunt-task-for-jsx"></a>Grunt Task for JSX <a class="hash-link" href="#grunt-task-for-jsx">#</a></h2>
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> wrote a task for <a href="http://gruntjs.com/">Grunt</a> that applies the JSX transformation to your Javascript files. It also works with <a href="http://browserify.org/">Browserify</a> if you want all your files to be concatenated and minified together.</p>
<blockquote>
<p>Grunt task for compiling Facebook React&#39;s .jsx templates into .js</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">&#39;js&#39;</span> <span class="p">},</span>
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;path/to/output/dir&#39;</span><span class="o">:</span> <span class="s1">&#39;path/to/jsx/templates/dir&#39;</span> <span class="p">}</span>
</code></pre></div>
<p>It also works great with <code>grunt-browserify</code>!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;grunt-react&#39;</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
<span class="p">},</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">src</span><span class="o">:</span> <span class="s1">&#39;path/to/source/main.js&#39;</span><span class="p">,</span>
<span class="nx">dest</span><span class="o">:</span> <span class="s1">&#39;path/to/target/output.js&#39;</span>
</code></pre></div>
<p><a href="https://github.com/ericclemmons/grunt-react">Check out the project ...</a></p>
</blockquote>
<h2><a class="anchor" name="backbonehandlebars-nested-views"></a>Backbone/Handlebars Nested Views <a class="hash-link" href="#backbonehandlebars-nested-views">#</a></h2>
<p><a href="http://joelburget.com/">Joel Burget</a> wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.</p>
<blockquote>
<p>The problem here is that we&#39;re trying to maniplate a tree, but there&#39;s a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there&#39;s a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.</p>
<p>What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).</p>
<p>So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.</p>
<p><a href="http://joelburget.com/react/">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="jsromandie-meetup"></a>JSRomandie Meetup <a class="hash-link" href="#jsromandie-meetup">#</a></h2>
<p><a href="https://twitter.com/renajohn/">Renault John Lecoultre</a> from <a href="http://www.bugbuster.com">BugBuster</a> did a React introduction talk at a JS meetup called <a href="https://twitter.com/jsromandie">JS Romandie</a> last week.</p>
<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
<h2><a class="anchor" name="coffeescript-integration"></a>CoffeeScript integration <a class="hash-link" href="#coffeescript-integration">#</a></h2>
<p><a href="http://blog.vjeux.com/">Vjeux</a> used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.</p>
<blockquote>
<p>Multiple people asked what&#39;s the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I&#39;m not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<span class="p">(</span><span class="nx">div</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;MarkdownEditor&#39;</span><span class="p">},</span> <span class="p">[</span>
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">&#39;Input&#39;</span><span class="p">),</span>
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">&#39;textarea&#39;</span><span class="p">},</span>
<span class="err">@</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span>
<span class="p">)</span>
<span class="p">])</span>
</code></pre></div>
<p><a href="http://blog.vjeux.com/2013/javascript/react-coffeescript.html">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="tutorial-in-plain-javascript"></a>Tutorial in Plain Javascript <a class="hash-link" href="#tutorial-in-plain-javascript">#</a></h2>
<p>We&#39;ve seen a lot of people comparing React with various frameworks. <a href="http://ricardo.cc/">Ricardo Tomasi</a> decided to re-implement the tutorial without any framework, just plain Javascript.</p>
<blockquote>
<p>Facebook &amp; Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you&#39;re like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let&#39;s see what that looks like in plain javascript.</p>
<p><a href="http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html">Read the full post...</a></p>
</blockquote>
</div>
</div>
<div class="pagination">
blog/page6/index.html
+89 -16
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,89 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></h1>
<p class="meta">June 27, 2013 by Vjeux</p>
<hr />
<div class="post">
<p>The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.</p>
<h2><a class="anchor" name="moving-from-backbone-to-react"></a>Moving From Backbone To React <a class="hash-link" href="#moving-from-backbone-to-react">#</a></h2>
<p><a href="http://twitter.com/clayallsopp">Clay Allsopp</a> successfully ported <a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Propeller</a>, a fairly big, interaction-heavy JavaScript app, to React.</p>
<blockquote>
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/"><img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" /></a>Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn&#39;t automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they&#39;re all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.</p>
<p>React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The &quot;elements&quot; you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]</p>
<p>We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it&#39;s allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn&#39;t require you to drop-everything-and-refactor like a move to Ember or Angular would demand.</p>
<p><a href="http://usepropeller.com/blog/posts/from-backbone-to-react/">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="grunt-task-for-jsx"></a>Grunt Task for JSX <a class="hash-link" href="#grunt-task-for-jsx">#</a></h2>
<p><a href="http://ericclemmons.github.io/">Eric Clemmons</a> wrote a task for <a href="http://gruntjs.com/">Grunt</a> that applies the JSX transformation to your Javascript files. It also works with <a href="http://browserify.org/">Browserify</a> if you want all your files to be concatenated and minified together.</p>
<blockquote>
<p>Grunt task for compiling Facebook React&#39;s .jsx templates into .js</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">&#39;js&#39;</span> <span class="p">},</span>
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;path/to/output/dir&#39;</span><span class="o">:</span> <span class="s1">&#39;path/to/jsx/templates/dir&#39;</span> <span class="p">}</span>
</code></pre></div>
<p>It also works great with <code>grunt-browserify</code>!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;grunt-react&#39;</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
<span class="p">},</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">src</span><span class="o">:</span> <span class="s1">&#39;path/to/source/main.js&#39;</span><span class="p">,</span>
<span class="nx">dest</span><span class="o">:</span> <span class="s1">&#39;path/to/target/output.js&#39;</span>
</code></pre></div>
<p><a href="https://github.com/ericclemmons/grunt-react">Check out the project ...</a></p>
</blockquote>
<h2><a class="anchor" name="backbonehandlebars-nested-views"></a>Backbone/Handlebars Nested Views <a class="hash-link" href="#backbonehandlebars-nested-views">#</a></h2>
<p><a href="http://joelburget.com/">Joel Burget</a> wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.</p>
<blockquote>
<p>The problem here is that we&#39;re trying to maniplate a tree, but there&#39;s a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there&#39;s a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.</p>
<p>What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).</p>
<p>So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.</p>
<p><a href="http://joelburget.com/react/">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="jsromandie-meetup"></a>JSRomandie Meetup <a class="hash-link" href="#jsromandie-meetup">#</a></h2>
<p><a href="https://twitter.com/renajohn/">Renault John Lecoultre</a> from <a href="http://www.bugbuster.com">BugBuster</a> did a React introduction talk at a JS meetup called <a href="https://twitter.com/jsromandie">JS Romandie</a> last week.</p>
<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
<h2><a class="anchor" name="coffeescript-integration"></a>CoffeeScript integration <a class="hash-link" href="#coffeescript-integration">#</a></h2>
<p><a href="http://blog.vjeux.com/">Vjeux</a> used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.</p>
<blockquote>
<p>Multiple people asked what&#39;s the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I&#39;m not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<span class="p">(</span><span class="nx">div</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;MarkdownEditor&#39;</span><span class="p">},</span> <span class="p">[</span>
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">&#39;Input&#39;</span><span class="p">),</span>
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">&#39;textarea&#39;</span><span class="p">},</span>
<span class="err">@</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span>
<span class="p">)</span>
<span class="p">])</span>
</code></pre></div>
<p><a href="http://blog.vjeux.com/2013/javascript/react-coffeescript.html">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="tutorial-in-plain-javascript"></a>Tutorial in Plain Javascript <a class="hash-link" href="#tutorial-in-plain-javascript">#</a></h2>
<p>We&#39;ve seen a lot of people comparing React with various frameworks. <a href="http://ricardo.cc/">Ricardo Tomasi</a> decided to re-implement the tutorial without any framework, just plain Javascript.</p>
<blockquote>
<p>Facebook &amp; Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you&#39;re like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let&#39;s see what that looks like in plain javascript.</p>
<p><a href="http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html">Read the full post...</a></p>
</blockquote>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></h1>
<p class="meta">June 21, 2013 by Paul O'Shannessy</p>
@@ -329,20 +412,6 @@ but if you are interested in the nuts and bolts
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
<hr />
<div class="post">
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="pagination">
@@ -351,6 +420,10 @@ but if you are interested in the nuts and bolts
</a>
<a href="/react/blog/page7/" class="next">
Next Page &raquo;
</a>
</div>
</div>
</section>
blog/page7/index.html
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Blog</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/page7/index.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<meta property="fb:app_id" content="623268441017527" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></li>
<li><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></li>
<li><a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a></li>
<li><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></li>
<li><a href="/react/blog/2013/11/06/community-roundup-10.html">Community Round-up #10</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
<hr />
<div class="post">
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="pagination">
<a href="/react//blog/page6/" class="previous">
&laquo; Previous Page
</a>
</div>
</div>
</section>
<footer class="wrap">
<div class="left">A Facebook &amp; Instagram collaboration.</div>
<div class="right">&copy; 2014 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
feed.xml
+66 -146
View File
@@ -6,6 +6,72 @@
<link>http://facebook.github.io/react</link>
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
<item>
<title>Community Round-up #16</title>
<description>&lt;p&gt;There have been many posts recently covering the &lt;i&gt;why&lt;/i&gt; and &lt;i&gt;how&lt;/i&gt; of React. This week&amp;#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.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-in-a-nutshell&quot;&gt;&lt;/a&gt;React in a nutshell &lt;a class=&quot;hash-link&quot; href=&quot;#react-in-a-nutshell&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Got five minutes to pitch React to your coworkers? John Lynch (&lt;a href=&quot;https://twitter.com/johnrlynch&quot;&gt;@johnrlynch&lt;/a&gt;) put together &lt;a href=&quot;http://slid.es/johnlynch/reactjs&quot;&gt;this excellent and refreshing slideshow&lt;/a&gt;:&lt;/p&gt;
&lt;iframe src=&quot;//slid.es/johnlynch/reactjs/embed&quot; width=&quot;576&quot; height=&quot;420&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reacts-diff-algorithm&quot;&gt;&lt;/a&gt;React&amp;#39;s diff algorithm &lt;a class=&quot;hash-link&quot; href=&quot;#reacts-diff-algorithm&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React core team member Christopher Chedeau (&lt;a href=&quot;https://twitter.com/vjeux&quot;&gt;@vjeux&lt;/a&gt;) explores the innards of React&amp;#39;s tree diffing algorithm in this &lt;a href=&quot;http://calendar.perfplanet.com/2013/diff/&quot;&gt;extensive and well-illustrated post&lt;/a&gt;. &lt;figure&gt;&lt;a href=&quot;http://calendar.perfplanet.com/2013/diff/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-diff-tree.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;While we&amp;#39;re talking about tree diffing: Matt Esch (&lt;a href=&quot;https://twitter.com/MatthewEsch&quot;&gt;@MatthewEsch&lt;/a&gt;) created &lt;a href=&quot;https://github.com/Matt-Esch/virtual-dom&quot;&gt;this project&lt;/a&gt;, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;many-many-new-introductions-to-react&quot;&gt;&lt;/a&gt;Many, many new introductions to React! &lt;a class=&quot;hash-link&quot; href=&quot;#many-many-new-introductions-to-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;James Padosley wrote a short post on the basics (and merits) of React: &lt;a href=&quot;http://james.padolsey.com/javascript/what-is-react/&quot;&gt;What is React?&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;What I like most about React is that it doesn&amp;#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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://james.padolsey.com/javascript/what-is-react/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Taylor Lapeyre (&lt;a href=&quot;https://twitter.com/taylorlapeyre&quot;&gt;@taylorlapeyre&lt;/a&gt;) wrote another nice &lt;a href=&quot;http://words.taylorlapeyre.me/an-introduction-to-react&quot;&gt;introduction to React&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://words.taylorlapeyre.me/an-introduction-to-react&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&amp;amp;utm_medium=post&amp;amp;utm_campaign=echojs&quot;&gt;This &amp;quot;Deep explanation for newbies&amp;quot;&lt;/a&gt; by &lt;a href=&quot;https://twitter.com/ProJavaScript&quot;&gt;@ProJavaScript&lt;/a&gt; explains how to get started building a React game without using the optional JSX syntax.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-around-the-world&quot;&gt;&lt;/a&gt;React around the world &lt;a class=&quot;hash-link&quot; href=&quot;#react-around-the-world&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;It&amp;#39;s great to see the React community expand internationally. &lt;a href=&quot;http://habrahabr.ru/post/189230/&quot;&gt;This site&lt;/a&gt; features a React introduction in Russian.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tutorial-series&quot;&gt;&lt;/a&gt;React tutorial series &lt;a class=&quot;hash-link&quot; href=&quot;#react-tutorial-series&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/@followchrisp&quot;&gt;Christopher Pitt&lt;/a&gt; explains &lt;a href=&quot;https://medium.com/react-tutorials/828c397e3dc8&quot;&gt;React Components&lt;/a&gt; and &lt;a href=&quot;https://medium.com/react-tutorials/ef11cd55caa0&quot;&gt;React Properties&lt;/a&gt;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 &lt;a href=&quot;https://medium.com/react-tutorials&quot;&gt;other posts in his React Tutorial series&lt;/a&gt;, e.g. on using &lt;a href=&quot;https://medium.com/react-tutorials/8aaec65a546c&quot;&gt;React + Backbone Model&lt;/a&gt; and &lt;a href=&quot;https://medium.com/react-tutorials/c00be0cf1592&quot;&gt;React + Backbone Router&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;beginner-tutorial-implementing-the-board-game-go&quot;&gt;&lt;/a&gt;Beginner tutorial: Implementing the board game Go &lt;a class=&quot;hash-link&quot; href=&quot;#beginner-tutorial-implementing-the-board-game-go&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://cjlarose.com/&quot;&gt;Chris LaRose&lt;/a&gt; walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his &lt;a href=&quot;http://cjlarose.com/2014/01/09/react-board-game-tutorial.html&quot;&gt;tutorial&lt;/a&gt; or go straight to the &lt;a href=&quot;https://github.com/cjlarose/react-go&quot;&gt;code&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;egghead.io-video-tutorials&quot;&gt;&lt;/a&gt;Egghead.io video tutorials &lt;a class=&quot;hash-link&quot; href=&quot;#egghead.io-video-tutorials&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Joe Maddalone (&lt;a href=&quot;https://twitter.com/joemaddalone&quot;&gt;@joemaddalone&lt;/a&gt;) of &lt;a href=&quot;https://egghead.io/&quot;&gt;egghead.io&lt;/a&gt; created a series of React video tutorials, such as &lt;a href=&quot;http://www.youtube.com/watch?v=rFvZydtmsxM&amp;amp;feature=youtu.be&amp;amp;a&quot;&gt;this&lt;/a&gt; introduction to React Components. [&lt;a href=&quot;http://www.youtube.com/watch?v=rFvZydtmsxM&amp;amp;feature=youtu.be&amp;amp;a&quot;&gt;part 1&lt;/a&gt;], [&lt;a href=&quot;http://www.youtube.com/watch?v=5yvFLrt7N8M&quot;&gt;part 2&lt;/a&gt;]&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-finally-a-great-serverclient-web-stack&quot;&gt;&lt;/a&gt;&amp;quot;React: Finally, a great server/client web stack&amp;quot; &lt;a class=&quot;hash-link&quot; href=&quot;#react-finally-a-great-serverclient-web-stack&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Eric Florenzano (&lt;a href=&quot;https://twitter.com/ericflo&quot;&gt;@ericflo&lt;/a&gt;) sheds some light on what makes React perfect for server rendering:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;[...] 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. [...]&lt;/p&gt;
&lt;p&gt;What I&amp;#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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;building-a-complex-react-component&quot;&gt;&lt;/a&gt;Building a complex React component &lt;a class=&quot;hash-link&quot; href=&quot;#building-a-complex-react-component&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://matt-harrison.com/&quot;&gt;Matt Harrison&lt;/a&gt; walks through the process of &lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;creating an SVG-based Resistance Calculator&lt;/a&gt; using React. &lt;figure&gt;&lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;&lt;img src=&quot;/react/img/blog/resistance-calculator.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweets&quot;&gt;&lt;/a&gt;Random Tweets &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweets&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs](https://twitter.com/search?q=%23reactjs&amp;src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.&lt;/p&gt;&amp;mdash; Anton Astashov (@anton_astashov) &lt;a href=&quot;https://twitter.com/anton_astashov/status/417556491646693378&quot;&gt;December 30, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs]((https://twitter.com/search?q=%23reactjs&amp;src=hash) makes refactoring your HTML as easy &amp; natural as refactoring your javascript [@react_js](https://twitter.com/react_js)&lt;/p&gt;&amp;mdash; Jared Forsyth (@jaredforsyth) &lt;a href=&quot;https://twitter.com/jaredforsyth/status/420304083010854912&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Played with react.js for an hour, so many things suddenly became stupidly simple.&lt;/p&gt;&amp;mdash; andrewingram (@andrewingram) &lt;a href=&quot;https://twitter.com/andrewingram/status/422810480701620225&quot;&gt;January 13, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice&lt;/p&gt;&amp;mdash; julik (@julikt) &lt;a href=&quot;https://twitter.com/julikt/status/422843478792765440&quot;&gt;January 13, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;brb rewriting everything with react
&lt;/p&gt;&amp;mdash; Ben Smithett (@bensmithett) &lt;a href=&quot;https://twitter.com/bensmithett/status/430671242186592256&quot;&gt;February 4, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-02-15T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html</guid>
</item>
<item>
<title>Community Round-up #15</title>
<description>&lt;p&gt;Interest in React seems to have surged ever since David Nolen (&lt;a href=&quot;https://twitter.com/swannodette&quot;&gt;@swannodette&lt;/a&gt;)&amp;#39;s introduction of &lt;a href=&quot;https://github.com/swannodette/om&quot;&gt;Om&lt;/a&gt; in his post &lt;a href=&quot;http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/&quot;&gt;&amp;quot;The Future of Javascript MVC Frameworks&amp;quot;&lt;/a&gt;.&lt;/p&gt;
@@ -648,151 +714,5 @@ Is this some sort of template language? Specifically no. This might have been th
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/11/06/community-roundup-10.html</guid>
</item>
<item>
<title>Thinking in React</title>
<description>&lt;p&gt;React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It&amp;#39;s scaled very well for us at Facebook and Instagram.&lt;/p&gt;
&lt;p&gt;One of the many great parts of React is how it makes you think about apps as you build them. In this post I&amp;#39;ll walk you through the thought process of building a searchable product data table using React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;start-with-a-mock&quot;&gt;&lt;/a&gt;Start with a mock &lt;a class=&quot;hash-link&quot; href=&quot;#start-with-a-mock&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn&amp;#39;t very good because the mock looks like this:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/thinking-in-react-mock.png&quot; alt=&quot;Mockup&quot;&gt;&lt;/p&gt;
&lt;p&gt;Our JSON API returns some data that looks like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;[
{category: &amp;quot;Sporting Goods&amp;quot;, price: &amp;quot;$49.99&amp;quot;, stocked: true, name: &amp;quot;Football&amp;quot;},
{category: &amp;quot;Sporting Goods&amp;quot;, price: &amp;quot;$9.99&amp;quot;, stocked: true, name: &amp;quot;Baseball&amp;quot;},
{category: &amp;quot;Sporting Goods&amp;quot;, price: &amp;quot;$29.99&amp;quot;, stocked: false, name: &amp;quot;Basketball&amp;quot;},
{category: &amp;quot;Electronics&amp;quot;, price: &amp;quot;$99.99&amp;quot;, stocked: true, name: &amp;quot;iPod Touch&amp;quot;},
{category: &amp;quot;Electronics&amp;quot;, price: &amp;quot;$399.99&amp;quot;, stocked: false, name: &amp;quot;iPhone 5&amp;quot;},
{category: &amp;quot;Electronics&amp;quot;, price: &amp;quot;$199.99&amp;quot;, stocked: true, name: &amp;quot;Nexus 7&amp;quot;}
];
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;step-1-break-the-ui-into-a-component-hierarchy&quot;&gt;&lt;/a&gt;Step 1: break the UI into a component hierarchy &lt;a class=&quot;hash-link&quot; href=&quot;#step-1-break-the-ui-into-a-component-hierarchy&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The first thing you&amp;#39;ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you&amp;#39;re working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!&lt;/p&gt;
&lt;p&gt;But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the &lt;a href=&quot;http://en.wikipedia.org/wiki/Single_responsibility_principle&quot;&gt;single responsibility principle&lt;/a&gt;, that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.&lt;/p&gt;
&lt;p&gt;Since you&amp;#39;re often displaying a JSON data model to a user, you&amp;#39;ll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That&amp;#39;s because user interfaces and data models tend to adhere to the same &lt;em&gt;information architecture&lt;/em&gt; which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/thinking-in-react-components.png&quot; alt=&quot;Component diagram&quot;&gt;&lt;/p&gt;
&lt;p&gt;You&amp;#39;ll see here that we have five components in our simple app. I&amp;#39;ve italicized the data each component represents.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;FilterableProductTable&lt;/code&gt; (orange):&lt;/strong&gt; contains the entirety of the example&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;SearchBar&lt;/code&gt; (blue):&lt;/strong&gt; receives all &lt;em&gt;user input&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;ProductTable&lt;/code&gt; (green):&lt;/strong&gt; displays and filters the &lt;em&gt;data collection&lt;/em&gt; based on &lt;em&gt;user input&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;ProductCategoryRow&lt;/code&gt; (turquoise):&lt;/strong&gt; displays a heading for each &lt;em&gt;category&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;&lt;code&gt;ProductRow&lt;/code&gt; (red):&lt;/strong&gt; displays a row for each &lt;em&gt;product&lt;/em&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;If you look at &lt;code&gt;ProductTable&lt;/code&gt; you&amp;#39;ll see that the table header (containing the &amp;quot;Name&amp;quot; and &amp;quot;Price&amp;quot; labels) isn&amp;#39;t its own component. This is a matter of preference and there&amp;#39;s an argument to be made either way. For this example I left it as part of &lt;code&gt;ProductTable&lt;/code&gt; because it is part of rendering the &lt;em&gt;data collection&lt;/em&gt; which is &lt;code&gt;ProductTable&lt;/code&gt;&amp;#39;s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own &lt;code&gt;ProductTableHeader&lt;/code&gt; component.&lt;/p&gt;
&lt;p&gt;Now that we&amp;#39;ve identified the components in our mock, let&amp;#39;s arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;FilterableProductTable&lt;/code&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;SearchBar&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ProductTable&lt;/code&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ProductCategoryRow&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ProductRow&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;step-2-build-a-static-version-in-react&quot;&gt;&lt;/a&gt;Step 2: Build a static version in React &lt;a class=&quot;hash-link&quot; href=&quot;#step-2-build-a-static-version-in-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/6wQMG/embedded/&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;Now that you have your component hierarchy it&amp;#39;s time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It&amp;#39;s easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We&amp;#39;ll see why.&lt;/p&gt;
&lt;p&gt;To build a static version of your app that renders your data model you&amp;#39;ll want to build components that reuse other components and pass data using &lt;em&gt;props&lt;/em&gt;. &lt;em&gt;props&lt;/em&gt; are a way of passing data from parent to child. If you&amp;#39;re familiar with the concept of &lt;em&gt;state&lt;/em&gt;, &lt;strong&gt;don&amp;#39;t use state at all&lt;/strong&gt; to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don&amp;#39;t need it.&lt;/p&gt;
&lt;p&gt;You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with &lt;code&gt;FilterableProductTable&lt;/code&gt;) or with the ones lower in it (&lt;code&gt;ProductRow&lt;/code&gt;). In simpler examples it&amp;#39;s usually easier to go top-down and on larger projects it&amp;#39;s easier to go bottom-up and write tests as you build.&lt;/p&gt;
&lt;p&gt;At the end of this step you&amp;#39;ll have a library of reusable components that render your data model. The components will only have &lt;code&gt;render()&lt;/code&gt; methods since this is a static version of your app. The component at the top of the hierarchy (&lt;code&gt;FilterableProductTable&lt;/code&gt;) will take your data model as a prop. If you make a change to your underlying data model and call &lt;code&gt;renderComponent()&lt;/code&gt; again the UI will be updated. It&amp;#39;s easy to see how your UI is updated and where to make changes since there&amp;#39;s nothing complicated going on since React&amp;#39;s &lt;strong&gt;one-way data flow&lt;/strong&gt; (also called &lt;em&gt;one-way binding&lt;/em&gt;) keeps everything modular, easy to reason about, and fast.&lt;/p&gt;
&lt;p&gt;Simply refer to the &lt;a href=&quot;http://facebook.github.io/react/docs/&quot;&gt;React docs&lt;/a&gt; if you need help executing this step.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;a-brief-interlude-props-vs-state&quot;&gt;&lt;/a&gt;A brief interlude: props vs state &lt;a class=&quot;hash-link&quot; href=&quot;#a-brief-interlude-props-vs-state&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;There are two types of &amp;quot;model&amp;quot; data in React: props and state. It&amp;#39;s important to understand the distinction between the two; skim &lt;a href=&quot;http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html&quot;&gt;the official React docs&lt;/a&gt; if you aren&amp;#39;t sure what the difference is.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;step-3-identify-the-minimal-but-complete-representation-of-ui-state&quot;&gt;&lt;/a&gt;Step 3: Identify the minimal (but complete) representation of UI state &lt;a class=&quot;hash-link&quot; href=&quot;#step-3-identify-the-minimal-but-complete-representation-of-ui-state&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with &lt;strong&gt;state&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: &lt;em&gt;Don&amp;#39;t Repeat Yourself&lt;/em&gt;. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you&amp;#39;re building a TODO list, just keep an array of the TODO items around; don&amp;#39;t keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.&lt;/p&gt;
&lt;p&gt;Think of all of the pieces of data in our example application. We have:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The original list of products&lt;/li&gt;
&lt;li&gt;The search text the user has entered&lt;/li&gt;
&lt;li&gt;The value of the checkbox&lt;/li&gt;
&lt;li&gt;The filtered list of products&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Let&amp;#39;s go through each one and figure out which one is state. Simply ask three questions about each piece of data:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Is it passed in from a parent via props? If so, it probably isn&amp;#39;t state.&lt;/li&gt;
&lt;li&gt;Does it change over time? If not, it probably isn&amp;#39;t state.&lt;/li&gt;
&lt;li&gt;Can you compute it based on any other state or props in your component? If so, it&amp;#39;s not state.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The original list of products is passed in as props, so that&amp;#39;s not state. The search text and the checkbox seem to be state since they change over time and can&amp;#39;t be computed from anything. And finally, the filtered list of products isn&amp;#39;t state because it can be computed by combining the original list of products with the search text and value of the checkbox.&lt;/p&gt;
&lt;p&gt;So finally, our state is:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The search text the user has entered&lt;/li&gt;
&lt;li&gt;The value of the checkbox&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;step-4-identify-where-your-state-should-live&quot;&gt;&lt;/a&gt;Step 4: Identify where your state should live &lt;a class=&quot;hash-link&quot; href=&quot;#step-4-identify-where-your-state-should-live&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/QvHnx/embedded/&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;OK, so we&amp;#39;ve identified what the minimal set of app state is. Next we need to identify which component mutates, or &lt;em&gt;owns&lt;/em&gt;, this state.&lt;/p&gt;
&lt;p&gt;Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. &lt;strong&gt;This is often the most challenging part for newcomers to understand,&lt;/strong&gt; so follow these steps to figure it out:&lt;/p&gt;
&lt;p&gt;For each piece of state in your application:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Identify every component that renders something based on that state.&lt;/li&gt;
&lt;li&gt;Find a common owner component (a single component above all the components that need the state in the hierarchy).&lt;/li&gt;
&lt;li&gt;Either the common owner or another component higher up in the hierarchy should own the state.&lt;/li&gt;
&lt;li&gt;If you can&amp;#39;t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Let&amp;#39;s run through this strategy for our application:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;ProductTable&lt;/code&gt; needs to filter the product list based on state and &lt;code&gt;SearchBar&lt;/code&gt; needs to display the search text and checked state.&lt;/li&gt;
&lt;li&gt;The common owner component is &lt;code&gt;FilterableProductTable&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;It conceptually makes sense for the filter text and checked value to live in &lt;code&gt;FilterableProductTable&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Cool, so we&amp;#39;ve decided that our state lives in &lt;code&gt;FilterableProductTable&lt;/code&gt;. First, add a &lt;code&gt;getInitialState()&lt;/code&gt; method to &lt;code&gt;FilterableProductTable&lt;/code&gt; that returns &lt;code&gt;{filterText: &amp;#39;&amp;#39;, inStockOnly: false}&lt;/code&gt; to reflect the initial state of your application. Then pass &lt;code&gt;filterText&lt;/code&gt; and &lt;code&gt;inStockOnly&lt;/code&gt; to &lt;code&gt;ProductTable&lt;/code&gt; and &lt;code&gt;SearchBar&lt;/code&gt; as a prop. Finally, use these props to filter the rows in &lt;code&gt;ProductTable&lt;/code&gt; and set the values of the form fields in &lt;code&gt;SearchBar&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;You can start seeing how your application will behave: set &lt;code&gt;filterText&lt;/code&gt; to &lt;code&gt;&amp;quot;ball&amp;quot;&lt;/code&gt; and refresh your app. You&amp;#39;ll see the data table is updated correctly.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;step-5-add-inverse-data-flow&quot;&gt;&lt;/a&gt;Step 5: Add inverse data flow &lt;a class=&quot;hash-link&quot; href=&quot;#step-5-add-inverse-data-flow&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/3Vs3Q/embedded/&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;So far we&amp;#39;ve built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it&amp;#39;s time to support data flowing the other way: the form components deep in the hierarchy need to update the state in &lt;code&gt;FilterableProductTable&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called &lt;code&gt;ReactLink&lt;/code&gt; to make this pattern as convenient as two-way binding, but for the purpose of this post we&amp;#39;ll keep everything explicit.&lt;/p&gt;
&lt;p&gt;If you try to type or check the box in the current version of the example you&amp;#39;ll see that React ignores your input. This is intentional, as we&amp;#39;ve set the &lt;code&gt;value&lt;/code&gt; prop of the &lt;code&gt;input&lt;/code&gt; to always be equal to the &lt;code&gt;state&lt;/code&gt; passed in from &lt;code&gt;FilterableProductTable&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Let&amp;#39;s think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, &lt;code&gt;FilterableProductTable&lt;/code&gt; will pass a callback to &lt;code&gt;SearchBar&lt;/code&gt; that will fire whenever the state should be updated. We can use the &lt;code&gt;onChange&lt;/code&gt; event on the inputs to be notified of it. And the callback passed by &lt;code&gt;FilterableProductTable&lt;/code&gt; will call &lt;code&gt;setState()&lt;/code&gt; and the app will be updated.&lt;/p&gt;
&lt;p&gt;Though this sounds like a lot it&amp;#39;s really just a few lines of code. And it&amp;#39;s really explicit how your data is flowing throughout the app.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;and-thats-it&quot;&gt;&lt;/a&gt;And that&amp;#39;s it &lt;a class=&quot;hash-link&quot; href=&quot;#and-thats-it&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you&amp;#39;re used to, remember that code is read far more than it&amp;#39;s written, and it&amp;#39;s extremely easy to read this modular, explicit code. As you start to build large libraries of components you&amp;#39;ll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)&lt;/p&gt;
</description>
<pubDate>2013-11-05T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</guid>
</item>
</channel>
</rss>
img/blog/react-diff-tree.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

img/blog/resistance-calculator.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB