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

Community Roundup #6

Browse Source
This commit is contained in:
Paul O’Shannessy
2013-08-05 16:59:01 -07:00
parent 8af4fbb0f0
commit b6526e70d6
18 changed files with 334 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2013/06/02/jsfiddle-integration.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/06/05/why-react.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/06/12/community-roundup.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/06/19/community-roundup-2.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/06/21/react-v0-3-3.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/06/27/community-roundup-3.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/03/community-roundup-4.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/17/react-v0-4-0.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/23/community-roundup-5.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/07/26/react-v0-4-1.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html" class="active">React v0.4.1</a></li>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+2
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html" class="active">Use React and JSX in Ruby on Rails</a></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
blog/2013/08/05/community-roundup-6.html
+207
View File
@@ -0,0 +1,207 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Community Round-up #6</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Community Round-up #6" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.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" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/react.css">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
<!-- <iframe src="http://ghbtns.com/github&#45;btn.html?user=facebook&#38;repo=react.js&#38;type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html" class="active">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
<li><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></li>
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
<li><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></li>
<li><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></li>
<li><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></li>
<li><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></li>
<li><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></li>
<li><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Community Round-up #6</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>React Game Tutorial</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>Reactify</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>React Integration with Este</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>React Stylus Boilerplate</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>WebFUI</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 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/2013/08/05/community-roundup-6.html"></div>
</div>
</section>
<footer class="wrap">
<div class="left">A Facebook &amp; Instagram collaboration.</div>
<div class="right">&copy; 2013 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
blog/index.html
+19
View File
@@ -57,6 +57,8 @@
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
<li><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></li>
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
@@ -89,6 +91,23 @@
<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>
<p>
<a href="/react/blog/2013/08/05/community-roundup-6.html">Continue Reading &rarr;</a>
</p>
</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>
feed.xml
+82 -85
View File
@@ -6,6 +6,88 @@
<link>http://facebook.github.io/react</link>
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
<item>
<title>Community Round-up #6</title>
<description>&lt;p&gt;This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It&amp;#39;s great to see the adoption of React growing.&lt;/p&gt;
&lt;h2&gt;React Game Tutorial&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/CalebCassel&quot;&gt;Caleb Cassel&lt;/a&gt; wrote a &lt;a href=&quot;https://rawgithub.com/calebcassel/react-demo/master/part1.html&quot;&gt;step-by-step tutorial&lt;/a&gt; about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
&lt;figure&gt;&lt;a href=&quot;https://rawgithub.com/calebcassel/react-demo/master/part1.html&quot;&gt;&lt;img src=&quot;/react/img/blog/dog-tutorial.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h2&gt;Reactify&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://andreypopp.com/&quot;&gt;Andrey Popp&lt;/a&gt; created a &lt;a href=&quot;http://browserify.org/&quot;&gt;Browserify&lt;/a&gt; helper to compile JSX files.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Browserify v2 transform for &lt;code&gt;text/jsx&lt;/code&gt;. Basic usage is:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;% browserify -t reactify main.jsx
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;code&gt;reactify&lt;/code&gt; transform activates for files with either &lt;code&gt;.jsx&lt;/code&gt; extension or &lt;code&gt;/** @jsx React.DOM */&lt;/code&gt; pragma as a first line for any &lt;code&gt;.js&lt;/code&gt; file.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/andreypopp/reactify&quot;&gt;Check it out on Github...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;React Integration with Este&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://daniel.steigerwald.cz/&quot;&gt;Daniel Steigerwald&lt;/a&gt; is now using React within &lt;a href=&quot;https://github.com/steida/este&quot;&gt;Este&lt;/a&gt;, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;coffeescript language-coffeescript&quot; data-lang=&quot;coffeescript&quot;&gt;&lt;span class=&quot;nv&quot;&gt;este.demos.react.todoApp = &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;este&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;react&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;create&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;sr&quot;&gt;/** @lends {React.ReactComponent.prototype} */&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;nv&quot;&gt;render: &lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;-&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@div&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;este&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;demos&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;react&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;todoList&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;#39;items&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;@state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;#39;items&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;@state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;#39;items&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;].&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@p&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;@state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;#39;items&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;].&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt; items.&amp;quot;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@form&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;#39;onSubmit&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;@onFormSubmit&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@input&lt;/span&gt;
&lt;span class=&quot;s&quot;&gt;&amp;#39;onChange&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;@onChange&lt;/span&gt;
&lt;span class=&quot;s&quot;&gt;&amp;#39;value&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;@state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;#39;text&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;s&quot;&gt;&amp;#39;autoFocus&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;
&lt;span class=&quot;s&quot;&gt;&amp;#39;ref&amp;#39;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;#39;textInput&amp;#39;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@button&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;Add &lt;/span&gt;&lt;span class=&quot;err&quot;&gt;#&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;#{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;@state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;#39;items&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;].&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;si&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee&quot;&gt;Check it out on Github...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;React Stylus Boilerplate&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://zaim.github.io/&quot;&gt;Zaim Bakar&lt;/a&gt; shared his boilerplate to get started with Stylus CSS processor.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Very minimal HTML boilerplate&lt;/li&gt;
&lt;li&gt;Uses Stylus, with nib included&lt;/li&gt;
&lt;li&gt;Uses two build targets:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;grunt build&lt;/code&gt; to compile JSX and Stylus into a development build&lt;/li&gt;
&lt;li&gt;&lt;code&gt;grunt dist&lt;/code&gt; to minify and optimize the development build for production&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/zaim/react-stylus-boilerplate&quot;&gt;Check it out on Github...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;WebFUI&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://lisperati.com/&quot;&gt;Conrad Barski&lt;/a&gt;, author of the popular book &lt;a href=&quot;http://landoflisp.com/&quot;&gt;Land of Lisp&lt;/a&gt;, wants to use React for his ClojureScript library called &lt;a href=&quot;https://github.com/drcode/webfui&quot;&gt;WebFUI&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I&amp;#39;m the author of &amp;quot;&lt;a href=&quot;http://landoflisp.com/&quot;&gt;Land of Lisp&lt;/a&gt;&amp;quot; and I love your framework. I built a somewhat similar framework a year ago &lt;a href=&quot;https://github.com/drcode/webfui&quot;&gt;WebFUI&lt;/a&gt; aimed at ClojureScript. My framework also uses global event delegates, a global &amp;quot;render&amp;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.)&lt;/p&gt;
&lt;p&gt;Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the &amp;quot;hard work&amp;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)
&lt;figure&gt;&lt;a href=&quot;https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ&quot;&gt;&lt;img src=&quot;/react/img/blog/landoflisp.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
</description>
<pubDate>2013-08-05T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html</guid>
</item>
<item>
<title>Use React and JSX in Ruby on Rails</title>
<description>&lt;p&gt;Today we&amp;#39;re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: &lt;a href=&quot;https://github.com/facebook/react-rails&quot;&gt;react-rails&lt;/a&gt;.&lt;/p&gt;
@@ -528,90 +610,5 @@ If you were using React without JSX previously, your code should still work.&lt;
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/21/react-v0-3-3.html</guid>
</item>
<item>
<title>Community Round-up #2</title>
<description>&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;Some quick thoughts on React&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.andrewgreig.com/&quot;&gt;Andrew Greig&lt;/a&gt; made a blog post that gives a high level description of what React is.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.andrewgreig.com/637/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;React and Socket.IO Chat Application&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://danialk.github.io/&quot;&gt;Danial Khosravi&lt;/a&gt; made a real-time chat application that interacts with the back-end using Socket.IO.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A week ago I was playing with AngularJS and &lt;a href=&quot;https://github.com/btford/angular-socket-io-im&quot;&gt;this little chat application&lt;/a&gt; which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in &lt;a href=&quot;http://www.echojs.com/&quot;&gt;EchoJS&lt;/a&gt; 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&amp;#39;s Backend for server side of this little app.
&lt;figure&gt;&lt;a href=&quot;http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/&quot;&gt;&lt;img src=&quot;/react/img/blog/chatapp.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;React and Other Frameworks&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.petehunt.net/blog/&quot;&gt;Pete Hunt&lt;/a&gt; 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.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular&amp;#39;s directives instead. So I took the first Google hit for &amp;quot;AngularJS directive tutorial&amp;quot; (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]&lt;/p&gt;
&lt;p&gt;We&amp;#39;ve designed React from the beginning to work well with other libraries. Angular is no exception. Let&amp;#39;s take the original Angular example and use React to implement the fundoo-rating directive.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;In the same vein, &lt;a href=&quot;https://twitter.com/markov_twain/status/345702941845499906&quot;&gt;Markov Twain&lt;/a&gt; re-implemented the examples on the front-page &lt;a href=&quot;http://jsbin.com/azihiw/2/edit&quot;&gt;with Ember&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/vla&quot;&gt;Vlad Yazhbin&lt;/a&gt; re-implemented the tutorial &lt;a href=&quot;http://jsfiddle.net/vla/Cdrse/&quot;&gt;with Angular&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;Web Components: React &amp;amp; x-tags&lt;/h2&gt;
&lt;p&gt;Mozilla and Google are actively working on Web Components. &lt;a href=&quot;http://blog.vjeux.com/&quot;&gt;Vjeux&lt;/a&gt; wrote a proof of concept that shows how to implement them using React.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Using &lt;a href=&quot;http://www.x-tags.org/&quot;&gt;x-tags&lt;/a&gt; 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 &lt;a href=&quot;https://github.com/vjeux/react-xtags/&quot;&gt;x-react&lt;/a&gt; to have them being rendered in React.
&lt;figure&gt;&lt;a href=&quot;http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html&quot;&gt;&lt;img src=&quot;/react/img/blog/xreact.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;React TodoMVC Example&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://todomvc.com/&quot;&gt;TodoMVC.com&lt;/a&gt; is a website that collects various implementations of the same basic Todo app. &lt;a href=&quot;http://www.petehunt.net/blog/&quot;&gt;Pete Hunt&lt;/a&gt; wrote an idiomatic React version.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.&lt;/p&gt;
&lt;p&gt;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.
&lt;figure&gt;&lt;a href=&quot;http://todomvc.com/labs/architecture-examples/react/&quot;&gt;&lt;img src=&quot;/react/img/blog/todomvc.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react&quot;&gt;Read the source code...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;JSX is not HTML&lt;/h2&gt;
&lt;p&gt;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:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/react/docs/jsx-is-not-html.html&quot;&gt;Whitespace removal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/react/docs/jsx-is-not-html.html&quot;&gt;HTML Entities&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/react/docs/jsx-is-not-html.html&quot;&gt;Comments&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/react/docs/jsx-is-not-html.html&quot;&gt;Custom HTML Attributes&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2013-06-19T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/06/19/community-roundup-2.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/19/community-roundup-2.html</guid>
</item>
</channel>
</rss>
img/blog/dog-tutorial.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

img/blog/landoflisp.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB