mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
fabiomcosta adding warning about the lack of support for onScroll on IE8 … 8615ade
philix Add jsx-requirejs-plugin to the tooling-integration page978a8f5philix Remove the require-jsx plugin from the tooling-integration page …e23e627spicyj Mention react-art where we talk about SVG13c211aspicyj Fix typo3afe6depassy Add gulp-react to Helpful OSS Projects …8ef2cecxixixao Document displayNameee90857Daniel15 Add link to HTML to JSX converter to “JSX In Depth” page5cbc727Daniel15 Change “not allowed” back to “discouraged” since you technically *can… …ea41991vjeux Community Round-up #14658aa45
This commit is contained in:
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html" class="active">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html" class="active">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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" class="active">Community Round-up #13</a></li>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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" class="active">React Chrome Developer Tools</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,199 @@
|
||||
<!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 #14</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Community Round-up #14" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.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/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.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>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</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/01/06/community-roundup-14.html" class="active">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/2013/11/05/thinking-in-react.html">Thinking in React</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Community Round-up #14</h1>
|
||||
<p class="meta">January 6, 2014 by Vjeux</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.</p>
|
||||
<h2><a class="anchor" name="react-baseline"></a>React Baseline <a class="hash-link" href="#react-baseline">#</a></h2>
|
||||
<p>React is only one-piece of your web application stack. <a href="https://github.com/intabulas">Mark Lussier</a> shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github</p>
|
||||
|
||||
<p>I encourage you to fork, and make it right and submit a pull request!</p>
|
||||
|
||||
<p>My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets</p>
|
||||
|
||||
<p><a href="https://github.com/intabulas/reactjs-baseline">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="animal-sounds"></a>Animal Sounds <a class="hash-link" href="#animal-sounds">#</a></h2>
|
||||
<p><a href="http://joshduck.com/">Josh Duck</a> used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
|
||||
<figure><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9"><img src="/react/img/blog/animal-sounds.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9">Download the app...</a></p>
|
||||
<h2><a class="anchor" name="react-rails-tutorial"></a>React Rails Tutorial <a class="hash-link" href="#react-rails-tutorial">#</a></h2>
|
||||
<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
|
||||
|
||||
<blockquote>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
|
||||
cd react-rails-tutorial
|
||||
bundle install
|
||||
rake db:migrate
|
||||
rails s
|
||||
</code></pre></div>
|
||||
<p>Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!</p>
|
||||
|
||||
<p><a href="https://github.com/necrodome/react-rails-tutorial">View on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="mixing-with-backbone"></a>Mixing with Backbone <a class="hash-link" href="#mixing-with-backbone">#</a></h2>
|
||||
<p><a href="http://eldar.djafarov.com/">Eldar Djafarov</a> implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
|
||||
<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
|
||||
<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">InfiniteScroll</span>
|
||||
<span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
|
||||
<span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
|
||||
<span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
|
||||
<span class="nx">loader</span><span class="o">=</span><span class="p">{</span><span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"loader"</span><span class="o">></span><span class="nx">Loading</span> <span class="p">...</span><span class="o"><</span><span class="err">/div>}></span>
|
||||
<span class="p">{</span><span class="nx">items</span><span class="p">}</span> <span class="c1">// <-- This is the "stuff" you want to load</span>
|
||||
<span class="o"><</span><span class="err">/InfiniteScroll></span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/guillaumervls/react-infinite-scroll">Try it out on GitHub!</a></p>
|
||||
<h2><a class="anchor" name="web-components-style"></a>Web Components Style <a class="hash-link" href="#web-components-style">#</a></h2>
|
||||
<p><a href="http://subtlegradient.com/">Thomas Aylott</a> implemented an API that looks like Web Components but using React underneath.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<h2><a class="anchor" name="react-vs-angular"></a>React vs Angular <a class="hash-link" href="#react-vs-angular">#</a></h2>
|
||||
<p>React is often compared with Angular. <a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Pete Hunt</a> wrote an opinionated post on the subject.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.</p>
|
||||
|
||||
<p>I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.</p>
|
||||
|
||||
<p><a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<figure><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></figure>
|
||||
|
||||
</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/01/06/community-roundup-14.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 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>
|
||||
@@ -62,6 +62,8 @@
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<p><strong><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></strong> on January 2, 2014 by Sebastian Markbåge</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></strong> on December 30, 2013 by Vjeux</p>
|
||||
|
||||
+76
-22
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,80 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></h1>
|
||||
<p class="meta">January 6, 2014 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.</p>
|
||||
<h2><a class="anchor" name="react-baseline"></a>React Baseline <a class="hash-link" href="#react-baseline">#</a></h2>
|
||||
<p>React is only one-piece of your web application stack. <a href="https://github.com/intabulas">Mark Lussier</a> shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github</p>
|
||||
|
||||
<p>I encourage you to fork, and make it right and submit a pull request!</p>
|
||||
|
||||
<p>My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets</p>
|
||||
|
||||
<p><a href="https://github.com/intabulas/reactjs-baseline">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="animal-sounds"></a>Animal Sounds <a class="hash-link" href="#animal-sounds">#</a></h2>
|
||||
<p><a href="http://joshduck.com/">Josh Duck</a> used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
|
||||
<figure><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9"><img src="/react/img/blog/animal-sounds.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9">Download the app...</a></p>
|
||||
<h2><a class="anchor" name="react-rails-tutorial"></a>React Rails Tutorial <a class="hash-link" href="#react-rails-tutorial">#</a></h2>
|
||||
<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
|
||||
|
||||
<blockquote>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
|
||||
cd react-rails-tutorial
|
||||
bundle install
|
||||
rake db:migrate
|
||||
rails s
|
||||
</code></pre></div>
|
||||
<p>Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!</p>
|
||||
|
||||
<p><a href="https://github.com/necrodome/react-rails-tutorial">View on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="mixing-with-backbone"></a>Mixing with Backbone <a class="hash-link" href="#mixing-with-backbone">#</a></h2>
|
||||
<p><a href="http://eldar.djafarov.com/">Eldar Djafarov</a> implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
|
||||
<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
|
||||
<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">InfiniteScroll</span>
|
||||
<span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
|
||||
<span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
|
||||
<span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
|
||||
<span class="nx">loader</span><span class="o">=</span><span class="p">{</span><span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"loader"</span><span class="o">></span><span class="nx">Loading</span> <span class="p">...</span><span class="o"><</span><span class="err">/div>}></span>
|
||||
<span class="p">{</span><span class="nx">items</span><span class="p">}</span> <span class="c1">// <-- This is the "stuff" you want to load</span>
|
||||
<span class="o"><</span><span class="err">/InfiniteScroll></span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/guillaumervls/react-infinite-scroll">Try it out on GitHub!</a></p>
|
||||
<h2><a class="anchor" name="web-components-style"></a>Web Components Style <a class="hash-link" href="#web-components-style">#</a></h2>
|
||||
<p><a href="http://subtlegradient.com/">Thomas Aylott</a> implemented an API that looks like Web Components but using React underneath.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<h2><a class="anchor" name="react-vs-angular"></a>React vs Angular <a class="hash-link" href="#react-vs-angular">#</a></h2>
|
||||
<p>React is often compared with Angular. <a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Pete Hunt</a> wrote an opinionated post on the subject.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.</p>
|
||||
|
||||
<p>I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.</p>
|
||||
|
||||
<p><a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<figure><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></figure>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></h1>
|
||||
<p class="meta">January 2, 2014 by Sebastian Markbåge</p>
|
||||
@@ -341,26 +415,6 @@ componentDidUpdate: function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a></h1>
|
||||
<p class="meta">December 18, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a <code>key</code>. Typically "safe" data is used for a <code>key</code>, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.</p>
|
||||
|
||||
<p>This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.</p>
|
||||
|
||||
<p>Updated versions are available for immediate download via npm, bower, and on our <a href="http://facebook.github.io/react/downloads.html">download page</a>.</p>
|
||||
|
||||
<p>We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.</p>
|
||||
|
||||
<p>While we've encouraged responsible disclosure as part of <a href="https://www.facebook.com/whitehat/">Facebook's whitehat bounty program</a> since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has <a href="http://emberjs.com/security/">an excellent policy</a> which we may use as our model.</p>
|
||||
|
||||
<p>You can learn more about the vulnerability discussed here: <a href="https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU">CVE-2013-7035</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+22
-52
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,26 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/12/18/react-v0.5.2-v0.4.2.html">React v0.5.2, v0.4.2</a></h1>
|
||||
<p class="meta">December 18, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a <code>key</code>. Typically "safe" data is used for a <code>key</code>, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.</p>
|
||||
|
||||
<p>This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.</p>
|
||||
|
||||
<p>Updated versions are available for immediate download via npm, bower, and on our <a href="http://facebook.github.io/react/downloads.html">download page</a>.</p>
|
||||
|
||||
<p>We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.</p>
|
||||
|
||||
<p>While we've encouraged responsible disclosure as part of <a href="https://www.facebook.com/whitehat/">Facebook's whitehat bounty program</a> since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has <a href="http://emberjs.com/security/">an excellent policy</a> which we may use as our model.</p>
|
||||
|
||||
<p>You can learn more about the vulnerability discussed here: <a href="https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU">CVE-2013-7035</a>.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/11/18/community-roundup-11.html">Community Round-up #11</a></h1>
|
||||
<p class="meta">November 18, 2013 by Vjeux</p>
|
||||
@@ -454,56 +474,6 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></h1>
|
||||
<p class="meta">October 16, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+52
-75
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,56 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></h1>
|
||||
<p class="meta">October 16, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
@@ -363,79 +413,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
|
||||
<p class="meta">August 5, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2><a class="anchor" name="react-game-tutorial"></a>React Game Tutorial <a class="hash-link" href="#react-game-tutorial">#</a></h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactify"></a>Reactify <a class="hash-link" href="#reactify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2><a class="anchor" name="react-stylus-boilerplate"></a>React Stylus Boilerplate <a class="hash-link" href="#react-stylus-boilerplate">#</a></h2>
|
||||
<p><a href="http://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="webfui"></a>WebFUI <a class="hash-link" href="#webfui">#</a></h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+75
-53
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,79 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
|
||||
<p class="meta">August 5, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2><a class="anchor" name="react-game-tutorial"></a>React Game Tutorial <a class="hash-link" href="#react-game-tutorial">#</a></h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2><a class="anchor" name="reactify"></a>Reactify <a class="hash-link" href="#reactify">#</a></h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2><a class="anchor" name="react-stylus-boilerplate"></a>React Stylus Boilerplate <a class="hash-link" href="#react-stylus-boilerplate">#</a></h2>
|
||||
<p><a href="http://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="webfui"></a>WebFUI <a class="hash-link" href="#webfui">#</a></h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
@@ -291,57 +364,6 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></h1>
|
||||
<p class="meta">July 11, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>
|
||||
<h2><a class="anchor" name="validation"></a>Validation <a class="hash-link" href="#validation">#</a></h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span><span class="s1">'Photos'</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="s1">'default value'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</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">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+53
-76
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,57 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></h1>
|
||||
<p class="meta">July 11, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>
|
||||
<h2><a class="anchor" name="validation"></a>Validation <a class="hash-link" href="#validation">#</a></h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span><span class="s1">'Photos'</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span> <span class="o">||</span> <span class="s1">'default value'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</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">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
@@ -307,80 +358,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></h1>
|
||||
<p class="meta">June 19, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2><a class="anchor" name="some-quick-thoughts-on-react"></a>Some quick thoughts on React <a class="hash-link" href="#some-quick-thoughts-on-react">#</a></h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-socket.io-chat-application"></a>React and Socket.IO Chat Application <a class="hash-link" href="#react-and-socket.io-chat-application">#</a></h2>
|
||||
<p><a href="http://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-other-frameworks"></a>React and Other Frameworks <a class="hash-link" href="#react-and-other-frameworks">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2><a class="anchor" name="web-components-react-amp-x-tags"></a>Web Components: React & x-tags <a class="hash-link" href="#web-components-react-amp-x-tags">#</a></h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-todomvc-example"></a>React TodoMVC Example <a class="hash-link" href="#react-todomvc-example">#</a></h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsx-is-not-html"></a>JSX is not HTML <a class="hash-link" href="#jsx-is-not-html">#</a></h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+76
-2
@@ -64,6 +64,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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>
|
||||
@@ -82,8 +84,6 @@
|
||||
|
||||
<li><a href="/react/blog/2013/10/29/react-v0-5-1.html">React v0.5.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -91,6 +91,80 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></h1>
|
||||
<p class="meta">June 19, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2><a class="anchor" name="some-quick-thoughts-on-react"></a>Some quick thoughts on React <a class="hash-link" href="#some-quick-thoughts-on-react">#</a></h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-socket.io-chat-application"></a>React and Socket.IO Chat Application <a class="hash-link" href="#react-and-socket.io-chat-application">#</a></h2>
|
||||
<p><a href="http://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-and-other-frameworks"></a>React and Other Frameworks <a class="hash-link" href="#react-and-other-frameworks">#</a></h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2><a class="anchor" name="web-components-react-amp-x-tags"></a>Web Components: React & x-tags <a class="hash-link" href="#web-components-react-amp-x-tags">#</a></h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="react-todomvc-example"></a>React TodoMVC Example <a class="hash-link" href="#react-todomvc-example">#</a></h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="jsx-is-not-html"></a>JSX is not HTML <a class="hash-link" href="#jsx-is-not-html">#</a></h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
|
||||
@@ -381,6 +381,9 @@
|
||||
<p>The <code>mixins</code> array allows you to use mixins to share behavior among multiple components. For more information about mixins, see <a href="/react/docs/reusable-components.html">Reusable Components</a>.</p>
|
||||
|
||||
<!-- TODO: Document mixins here directly. -->
|
||||
<h3><a class="anchor" name="displayname"></a>displayName <a class="hash-link" href="#displayname">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">displayName</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>displayName</code> string is used in debugging messages. JSX sets this value automatically, see <a href="react/docs/jsx-in-depth.html#react-composite-components">JSX in Depth</a>.</p>
|
||||
<h2><a class="anchor" name="lifecycle-methods"></a>Lifecycle Methods <a class="hash-link" href="#lifecycle-methods">#</a></h2>
|
||||
<p>Various methods are executed at specific points in a component's lifecycle.</p>
|
||||
<h3><a class="anchor" name="mounting-componentwillmount"></a>Mounting: componentWillMount <a class="hash-link" href="#mounting-componentwillmount">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillMount</span><span class="p">()</span>
|
||||
|
||||
@@ -395,7 +395,9 @@ attributes are transformed into function calls and objects, respectively.</p>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s2">"blue"</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">"click"</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p>Use the <a href="/react/jsx-compiler.html">JSX Compiler</a> to try out JSX and see how it
|
||||
desugars into native JavaScript.</p>
|
||||
desugars into native JavaScript, and the
|
||||
<a href="/react/html-jsx.html">HTML to JSX converter</a> to convert your existing HTML to
|
||||
JSX.</p>
|
||||
|
||||
<p>If you want to use JSX, the <a href="/react/docs/getting-started.html">Getting Started</a> guide shows
|
||||
how to setup compilation.</p>
|
||||
@@ -425,6 +427,9 @@ references the class.</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="cm">/*...*/</span><span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">MyComponent</span> <span class="nx">someProperty</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>JSX will infer the component's name from the variable assignment and specify
|
||||
the class's <a href="/react/docs/component-specs.html#displayName">displayName</a> accordingly.</p>
|
||||
|
||||
<p>See <a href="/react/docs/multiple-components.html">Multiple Components</a> to learn more about using composite components.</p>
|
||||
|
||||
<blockquote>
|
||||
|
||||
@@ -356,9 +356,9 @@
|
||||
<div class="subHeader"></div>
|
||||
<h2><a class="anchor" name="supported-tags"></a>Supported Tags <a class="hash-link" href="#supported-tags">#</a></h2>
|
||||
<p>React attempts to support all common elements. If you need an element that isn't listed here, please file an issue.</p>
|
||||
|
||||
<p>The following elements are supported:</p>
|
||||
<h3><a class="anchor" name="html-elements"></a>HTML Elements <a class="hash-link" href="#html-elements">#</a></h3><div class="highlight"><pre><code class="text language-text" data-lang="text">a abbr address area article aside audio b base bdi bdo big blockquote body br
|
||||
<h3><a class="anchor" name="html-elements"></a>HTML Elements <a class="hash-link" href="#html-elements">#</a></h3>
|
||||
<p>The following HTML elements are supported:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">a abbr address area article aside audio b base bdi bdo big blockquote body br
|
||||
button canvas caption cite code col colgroup data datalist dd del details dfn
|
||||
div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
|
||||
head header hr html i iframe img input ins kbd keygen label legend li link main
|
||||
@@ -366,8 +366,12 @@ map mark menu menuitem meta meter nav noscript object ol optgroup option output
|
||||
p param pre progress q rp rt ruby s samp script section select small source
|
||||
span strong style sub summary sup table tbody td textarea tfoot th thead time
|
||||
title tr track u ul var video wbr
|
||||
</code></pre></div><h3><a class="anchor" name="svg-elements"></a>SVG elements <a class="hash-link" href="#svg-elements">#</a></h3><div class="highlight"><pre><code class="text language-text" data-lang="text">circle g line path polyline rect svg text
|
||||
</code></pre></div><h2><a class="anchor" name="supported-attributes"></a>Supported Attributes <a class="hash-link" href="#supported-attributes">#</a></h2>
|
||||
</code></pre></div><h3><a class="anchor" name="svg-elements"></a>SVG elements <a class="hash-link" href="#svg-elements">#</a></h3>
|
||||
<p>The following SVG elements are supported:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">circle g line path polygon polyline rect svg text
|
||||
</code></pre></div>
|
||||
<p>You may also be interested in <a href="https://github.com/facebook/react-art">react-art</a>, a drawing library for React that can render to Canvas, SVG, or VML (for IE8).</p>
|
||||
<h2><a class="anchor" name="supported-attributes"></a>Supported Attributes <a class="hash-link" href="#supported-attributes">#</a></h2>
|
||||
<p>React supports all <code>data-*</code> and <code>aria-*</code> attributes as well as every attribute in the following lists.</p>
|
||||
|
||||
<blockquote>
|
||||
|
||||
@@ -375,7 +375,8 @@
|
||||
<ul>
|
||||
<li><a href="https://github.com/andreypopp/reactify">reactify</a> - use JSX with <a href="http://browserify.org/">browserify</a></li>
|
||||
<li><a href="https://github.com/ericclemmons/grunt-react">grunt-react</a> - <a href="http://gruntjs.com/">grunt</a> task for JSX</li>
|
||||
<li><a href="https://github.com/seiffert/require-jsx">require-jsx</a> - use JSX with <a href="http://requirejs.org/">require.js</a></li>
|
||||
<li><a href="https://github.com/sindresorhus/gulp-react">gulp-react</a> - <a href="http://gulpjs.com/">gulp</a> task for JSX</li>
|
||||
<li><a href="https://github.com/philix/jsx-requirejs-plugin">jsx-requirejs-plugin</a> - use JSX with <a href="http://requirejs.org/">require.js</a> and precompile JSX files with r.js</li>
|
||||
<li><a href="https://github.com/facebook/react-python">pyReact</a> - use JSX with <a href="http://www.python.org/">Python</a></li>
|
||||
<li><a href="https://github.com/facebook/react-rails">react-rails</a> - use JSX with <a href="http://rubyonrails.org/">Ruby on Rails</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -6,6 +6,79 @@
|
||||
<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 #14</title>
|
||||
<description><p>The theme of this first round-up of 2014 is integration. I&#39;ve tried to assemble a list of articles and projects that use React in various environments.</p>
|
||||
<h2><a class="anchor" name="react-baseline"></a>React Baseline <a class="hash-link" href="#react-baseline">#</a></h2>
|
||||
<p>React is only one-piece of your web application stack. <a href="https://github.com/intabulas">Mark Lussier</a> shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github</p>
|
||||
|
||||
<p>I encourage you to fork, and make it right and submit a pull request!</p>
|
||||
|
||||
<p>My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project&#39;s Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets</p>
|
||||
|
||||
<p><a href="https://github.com/intabulas/reactjs-baseline">Check it out on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="animal-sounds"></a>Animal Sounds <a class="hash-link" href="#animal-sounds">#</a></h2>
|
||||
<p><a href="http://joshduck.com/">Josh Duck</a> used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
|
||||
<figure><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9"><img src="/react/img/blog/animal-sounds.jpg" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9">Download the app...</a></p>
|
||||
<h2><a class="anchor" name="react-rails-tutorial"></a>React Rails Tutorial <a class="hash-link" href="#react-rails-tutorial">#</a></h2>
|
||||
<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
|
||||
|
||||
<blockquote>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
|
||||
cd react-rails-tutorial
|
||||
bundle install
|
||||
rake db:migrate
|
||||
rails s
|
||||
</code></pre></div>
|
||||
<p>Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!</p>
|
||||
|
||||
<p><a href="https://github.com/necrodome/react-rails-tutorial">View on GitHub...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="mixing-with-backbone"></a>Mixing with Backbone <a class="hash-link" href="#mixing-with-backbone">#</a></h2>
|
||||
<p><a href="http://eldar.djafarov.com/">Eldar Djafarov</a> implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
|
||||
<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
|
||||
<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">InfiniteScroll</span>
|
||||
<span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
|
||||
<span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
|
||||
<span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
|
||||
<span class="nx">loader</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;loader&quot;</span><span class="o">&gt;</span><span class="nx">Loading</span> <span class="p">...</span><span class="o">&lt;</span><span class="err">/div&gt;}&gt;</span>
|
||||
<span class="p">{</span><span class="nx">items</span><span class="p">}</span> <span class="c1">// &lt;-- This is the &quot;stuff&quot; you want to load</span>
|
||||
<span class="o">&lt;</span><span class="err">/InfiniteScroll&gt;</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/guillaumervls/react-infinite-scroll">Try it out on GitHub!</a></p>
|
||||
<h2><a class="anchor" name="web-components-style"></a>Web Components Style <a class="hash-link" href="#web-components-style">#</a></h2>
|
||||
<p><a href="http://subtlegradient.com/">Thomas Aylott</a> implemented an API that looks like Web Components but using React underneath.</p>
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
<h2><a class="anchor" name="react-vs-angular"></a>React vs Angular <a class="hash-link" href="#react-vs-angular">#</a></h2>
|
||||
<p>React is often compared with Angular. <a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Pete Hunt</a> wrote an opinionated post on the subject.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.</p>
|
||||
|
||||
<p>I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.</p>
|
||||
|
||||
<p><a href="http://skulbuny.com/2013/10/31/react-vs-angular/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||||
<figure><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I&#39;ve looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>&mdash; Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></figure>
|
||||
</description>
|
||||
<pubDate>2014-01-06T00:00:00+01:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React Chrome Developer Tools</title>
|
||||
<description><p>With the new year, we thought you&#39;d enjoy some new tools for debugging React code. Today we&#39;re releasing the <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">React Developer Tools</a>, an extension to the Chrome Developer Tools. <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi">Download them from the Chrome Web Store</a>.</p>
|
||||
@@ -630,54 +703,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/10/29/react-v0-5-1.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React v0.5</title>
|
||||
<description><p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we&#39;ve worked hard to improve performance and memory usage. We&#39;ve also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you&#39;ll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we&#39;ve added an additional build - <code>react-with-addons</code> - which adds support for some extras that we&#39;ve been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2><a class="anchor" name="thanks-to-our-community"></a>Thanks to Our Community <a class="hash-link" href="#thanks-to-our-community">#</a></h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we&#39;ve nearly doubled the number of contributors in that time period. We&#39;ve seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We&#39;ve also had people tell us about talks they&#39;ve given in their local community about React.</p>
|
||||
|
||||
<p>It&#39;s been awesome to see the things that people are building with React, and we can&#39;t wait to see what you come up with next!</p>
|
||||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -&gt; DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="react-with-addons-new"></a>React with Addons (New!) <a class="hash-link" href="#react-with-addons-new">#</a></h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several &quot;addons&quot; which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-10-16T00:00:00+02:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Reference in New Issue
Block a user