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

React.NET blog post

Browse Source
This commit is contained in:
Ben Alpert
2014-04-04 13:25:30 -07:00
parent cf7532a1d6
commit 431706a330
50 changed files with 736 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/05/why-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/12/community-roundup.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/19/community-roundup-2.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/21/react-v0-3-3.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/06/27/community-roundup-3.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/03/community-roundup-4.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/17/react-v0-4-0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/23/community-roundup-5.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/26/react-v0-4-1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/05/community-roundup-6.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/08/26/community-roundup-7.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/09/24/community-roundup-8.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/03/community-roundup-9.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/16/react-v0.5.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/10/29/react-v0-5-1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/05/thinking-in-react.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/06/community-roundup-10.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/11/18/community-roundup-11.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/18/react-v0.5.2-v0.4.2.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/19/react-v0.8.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/23/community-roundup-12.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2013/12/30/community-roundup-13.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/02/react-chrome-developer-tools.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/01/06/community-roundup-14.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html" class="active">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/05/community-roundup-15.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html" class="active">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/15/community-roundup-16.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/16/react-v0.9-rc1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/20/react-v0.9.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/02/24/community-roundup-17.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/14/community-roundup-18.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/19/react-v0.10-rc1.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/21/react-v0.10.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html" class="active">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/03/28/the-road-to-1.0.html
+2 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html" class="active">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
blog/2014/04/04/reactnet.html
+166
View File
@@ -0,0 +1,166 @@
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Use React and JSX in ASP.NET MVC</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Use React and JSX in ASP.NET MVC" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/2014/04/04/reactnet.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<meta property="fb:app_id" content="623268441017527" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html" class="active">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
<li><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></li>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Use React and JSX in ASP.NET MVC</h1>
<p class="meta">April 4, 2014 by Daniel Lo Nigro</p>
<hr>
<div class="post">
<p>Today we&#39;re happy to announce the initial release of
<a href="http://reactjs.net/">ReactJS.NET</a>, which makes it easier to use React and JSX
in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:</p>
<ul>
<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></li>
<li><p>JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.</p></li>
<li><p>Server-side component rendering to make your initial render super fast.</p></li>
</ul>
<p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
Web Forms applications as well as non-web applications (for example, in build
scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
on support for Linux and Mac OS X via Mono as well.</p>
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>ReactJS.NET is packaged in NuGet. Simply run <code>Install-Package React.Mvc4</code> in the
package manager console or search NuGet for &quot;React&quot; to install it.
<a href="http://reactjs.net/docs">See the documentation</a> for more information. The
GitHub project contains
<a href="https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4">a sample website</a>
demonstrating all of the features.</p>
<p>Let us know what you think, and feel free to send through any feedback and
report bugs <a href="https://github.com/reactjs/React.NET">on GitHub</a>.</p>
</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/04/04/reactnet.html"></div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">&copy; 2014 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
blog/all.html
+2
View File
@@ -61,6 +61,8 @@
<div class="inner-content">
<h1>All Posts</h1>
<p><strong><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></strong> on April 4, 2014 by Daniel Lo Nigro</p>
<p><strong><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></strong> on March 28, 2014 by Paul O'Shannessy</p>
<p><strong><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></strong> on March 21, 2014 by Paul O’Shannessy</p>
blog/index.html
+41 -56
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,45 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></h1>
<p class="meta">April 4, 2014 by Daniel Lo Nigro</p>
<hr />
<div class="post">
<p>Today we&#39;re happy to announce the initial release of
<a href="http://reactjs.net/">ReactJS.NET</a>, which makes it easier to use React and JSX
in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:</p>
<ul>
<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></li>
<li><p>JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.</p></li>
<li><p>Server-side component rendering to make your initial render super fast.</p></li>
</ul>
<p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
Web Forms applications as well as non-web applications (for example, in build
scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
on support for Linux and Mac OS X via Mono as well.</p>
<h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>ReactJS.NET is packaged in NuGet. Simply run <code>Install-Package React.Mvc4</code> in the
package manager console or search NuGet for &quot;React&quot; to install it.
<a href="http://reactjs.net/docs">See the documentation</a> for more information. The
GitHub project contains
<a href="https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4">a sample website</a>
demonstrating all of the features.</p>
<p>Let us know what you think, and feel free to send through any feedback and
report bugs <a href="https://github.com/reactjs/React.NET">on GitHub</a>.</p>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></h1>
<p class="meta">March 28, 2014 by Paul O'Shannessy</p>
@@ -358,60 +397,6 @@ Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></h1>
<p class="meta">February 24, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>It&#39;s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>
<h2><a class="anchor" name="react-in-the-real-world"></a>React in the Real World <a class="hash-link" href="#react-in-the-real-world">#</a></h2><h3><a class="anchor" name="facebook-lookback-video-editor"></a>Facebook Lookback video editor <a class="hash-link" href="#facebook-lookback-video-editor">#</a></h3>
<p>Large parts of Facebook&#39;s web frontend are already powered by React. The recently released Facebook <a href="https://www.facebook.com/lookback/edit/">Lookback video and its corresponding editor</a> are great examples of a complex, real-world React app.</p>
<h3><a class="anchor" name="russias-largest-bank-is-now-powered-by-react"></a>Russia&#39;s largest bank is now powered by React <a class="hash-link" href="#russias-largest-bank-is-now-powered-by-react">#</a></h3>
<p>Sberbank, Russia&#39;s largest bank, recently switched large parts of their site to use React, as detailed in <a href="https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg">this post by Vyacheslav Slinko</a>.</p>
<h3><a class="anchor" name="relato"></a>Relato <a class="hash-link" href="#relato">#</a></h3>
<p><a href="http://bripkens.github.io/relato/">Relato</a> by <a href="https://github.com/bripkens">Ben Ripkens</a> shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it&#39;s super fast!</p>
<h3><a class="anchor" name="makona-editor"></a>Makona Editor <a class="hash-link" href="#makona-editor">#</a></h3>
<p>John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
<figure><a href="http://johnthethird.github.io/makona-editor/"><img src="/react/img/blog/makona-editor.png" alt=""></a></figure></p>
<h3><a class="anchor" name="create-chrome-extensions-using-react"></a>Create Chrome extensions using React <a class="hash-link" href="#create-chrome-extensions-using-react">#</a></h3>
<p>React is in no way limited to just web pages. Brandon Tilley (<a href="https://twitter.com/BinaryMuse">@BinaryMuse</a>) just released a detailed walk-through of <a href="http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html">how he built his Chrome extension &quot;Fast Tab Switcher&quot; using React</a>.</p>
<h3><a class="anchor" name="twitter-streaming-client"></a>Twitter Streaming Client <a class="hash-link" href="#twitter-streaming-client">#</a></h3>
<p>Javier Aguirre (<a href="https://twitter.com/javaguirre">@javaguirre</a>) put together a simple <a href="http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/">twitter streaming client using node, socket.io and React</a>.</p>
<h3><a class="anchor" name="sproutsheet"></a>Sproutsheet <a class="hash-link" href="#sproutsheet">#</a></h3>
<p><a href="http://sproutsheet.com/">Sproutsheet</a> is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It&#39;s currently in beta and supports localStorage, and data/image import and export.</p>
<h3><a class="anchor" name="instant-domain-search"></a>Instant Domain Search <a class="hash-link" href="#instant-domain-search">#</a></h3>
<p><a href="https://instantdomainsearch.com/">Instant Domain Search</a> also uses React. It sure is instant!</p>
<h3><a class="anchor" name="svg-based-graphical-node-editor"></a>SVG-based graphical node editor <a class="hash-link" href="#svg-based-graphical-node-editor">#</a></h3>
<p><a href="http://noflojs.org/">NoFlo</a> and <a href="http://meemoo.org/">Meemoo</a> developer <a href="http://www.forresto.com/">Forresto Oliphant</a> built an awesome SVG-based <a href="http://forresto.github.io/prototyping/react/">node editor</a> in React.
<figure><a href="http://forresto.github.io/prototyping/react/"><img src="/react/img/blog/react-svg-fbp.png" alt=""></a></figure></p>
<h3><a class="anchor" name="ultimate-tic-tac-toe-game-in-react"></a>Ultimate Tic-Tac-Toe Game in React <a class="hash-link" href="#ultimate-tic-tac-toe-game-in-react">#</a></h3>
<p>Rafał Cieślak (<a href="https://twitter.com/Ravicious">@Ravicious</a>) wrote a <a href="http://ravicious.github.io/ultimate-ttt/">React version</a> of <a href="http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/">Ultimate Tic Tac Toe</a>. Find the source <a href="https://github.com/ravicious/ultimate-ttt">here</a>.</p>
<h3><a class="anchor" name="reactjs-gallery"></a>ReactJS Gallery <a class="hash-link" href="#reactjs-gallery">#</a></h3>
<p><a href="https://github.com/lele85">Emanuele Rampichini</a>&#39;s <a href="https://github.com/lele85/ReactGallery">ReactJS Gallery</a> is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.</p>
<p>Emanuele shared this awesome demo video with us:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-components"></a>React Components <a class="hash-link" href="#react-components">#</a></h2><h3><a class="anchor" name="table-sorter"></a>Table Sorter <a class="hash-link" href="#table-sorter">#</a></h3>
<p><a href="http://bgerm.github.io/react-table-sorter-demo/">Table Sorter</a> by <a href="https://github.com/bgerm">bgerm</a> [<a href="https://github.com/bgerm/react-table-sorter-demo">source</a>] is another helpful React component.</p>
<h3><a class="anchor" name="static-search"></a>Static-search <a class="hash-link" href="#static-search">#</a></h3>
<p>Dmitry Chestnykh <a href="https://twitter.com/dchest">@dchest</a> wrote a <a href="https://github.com/dchest/static-search">static search indexer</a> in Go, along with a <a href="http://www.codingrobots.com/search/">React-based web front-end</a> that consumes search result via JSON.</p>
<h3><a class="anchor" name="lorem-ipsum-component"></a>Lorem Ipsum component <a class="hash-link" href="#lorem-ipsum-component">#</a></h3>
<p><a href="https://github.com/martinandert">Martin Andert</a> created <a href="https://github.com/martinandert/react-lorem-component">react-lorem-component</a>, a simple component for all your placeholding needs.</p>
<h3><a class="anchor" name="input-with-placeholder-shim"></a>Input with placeholder shim <a class="hash-link" href="#input-with-placeholder-shim">#</a></h3>
<p><a href="https://github.com/enigma-io/react-input-placeholder">react-input=placeholder</a> by <a href="https://github.com/enigma-io">enigma-io</a> is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don&#39;t natively support it.</p>
<h3><a class="anchor" name="dicontainer"></a>diContainer <a class="hash-link" href="#dicontainer">#</a></h3>
<p><a href="https://github.com/SpektrumFM/dicontainer">dicontainer</a> provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.</p>
<h2><a class="anchor" name="react-server-rendering"></a>React server rendering <a class="hash-link" href="#react-server-rendering">#</a></h2>
<p>Ever wonder how to pre-render React components on the server? <a href="https://github.com/mhart/react-server-example">react-server-example</a> by Michael Hart (<a href="http://twitter.com/hichaelmart">@hichaelmart</a>) walks through the necessary steps.</p>
<p>Similarly, Alan deLevie (<a href="https://twitter.com/adelevie">@adelevie</a>) created <a href="https://github.com/adelevie/react-client-server-starter">react-client-server-starter</a>, another detailed walk-through of how to server-render your app.</p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
</div>
</div>
<div class="pagination">
blog/page2/index.html
+56 -76
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,60 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></h1>
<p class="meta">February 24, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>It&#39;s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>
<h2><a class="anchor" name="react-in-the-real-world"></a>React in the Real World <a class="hash-link" href="#react-in-the-real-world">#</a></h2><h3><a class="anchor" name="facebook-lookback-video-editor"></a>Facebook Lookback video editor <a class="hash-link" href="#facebook-lookback-video-editor">#</a></h3>
<p>Large parts of Facebook&#39;s web frontend are already powered by React. The recently released Facebook <a href="https://www.facebook.com/lookback/edit/">Lookback video and its corresponding editor</a> are great examples of a complex, real-world React app.</p>
<h3><a class="anchor" name="russias-largest-bank-is-now-powered-by-react"></a>Russia&#39;s largest bank is now powered by React <a class="hash-link" href="#russias-largest-bank-is-now-powered-by-react">#</a></h3>
<p>Sberbank, Russia&#39;s largest bank, recently switched large parts of their site to use React, as detailed in <a href="https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg">this post by Vyacheslav Slinko</a>.</p>
<h3><a class="anchor" name="relato"></a>Relato <a class="hash-link" href="#relato">#</a></h3>
<p><a href="http://bripkens.github.io/relato/">Relato</a> by <a href="https://github.com/bripkens">Ben Ripkens</a> shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it&#39;s super fast!</p>
<h3><a class="anchor" name="makona-editor"></a>Makona Editor <a class="hash-link" href="#makona-editor">#</a></h3>
<p>John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
<figure><a href="http://johnthethird.github.io/makona-editor/"><img src="/react/img/blog/makona-editor.png" alt=""></a></figure></p>
<h3><a class="anchor" name="create-chrome-extensions-using-react"></a>Create Chrome extensions using React <a class="hash-link" href="#create-chrome-extensions-using-react">#</a></h3>
<p>React is in no way limited to just web pages. Brandon Tilley (<a href="https://twitter.com/BinaryMuse">@BinaryMuse</a>) just released a detailed walk-through of <a href="http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html">how he built his Chrome extension &quot;Fast Tab Switcher&quot; using React</a>.</p>
<h3><a class="anchor" name="twitter-streaming-client"></a>Twitter Streaming Client <a class="hash-link" href="#twitter-streaming-client">#</a></h3>
<p>Javier Aguirre (<a href="https://twitter.com/javaguirre">@javaguirre</a>) put together a simple <a href="http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/">twitter streaming client using node, socket.io and React</a>.</p>
<h3><a class="anchor" name="sproutsheet"></a>Sproutsheet <a class="hash-link" href="#sproutsheet">#</a></h3>
<p><a href="http://sproutsheet.com/">Sproutsheet</a> is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It&#39;s currently in beta and supports localStorage, and data/image import and export.</p>
<h3><a class="anchor" name="instant-domain-search"></a>Instant Domain Search <a class="hash-link" href="#instant-domain-search">#</a></h3>
<p><a href="https://instantdomainsearch.com/">Instant Domain Search</a> also uses React. It sure is instant!</p>
<h3><a class="anchor" name="svg-based-graphical-node-editor"></a>SVG-based graphical node editor <a class="hash-link" href="#svg-based-graphical-node-editor">#</a></h3>
<p><a href="http://noflojs.org/">NoFlo</a> and <a href="http://meemoo.org/">Meemoo</a> developer <a href="http://www.forresto.com/">Forresto Oliphant</a> built an awesome SVG-based <a href="http://forresto.github.io/prototyping/react/">node editor</a> in React.
<figure><a href="http://forresto.github.io/prototyping/react/"><img src="/react/img/blog/react-svg-fbp.png" alt=""></a></figure></p>
<h3><a class="anchor" name="ultimate-tic-tac-toe-game-in-react"></a>Ultimate Tic-Tac-Toe Game in React <a class="hash-link" href="#ultimate-tic-tac-toe-game-in-react">#</a></h3>
<p>Rafał Cieślak (<a href="https://twitter.com/Ravicious">@Ravicious</a>) wrote a <a href="http://ravicious.github.io/ultimate-ttt/">React version</a> of <a href="http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/">Ultimate Tic Tac Toe</a>. Find the source <a href="https://github.com/ravicious/ultimate-ttt">here</a>.</p>
<h3><a class="anchor" name="reactjs-gallery"></a>ReactJS Gallery <a class="hash-link" href="#reactjs-gallery">#</a></h3>
<p><a href="https://github.com/lele85">Emanuele Rampichini</a>&#39;s <a href="https://github.com/lele85/ReactGallery">ReactJS Gallery</a> is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.</p>
<p>Emanuele shared this awesome demo video with us:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-components"></a>React Components <a class="hash-link" href="#react-components">#</a></h2><h3><a class="anchor" name="table-sorter"></a>Table Sorter <a class="hash-link" href="#table-sorter">#</a></h3>
<p><a href="http://bgerm.github.io/react-table-sorter-demo/">Table Sorter</a> by <a href="https://github.com/bgerm">bgerm</a> [<a href="https://github.com/bgerm/react-table-sorter-demo">source</a>] is another helpful React component.</p>
<h3><a class="anchor" name="static-search"></a>Static-search <a class="hash-link" href="#static-search">#</a></h3>
<p>Dmitry Chestnykh <a href="https://twitter.com/dchest">@dchest</a> wrote a <a href="https://github.com/dchest/static-search">static search indexer</a> in Go, along with a <a href="http://www.codingrobots.com/search/">React-based web front-end</a> that consumes search result via JSON.</p>
<h3><a class="anchor" name="lorem-ipsum-component"></a>Lorem Ipsum component <a class="hash-link" href="#lorem-ipsum-component">#</a></h3>
<p><a href="https://github.com/martinandert">Martin Andert</a> created <a href="https://github.com/martinandert/react-lorem-component">react-lorem-component</a>, a simple component for all your placeholding needs.</p>
<h3><a class="anchor" name="input-with-placeholder-shim"></a>Input with placeholder shim <a class="hash-link" href="#input-with-placeholder-shim">#</a></h3>
<p><a href="https://github.com/enigma-io/react-input-placeholder">react-input=placeholder</a> by <a href="https://github.com/enigma-io">enigma-io</a> is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don&#39;t natively support it.</p>
<h3><a class="anchor" name="dicontainer"></a>diContainer <a class="hash-link" href="#dicontainer">#</a></h3>
<p><a href="https://github.com/SpektrumFM/dicontainer">dicontainer</a> provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.</p>
<h2><a class="anchor" name="react-server-rendering"></a>React server rendering <a class="hash-link" href="#react-server-rendering">#</a></h2>
<p>Ever wonder how to pre-render React components on the server? <a href="https://github.com/mhart/react-server-example">react-server-example</a> by Michael Hart (<a href="http://twitter.com/hichaelmart">@hichaelmart</a>) walks through the necessary steps.</p>
<p>Similarly, Alan deLevie (<a href="https://twitter.com/adelevie">@adelevie</a>) created <a href="https://github.com/adelevie/react-client-server-starter">react-client-server-starter</a>, another detailed walk-through of how to server-render your app.</p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
<p class="meta">February 20, 2014 by Ben Alpert</p>
@@ -531,80 +585,6 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/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&#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>
<div><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></div>
</div>
</div>
<div class="pagination">
blog/page3/index.html
+76 -22
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,80 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/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&#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>
<div><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></div>
</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>
@@ -340,26 +414,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&#39;re releasing an update to address a potential XSS vulnerability that can arise when using user data as a <code>key</code>. Typically &quot;safe&quot; 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&#39;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&#39;ve encouraged responsible disclosure as part of <a href="https://www.facebook.com/whitehat/">Facebook&#39;s whitehat bounty program</a> since we launched, we don&#39;t have a good process for notifying our users. Hopefully we don&#39;t need to use it, but moving forward we&#39;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">
blog/page4/index.html
+22 -52
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,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&#39;re releasing an update to address a potential XSS vulnerability that can arise when using user data as a <code>key</code>. Typically &quot;safe&quot; 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&#39;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&#39;ve encouraged responsible disclosure as part of <a href="https://www.facebook.com/whitehat/">Facebook&#39;s whitehat bounty program</a> since we launched, we don&#39;t have a good process for notifying our users. Hopefully we don&#39;t need to use it, but moving forward we&#39;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>
@@ -453,56 +473,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&#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>
</div>
</div>
<div class="pagination">
blog/page5/index.html
+52 -75
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,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&#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>
</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>
@@ -362,79 +412,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&#39;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">-&gt;</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">&#39;items&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">]</span>
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span>
<span class="nx">@p</span> <span class="s">&quot;</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items.&quot;</span>
<span class="nx">@form</span> <span class="s">&#39;onSubmit&#39;</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">&#39;onChange&#39;</span><span class="o">:</span> <span class="nx">@onChange</span>
<span class="s">&#39;value&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;text&#39;</span><span class="p">]</span>
<span class="s">&#39;autoFocus&#39;</span><span class="o">:</span> <span class="kc">true</span>
<span class="s">&#39;ref&#39;</span><span class="o">:</span> <span class="s">&#39;textInput&#39;</span>
<span class="nx">@button</span> <span class="s">&quot;Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</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">&quot;</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&#39;m the author of &quot;<a href="http://landoflisp.com/">Land of Lisp</a>&quot; 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 &quot;render&quot; 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 &quot;hard work&quot; 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">
blog/page6/index.html
+75 -53
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,79 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/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&#39;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">-&gt;</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">&#39;items&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">]</span>
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span>
<span class="nx">@p</span> <span class="s">&quot;</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items.&quot;</span>
<span class="nx">@form</span> <span class="s">&#39;onSubmit&#39;</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">&#39;onChange&#39;</span><span class="o">:</span> <span class="nx">@onChange</span>
<span class="s">&#39;value&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;text&#39;</span><span class="p">]</span>
<span class="s">&#39;autoFocus&#39;</span><span class="o">:</span> <span class="kc">true</span>
<span class="s">&#39;ref&#39;</span><span class="o">:</span> <span class="s">&#39;textInput&#39;</span>
<span class="nx">@button</span> <span class="s">&quot;Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</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">&quot;</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&#39;m the author of &quot;<a href="http://landoflisp.com/">Land of Lisp</a>&quot; 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 &quot;render&quot; 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 &quot;hard work&quot; 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>
@@ -290,57 +363,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 &quot;description&quot;.</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 &quot;category&quot;.</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">&#39;News&#39;</span><span class="p">,</span><span class="s1">&#39;Photos&#39;</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
<span class="c1">// A prop named &quot;dialog&quot; 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&#39;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">&#39;default value&#39;</span><span class="p">;</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>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">&#39;default value&#39;</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&#39;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">
blog/page7/index.html
+53 -76
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,57 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2013/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 &quot;description&quot;.</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 &quot;category&quot;.</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">&#39;News&#39;</span><span class="p">,</span><span class="s1">&#39;Photos&#39;</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
<span class="c1">// A prop named &quot;dialog&quot; 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&#39;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">&#39;default value&#39;</span><span class="p">;</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>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">&#39;default value&#39;</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&#39;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>
@@ -306,80 +357,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&#39;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&#39;s directives instead. So I took the first Google hit for &quot;AngularJS directive tutorial&quot; (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
<p>We&#39;ve designed React from the beginning to work well with other libraries. Angular is no exception. Let&#39;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 &amp; 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">
blog/page8/index.html
+76 -2
View File
@@ -63,6 +63,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/04/04/reactnet.html">Use React and JSX in ASP.NET MVC</a></li>
<li><a href="/react/blog/2014/03/28/the-road-to-1.0.html">The Road to 1.0</a></li>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
@@ -81,8 +83,6 @@
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
@@ -90,6 +90,80 @@
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/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&#39;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&#39;s directives instead. So I took the first Google hit for &quot;AngularJS directive tutorial&quot; (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
<p>We&#39;ve designed React from the beginning to work well with other libraries. Angular is no exception. Let&#39;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 &amp; 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>
css/react.css
+1 -1
View File
File diff suppressed because one or more lines are too long
feed.xml
+40 -75
View File
@@ -6,6 +6,44 @@
<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>Use React and JSX in ASP.NET MVC</title>
<description>&lt;p&gt;Today we&amp;#39;re happy to announce the initial release of
&lt;a href=&quot;http://reactjs.net/&quot;&gt;ReactJS.NET&lt;/a&gt;, which makes it easier to use React and JSX
in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;html language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;@Url.Content(&amp;quot;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;Scripts&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;HelloWorld&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;jsx&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;quot;)&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Server-side component rendering to make your initial render super fast.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
Web Forms applications as well as non-web applications (for example, in build
scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
on support for Linux and Mac OS X via Mono as well.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;installation&quot;&gt;&lt;/a&gt;Installation &lt;a class=&quot;hash-link&quot; href=&quot;#installation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;ReactJS.NET is packaged in NuGet. Simply run &lt;code&gt;Install-Package React.Mvc4&lt;/code&gt; in the
package manager console or search NuGet for &amp;quot;React&amp;quot; to install it.
&lt;a href=&quot;http://reactjs.net/docs&quot;&gt;See the documentation&lt;/a&gt; for more information. The
GitHub project contains
&lt;a href=&quot;https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4&quot;&gt;a sample website&lt;/a&gt;
demonstrating all of the features.&lt;/p&gt;
&lt;p&gt;Let us know what you think, and feel free to send through any feedback and
report bugs &lt;a href=&quot;https://github.com/reactjs/React.NET&quot;&gt;on GitHub&lt;/a&gt;.&lt;/p&gt;
</description>
<pubDate>2014-04-04T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/04/04/reactnet.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/04/04/reactnet.html</guid>
</item>
<item>
<title>The Road to 1.0</title>
<description>&lt;p&gt;When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We&amp;#39;ve learned a lot over the past 9 months and we&amp;#39;ve thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined &lt;a href=&quot;https://github.com/facebook/react/wiki/Projects&quot;&gt;several projects&lt;/a&gt; that we have planned to take us to 1.0 and beyond. Today I&amp;#39;m writing a bit more about them to give our users a better insight into our plans.&lt;/p&gt;
@@ -633,7 +671,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;building-a-complex-react-component&quot;&gt;&lt;/a&gt;Building a complex React component &lt;a class=&quot;hash-link&quot; href=&quot;#building-a-complex-react-component&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://matt-harrison.com/&quot;&gt;Matt Harrison&lt;/a&gt; walks through the process of &lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;creating an SVG-based Resistance Calculator&lt;/a&gt; using React. &lt;figure&gt;&lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;&lt;img src=&quot;/react/img/blog/resistance-calculator.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweets&quot;&gt;&lt;/a&gt;Random Tweets &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweets&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs](https://twitter.com/search?q=%23reactjs&amp;src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.&lt;/p&gt;&amp;mdash; Anton Astashov (@anton_astashov) &lt;a href=&quot;https://twitter.com/anton_astashov/status/417556491646693378&quot;&gt;December 30, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs](https://twitter.com/search?q=%23reactjs&amp;src=hash) has very simple API, but it&#39;s amazing how much work has been done under the hood to make it blazing fast.&lt;/p&gt;&amp;mdash; Anton Astashov (@anton_astashov) &lt;a href=&quot;https://twitter.com/anton_astashov/status/417556491646693378&quot;&gt;December 30, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs]((https://twitter.com/search?q=%23reactjs&amp;src=hash) makes refactoring your HTML as easy &amp; natural as refactoring your javascript [@react_js](https://twitter.com/react_js)&lt;/p&gt;&amp;mdash; Jared Forsyth (@jaredforsyth) &lt;a href=&quot;https://twitter.com/jaredforsyth/status/420304083010854912&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
@@ -753,85 +791,12 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;om-experience-report&quot;&gt;&lt;/a&gt;Om Experience Report &lt;a class=&quot;hash-link&quot; href=&quot;#om-experience-report&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Adam Solove (&lt;a href=&quot;https://twitter.com/asolove/&quot;&gt;@asolove&lt;/a&gt;) &lt;a href=&quot;http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html&quot;&gt;dives a little deeper into Om, React and ClojureScript&lt;/a&gt;. He shares some helpful tips he gathered while building his &lt;a href=&quot;https://github.com/asolove/carto-crayon&quot;&gt;CartoCrayon&lt;/a&gt; prototype.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;not-so-random-tweet&quot;&gt;&lt;/a&gt;Not-so-random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#not-so-random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.&lt;/p&gt;&amp;mdash; Adam Solove (@asolove) &lt;a href=&quot;https://twitter.com/asolove/status/420294067637858304&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[@swannodette](https://twitter.com/swannodette) No thank you! It&#39;s honestly a bit weird because Om is exactly what I didn&#39;t know I wanted for doing functional UI work.&lt;/p&gt;&amp;mdash; Adam Solove (@asolove) &lt;a href=&quot;https://twitter.com/asolove/status/420294067637858304&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-02-05T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html</guid>
</item>
<item>
<title>Community Round-up #14</title>
<description>&lt;p&gt;The theme of this first round-up of 2014 is integration. I&amp;#39;ve tried to assemble a list of articles and projects that use React in various environments.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-baseline&quot;&gt;&lt;/a&gt;React Baseline &lt;a class=&quot;hash-link&quot; href=&quot;#react-baseline&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React is only one-piece of your web application stack. &lt;a href=&quot;https://github.com/intabulas&quot;&gt;Mark Lussier&lt;/a&gt; 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.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;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&lt;/p&gt;
&lt;p&gt;I encourage you to fork, and make it right and submit a pull request!&lt;/p&gt;
&lt;p&gt;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&amp;#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&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/intabulas/reactjs-baseline&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;animal-sounds&quot;&gt;&lt;/a&gt;Animal Sounds &lt;a class=&quot;hash-link&quot; href=&quot;#animal-sounds&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://joshduck.com/&quot;&gt;Josh Duck&lt;/a&gt; used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
&lt;figure&gt;&lt;a href=&quot;http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9&quot;&gt;&lt;img src=&quot;/react/img/blog/animal-sounds.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9&quot;&gt;Download the app...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-rails-tutorial&quot;&gt;&lt;/a&gt;React Rails Tutorial &lt;a class=&quot;hash-link&quot; href=&quot;#react-rails-tutorial&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://selem.im&quot;&gt;Selem Delul&lt;/a&gt; bundled the &lt;a href=&quot;http://facebook.github.io/react/docs/tutorial.html&quot;&gt;React Tutorial&lt;/a&gt; into a rails app. This is a good example on how to get started with a rails project.&lt;/p&gt;
&lt;blockquote&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;git clone https://github.com/necrodome/react-rails-tutorial
cd react-rails-tutorial
bundle install
rake db:migrate
rails s
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/necrodome/react-rails-tutorial&quot;&gt;View on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;mixing-with-backbone&quot;&gt;&lt;/a&gt;Mixing with Backbone &lt;a class=&quot;hash-link&quot; href=&quot;#mixing-with-backbone&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://eldar.djafarov.com/&quot;&gt;Eldar Djafarov&lt;/a&gt; implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.&lt;/p&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/djkojb/qZf48/13/embedded/&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;&lt;a href=&quot;http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/&quot;&gt;Check out the blog post...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-infinite-scroll&quot;&gt;&lt;/a&gt;React Infinite Scroll &lt;a class=&quot;hash-link&quot; href=&quot;#react-infinite-scroll&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/guillaumervls&quot;&gt;Guillaume Rivals&lt;/a&gt; implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;InfiniteScroll&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;pageStart&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;loadFunc&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;hasMore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loader&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;loader&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Loading&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;}&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// &amp;lt;-- This is the &amp;quot;stuff&amp;quot; you want to load&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/InfiniteScroll&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/guillaumervls/react-infinite-scroll&quot;&gt;Try it out on GitHub!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;web-components-style&quot;&gt;&lt;/a&gt;Web Components Style &lt;a class=&quot;hash-link&quot; href=&quot;#web-components-style&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://subtlegradient.com/&quot;&gt;Thomas Aylott&lt;/a&gt; implemented an API that looks like Web Components but using React underneath.&lt;/p&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-vs-angular&quot;&gt;&lt;/a&gt;React vs Angular &lt;a class=&quot;hash-link&quot; href=&quot;#react-vs-angular&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React is often compared with Angular. &lt;a href=&quot;http://skulbuny.com/2013/10/31/react-vs-angular/&quot;&gt;Pete Hunt&lt;/a&gt; wrote an opinionated post on the subject.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://skulbuny.com/2013/10/31/react-vs-angular/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweet&quot;&gt;&lt;/a&gt;Random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Really intrigued by React.js. I&amp;#39;ve looked at all JS frameworks, and excepting &lt;a href=&quot;https://twitter.com/serenadejs&quot;&gt;@serenadejs&lt;/a&gt; this is the first one which makes sense to me.&lt;/p&gt;&amp;mdash; Jonas Nicklas (@jonicklas) &lt;a href=&quot;https://twitter.com/jonicklas/statuses/412640708755869696&quot;&gt;December 16, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-01-06T00:00:00-08: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>
</channel>
</rss>