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
Files
118e64c40076299eccea76b894441ce7a07bcff2
react/feed.xml
T
Paul O’Shannessy 118e64c400 Update Jekyll (#2035)
2014-08-13 13:15:29 -07:00

669 lines
109 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>React</title>
<description>A JavaScript library for building user interfaces</description>
<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 #21</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-router&quot;&gt;&lt;/a&gt;React Router &lt;a class=&quot;hash-link&quot; href=&quot;#react-router&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://ryanflorence.com/&quot;&gt;Ryan Florence&lt;/a&gt; and &lt;a href=&quot;http://twitter.com/mjackson&quot;&gt;Michael Jackson&lt;/a&gt; ported Ember&amp;#39;s router to React in a project called &lt;a href=&quot;https://github.com/rackt/react-router&quot;&gt;React Router&lt;/a&gt;. This is a very good example of both communities working together to make the web better!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&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;Routes&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&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;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;about&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&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;About&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;users&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&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;Users&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;user&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;/user/:userId&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&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;User&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Route&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Route&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Routes&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;going-big-with-react&quot;&gt;&lt;/a&gt;Going Big with React &lt;a class=&quot;hash-link&quot; href=&quot;#going-big-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Areeb Malik, from Facebook, talks about his experience using React. &amp;quot;On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we&amp;#39;ll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://skillsmatter.com/skillscasts/5429-going-big-with-react&quot;&gt;&lt;img src=&quot;/react/img/blog/skills-matter.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;!--
&lt;iframe allowfullscreen=&quot;&quot; data-progress=&quot;true&quot; frameborder=&quot;0&quot; height=&quot;390&quot; id=&quot;vimeo-player&quot; mozallowfullscreen=&quot;&quot; src=&quot;//player.vimeo.com/video/100245392?api=1&amp;amp;title=0&quot; webkitallowfullscreen=&quot;&quot; width=&quot;640&quot;&gt;&lt;/iframe&gt;
--&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;what-is-react&quot;&gt;&lt;/a&gt;What is React? &lt;a class=&quot;hash-link&quot; href=&quot;#what-is-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.funnyant.com/author/admin/&quot;&gt;Craig McKeachie&lt;/a&gt; author of &lt;a href=&quot;http://www.funnyant.com/javascript-framework-guide/&quot;&gt;Javascript Framework Guide&lt;/a&gt; wrote an excellent news named &lt;a href=&quot;http://www.funnyant.com/reactjs-what-is-it/&quot;&gt;&amp;quot;What is React.js? Another Template Library?&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Is React a template library?&lt;/li&gt;
&lt;li&gt;Is React similar to Web Components?&lt;/li&gt;
&lt;li&gt;Are the Virtual DOM and Shadow DOM the same?&lt;/li&gt;
&lt;li&gt;Can React be used with other JavaScript MVC frameworks?&lt;/li&gt;
&lt;li&gt;Who uses React?&lt;/li&gt;
&lt;li&gt;Is React a premature optimization if you aren’t Facebook or Instagram?&lt;/li&gt;
&lt;li&gt;Can I work with designers?&lt;/li&gt;
&lt;li&gt;Will React hurt my search engine optimizations (SEO)?&lt;/li&gt;
&lt;li&gt;Is React a framework for building applications or a library with one feature?&lt;/li&gt;
&lt;li&gt;Are components a better way to build an application?&lt;/li&gt;
&lt;li&gt;Can I build something complex with React?&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;referencing-dynamic-children&quot;&gt;&lt;/a&gt;Referencing Dynamic Children &lt;a class=&quot;hash-link&quot; href=&quot;#referencing-dynamic-children&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While Matt Zabriskie was working on &lt;a href=&quot;https://www.npmjs.org/package/react-tabs&quot;&gt;react-tabs&lt;/a&gt; he discovered how to use React.Children.map and React.addons.cloneWithProps in order to &lt;a href=&quot;http://www.mattzabriskie.com/blog/react-referencing-dynamic-children&quot;&gt;reference dynamic children&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&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;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;o&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;Children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;index&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;k&quot;&gt;return&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;addons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneWithProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&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;ref&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;child-&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;index&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;k&quot;&gt;return&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;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&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;;&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;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-with-sweet.js-using-readtables&quot;&gt;&lt;/a&gt;JSX with Sweet.js using Readtables &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-with-sweet.js-using-readtables&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to &lt;a href=&quot;http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables&quot;&gt;compile JSX with Sweet.js using Readtables&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables&quot;&gt;&lt;img src=&quot;/react/img/blog/sweet-jsx.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;first-look-getting-started-with-react&quot;&gt;&lt;/a&gt;First Look: Getting Started with React &lt;a class=&quot;hash-link&quot; href=&quot;#first-look-getting-started-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://modernweb.com/authors/kirill-buga/&quot;&gt;Kirill Buga&lt;/a&gt; wrote an article on Modern Web explaining how &lt;a href=&quot;http://modernweb.com/2014/07/23/getting-started-reactjs/&quot;&gt;React is different from traditional MVC&lt;/a&gt; used by most JavaScript applications&lt;/p&gt;
&lt;figure&gt;&lt;a href=&quot;http://modernweb.com/2014/07/23/getting-started-reactjs&quot;&gt;&lt;img src=&quot;/react/img/blog/first-look.png&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-draggable&quot;&gt;&lt;/a&gt;React Draggable &lt;a class=&quot;hash-link&quot; href=&quot;#react-draggable&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mzabriskie&quot;&gt;Matt Zabriskie&lt;/a&gt; released a &lt;a href=&quot;https://github.com/mzabriskie/react-draggable&quot;&gt;project&lt;/a&gt; to make your react components draggable.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://mzabriskie.github.io/react-draggable/example/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-draggable.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;html-parser2-react&quot;&gt;&lt;/a&gt;HTML Parser2 React &lt;a class=&quot;hash-link&quot; href=&quot;#html-parser2-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://browniefed.github.io/&quot;&gt;Jason Brown&lt;/a&gt; adapted htmlparser2 to React: &lt;a href=&quot;https://www.npmjs.org/package/htmlparser2-react&quot;&gt;htmlparser2-react&lt;/a&gt;. That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;div data-id=&amp;quot;1&amp;quot; class=&amp;quot;hey this is a class&amp;quot; &amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;style=&amp;quot;width:100%;height: 100%;&amp;quot;&amp;gt;&amp;lt;article id=&amp;quot;this-article&amp;quot;&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;p&amp;gt;hey this is a paragraph&amp;lt;/p&amp;gt;&amp;lt;div&amp;gt;&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;2&amp;lt;/li&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;li&amp;gt;3&amp;lt;/li&amp;gt;&amp;lt;/ul&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/article&amp;gt;&amp;lt;/div&amp;gt;&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;parsedComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;reactParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;html&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;building-uis-with-react&quot;&gt;&lt;/a&gt;Building UIs with React &lt;a class=&quot;hash-link&quot; href=&quot;#building-uis-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you haven&amp;#39;t yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/lAn7GVoGlKU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&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;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;We shipped reddit&amp;#39;s first production &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; code last week, our checkout process.&amp;#10;&amp;#10;&lt;a href=&quot;https://t.co/KUInwsCmAF&quot;&gt;https://t.co/KUInwsCmAF&lt;/a&gt;&lt;/p&gt;&amp;mdash; Brian Holt (@holtbt) &lt;a href=&quot;https://twitter.com/holtbt/statuses/493852312604254208&quot;&gt;July 28, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;.&lt;a href=&quot;https://twitter.com/AirbnbNerds&quot;&gt;@AirbnbNerds&lt;/a&gt; just launched our first user-facing React.js feature to production! We love it so far. &lt;a href=&quot;https://t.co/KtyudemcIW&quot;&gt;https://t.co/KtyudemcIW&lt;/a&gt; /&lt;a href=&quot;https://twitter.com/floydophone&quot;&gt;@floydophone&lt;/a&gt;&lt;/p&gt;&amp;mdash; spikebrehm (@spikebrehm) &lt;a href=&quot;https://twitter.com/spikebrehm/statuses/491645223643013121&quot;&gt;July 22, 2014&lt;/a&gt;&lt;/blockquote&gt;
</description>
<pubDate>2014-08-03T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/08/03/community-roundup-21.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/08/03/community-roundup-21.html</guid>
</item>
<item>
<title>Flux: Actions and the Dispatcher</title>
<description>&lt;p&gt;Flux is the application architecture Facebook uses to build JavaScript applications. It&amp;#39;s based on a unidirectional data flow. We&amp;#39;ve built everything from small widgets to huge applications with Flux, and it&amp;#39;s handled everything we&amp;#39;ve thrown at it. Because we&amp;#39;ve found it to be a great way to structure our code, we&amp;#39;re excited to share it with the open source community. &lt;a href=&quot;http://youtu.be/nYkdrAPrdcw?t=10m20s&quot;&gt;Jing Chen presented Flux&lt;/a&gt; at the F8 conference, and since that time we&amp;#39;ve seen a lot of interest in it. We&amp;#39;ve also published an &lt;a href=&quot;http://facebook.github.io/flux/docs/overview.html&quot;&gt;overview of Flux&lt;/a&gt; and a &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-todomvc/&quot;&gt;TodoMVC example&lt;/a&gt;, with an accompanying &lt;a href=&quot;http://facebook.github.io/flux/docs/todo-list.html&quot;&gt;tutorial&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven&amp;#39;t released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new &lt;a href=&quot;https://github.com/facebook/flux&quot;&gt;Flux code repository&lt;/a&gt; and &lt;a href=&quot;http://facebook.github.io/flux/&quot;&gt;Flux website&lt;/a&gt;, we&amp;#39;ve now open sourced the same &lt;a href=&quot;http://facebook.github.io/flux/docs/dispatcher.html&quot;&gt;dispatcher&lt;/a&gt; we use in our production applications.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;where-the-dispatcher-fits-in-the-flux-data-flow&quot;&gt;&lt;/a&gt;Where the Dispatcher Fits in the Flux Data Flow &lt;a class=&quot;hash-link&quot; href=&quot;#where-the-dispatcher-fits-in-the-flux-data-flow&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each &lt;em&gt;store&lt;/em&gt; registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;actions-and-actioncreators&quot;&gt;&lt;/a&gt;Actions and ActionCreators &lt;a class=&quot;hash-link&quot; href=&quot;#actions-and-actioncreators&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an &lt;em&gt;action&lt;/em&gt; — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.&lt;/p&gt;
&lt;p&gt;Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.&lt;/p&gt;
&lt;p&gt;Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the &lt;a href=&quot;http://en.wikipedia.org/wiki/Law_of_Demeter&quot;&gt;Law of Demeter&lt;/a&gt;, the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/flux-diagram.png&quot; style=&quot;width: 100%;&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;why-we-need-a-dispatcher&quot;&gt;&lt;/a&gt;Why We Need a Dispatcher &lt;a class=&quot;hash-link&quot; href=&quot;#why-we-need-a-dispatcher&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &amp;quot;I need to wait for Store B to finish processing this action.&amp;quot; The dispatcher provides this functionality through its waitFor() method.&lt;/p&gt;
&lt;p&gt;The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.&lt;/p&gt;
&lt;p&gt;Further, the waitFor() method may be used in different ways for different actions, within the same store&amp;#39;s callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.&lt;/p&gt;
&lt;p&gt;Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;example-chat-app&quot;&gt;&lt;/a&gt;Example Chat App &lt;a class=&quot;hash-link&quot; href=&quot;#example-chat-app&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Along with the same dispatcher that Facebook uses in its production applications, we&amp;#39;ve also published a new example &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-chat&quot;&gt;chat app&lt;/a&gt;, slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!&lt;/p&gt;
</description>
<pubDate>2014-07-30T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html</guid>
</item>
<item>
<title>Community Round-up #20</title>
<description>&lt;p&gt;It&amp;#39;s an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;atom-moves-to-react&quot;&gt;&lt;/a&gt;Atom moves to React &lt;a class=&quot;hash-link&quot; href=&quot;#atom-moves-to-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.atom.io/2014/07/02/moving-atom-to-react.html&quot;&gt;Atom, GitHub&amp;#39;s code editor, is now using React&lt;/a&gt; to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React&amp;#39;s architecture is perfect for high performant applications.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.atom.io/2014/07/02/moving-atom-to-react.html&quot;&gt;&lt;img src=&quot;http://blog.atom.io/img/posts/gpu-cursor-move.gif&quot; style=&quot;width: 100%;&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;why-does-react-scale&quot;&gt;&lt;/a&gt;Why Does React Scale? &lt;a class=&quot;hash-link&quot; href=&quot;#why-does-react-scale&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;At the last &lt;a href=&quot;http://2014.jsconf.us/&quot;&gt;JSConf.us&lt;/a&gt;, Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don&amp;#39;t have 20 minutes, take a look at the &lt;a href=&quot;https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014&quot;&gt;annotated slides&lt;/a&gt;.&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/D-ioDiacTm8&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;live-editing&quot;&gt;&lt;/a&gt;Live Editing &lt;a class=&quot;hash-link&quot; href=&quot;#live-editing&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... &lt;a href=&quot;https://twitter.com/dan_abramov&quot;&gt;Dan Abramov&lt;/a&gt; got hot code reloading working with webpack in order to &lt;a href=&quot;http://gaearon.github.io/react-hot-loader/&quot;&gt;live edit a React project&lt;/a&gt;!&lt;/p&gt;
&lt;iframe src=&quot;//player.vimeo.com/video/100010922&quot; width=&quot;650&quot; height=&quot;315&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactintl-mixin-by-yahoo&quot;&gt;&lt;/a&gt;ReactIntl Mixin by Yahoo &lt;a class=&quot;hash-link&quot; href=&quot;#reactintl-mixin-by-yahoo&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;There are a couple of React-related projects that recently appeared on Yahoo&amp;#39;s GitHub, the first one being an &lt;a href=&quot;https://github.com/yahoo/react-intl&quot;&gt;internationalization mixin&lt;/a&gt;. It&amp;#39;s great to see them getting excited about React and contributing back to the community.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&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;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;mixins&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;ReactIntlMixin&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;intlDate&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1390518044403&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;hour&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;numeric&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;minute&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;numeric&amp;#39;&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;/p&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;p&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;intlNumber&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;400&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;style&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;percent&amp;#39;&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;/p&amp;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;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&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;MyComponent&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;locales&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;s1&quot;&gt;&amp;#39;fr-FR&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;example&amp;#39;&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;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;thinking-and-learning-react&quot;&gt;&lt;/a&gt;Thinking and Learning React &lt;a class=&quot;hash-link&quot; href=&quot;#thinking-and-learning-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post &lt;a href=&quot;http://icelab.com.au/articles/thinking-and-learning-reactjs/&quot;&gt;“Thinking and Learning React.js”&lt;/a&gt; to share her experience with elements they had to use. You&amp;#39;ll learn about routing, event dispatch, touchable components, and basic animations.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;london-react-meetup&quot;&gt;&lt;/a&gt;London React Meetup &lt;a class=&quot;hash-link&quot; href=&quot;#london-react-meetup&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you missed the last &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/events/191406572/&quot;&gt;London React Meetup&lt;/a&gt;, the video is available, with lots of great content.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;What&amp;#39;s new in React 0.11 and how to improve performance by guaranteeing immutability&lt;/li&gt;
&lt;li&gt;State handling in React with Morearty.JS&lt;/li&gt;
&lt;li&gt;React on Rails - How to use React with Ruby on Rails to build isomorphic apps&lt;/li&gt;
&lt;li&gt;Building an isomorphic, real-time to-do list with moped and node.js&lt;/li&gt;
&lt;/ul&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/CP3lvm5Ppqo&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;In related news, the next &lt;a href=&quot;http://www.meetup.com/ReactJS-San-Francisco/events/195518392/&quot;&gt;React SF Meetup&lt;/a&gt; will be from Prezi: &lt;a href=&quot;https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135&quot;&gt;“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”&lt;/a&gt;. While not in React, their tech is really awesome and shares a lot of React&amp;#39;s design principles and perf optimizations.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;using-react-and-kendoui-together&quot;&gt;&lt;/a&gt;Using React and KendoUI Together &lt;a class=&quot;hash-link&quot; href=&quot;#using-react-and-kendoui-together&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write &lt;a href=&quot;http://www.ifandelse.com/using-reactjs-and-kendoui-together/&quot;&gt;React component adapters for KendoUI&lt;/a&gt;.&lt;/p&gt;
&lt;figure&gt;&lt;a href=&quot;http://www.ifandelse.com/using-reactjs-and-kendoui-together/&quot;&gt;&lt;img src=&quot;/react/img/blog/kendoui.png&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;acorn-jsx&quot;&gt;&lt;/a&gt;Acorn JSX &lt;a class=&quot;hash-link&quot; href=&quot;#acorn-jsx&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a &lt;a href=&quot;https://github.com/RReverser/acorn-jsx&quot;&gt;JSX parser&lt;/a&gt; that&amp;#39;s 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it&amp;#39;s always a good thing to get competition on performance!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactscriptloader&quot;&gt;&lt;/a&gt;ReactScriptLoader &lt;a class=&quot;hash-link&quot; href=&quot;#reactscriptloader&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Yariv Sadan created &lt;a href=&quot;https://github.com/yariv/ReactScriptLoader&quot;&gt;ReactScriptLoader&lt;/a&gt; to make it easier to write components that require an external script.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Foo&lt;/span&gt; &lt;span class=&quot;o&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;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;mixins&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;ReactScriptLoaderMixin&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;getScriptURL&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;http://d3js.org/d3.v3.min.js&amp;#39;&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;getInitialState&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;scriptLoading&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;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;scriptLoadError&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;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;onScriptLoaded&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoading&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;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;onScriptError&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoading&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;scriptLoadError&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;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;message&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoading&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading script...&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoadError&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading failed&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading succeeded&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;message&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;/span&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&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;blockquote class=&quot;twitter-tweet&quot; data-conversation=&quot;none&quot; lang=&quot;en&quot;&gt;&lt;p&gt;“&lt;a href=&quot;https://twitter.com/apphacker&quot;&gt;@apphacker&lt;/a&gt;: I take back the mean things I said about &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; I actually like it.” Summarizing the life of ReactJS in a single tweet.&lt;/p&gt;&amp;mdash; Jordan (@jordwalke) &lt;a href=&quot;https://twitter.com/jordwalke/statuses/490747339607265280&quot;&gt;July 20, 2014&lt;/a&gt;&lt;/blockquote&gt;
</description>
<pubDate>2014-07-28T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/28/community-roundup-20.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/28/community-roundup-20.html</guid>
</item>
<item>
<title>React v0.11.1</title>
<description>&lt;p&gt;Today we&amp;#39;re releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they&amp;#39;ve begun upgrading.&lt;/p&gt;
&lt;p&gt;The first of these is the most major and resulted in a regression with the use of &lt;code&gt;setState&lt;/code&gt; inside &lt;code&gt;componentWillMount&lt;/code&gt; when using React on the server. These &lt;code&gt;setState&lt;/code&gt; calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as &lt;code&gt;document&lt;/code&gt; is not defined.&lt;/p&gt;
&lt;p&gt;There are several fixes we&amp;#39;re including in v0.11.1 that are focused around the newly supported &lt;code&gt;event.getModifierState()&lt;/code&gt; function. We made some adjustments to improve this cross-browser standardization.&lt;/p&gt;
&lt;p&gt;The final fix we&amp;#39;re including is to better support a workaround for some IE8 behavior. The edge-case bug we&amp;#39;re fixing was also present in v0.9 and v0.10, so while it wasn&amp;#39;t a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.&lt;/p&gt;
&lt;p&gt;We&amp;#39;d also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around &lt;a href=&quot;/react/blog/2014/07/17/react-v0.11.html#descriptors&quot;&gt;Descriptors&lt;/a&gt; and &lt;a href=&quot;/react/blog/2014/07/17/react-v0.11.html#prop-type-validation&quot;&gt;Prop Type Validation&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The release is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.11.1.js&quot;&gt;http://fb.me/react-0.11.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.11.1.min.js&quot;&gt;http://fb.me/react-0.11.1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.1.js&quot;&gt;http://fb.me/react-with-addons-0.11.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.1.min.js&quot;&gt;http://fb.me/react-with-addons-0.11.1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;&gt;http://fb.me/JSXTransformer-0.11.1.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.11.1&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-tools&lt;/code&gt; packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;
&lt;p&gt;Please try these builds out and &lt;a href=&quot;https://github.com/facebook/react/issues/new&quot;&gt;file an issue on GitHub&lt;/a&gt; if you see anything awry.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;bug-fixes&quot;&gt;&lt;/a&gt;Bug Fixes &lt;a class=&quot;hash-link&quot; href=&quot;#bug-fixes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;setState&lt;/code&gt; can be called inside &lt;code&gt;componentWillMount&lt;/code&gt; in non-DOM environments&lt;/li&gt;
&lt;li&gt;&lt;code&gt;SyntheticMouseEvent.getEventModifierState&lt;/code&gt; correctly renamed to &lt;code&gt;getModifierState&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;getModifierState&lt;/code&gt; correctly returns a &lt;code&gt;boolean&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;getModifierState&lt;/code&gt; is now correctly case sensitive&lt;/li&gt;
&lt;li&gt;Empty Text node used in IE8 &lt;code&gt;innerHTML&lt;/code&gt; workaround is now removed, fixing rerendering in certain cases&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsxtransformer&quot;&gt;&lt;/a&gt;JSXTransformer &lt;a class=&quot;hash-link&quot; href=&quot;#jsxtransformer&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Fix duplicate variable declaration (caused issues in some browsers)&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-07-25T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/25/react-v0.11.1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/25/react-v0.11.1.html</guid>
</item>
<item>
<title>React v0.11</title>
<description>&lt;p&gt;&lt;strong&gt;Update:&lt;/strong&gt; We missed a few important changes in our initial post and changelog. We&amp;#39;ve updated this post with details about &lt;a href=&quot;#descriptors&quot;&gt;Descriptors&lt;/a&gt; and &lt;a href=&quot;#prop-type-validation&quot;&gt;Prop Type Validation&lt;/a&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;We&amp;#39;re really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using &lt;code&gt;jsx --harmony&lt;/code&gt;, fixed a small regression with &lt;code&gt;statics&lt;/code&gt;, and made sure we actually exposed the new API we said we were shipping: &lt;code&gt;React.Children.count&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.&lt;/p&gt;
&lt;p&gt;The release is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.11.0.js&quot;&gt;http://fb.me/react-0.11.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.11.0.min.js&quot;&gt;http://fb.me/react-0.11.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.0.js&quot;&gt;http://fb.me/react-with-addons-0.11.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.0.min.js&quot;&gt;http://fb.me/react-with-addons-0.11.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.11.0.js&quot;&gt;http://fb.me/JSXTransformer-0.11.0.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.11.0&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-tools&lt;/code&gt; packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;
&lt;p&gt;Please try these builds out and &lt;a href=&quot;https://github.com/facebook/react/issues/new&quot;&gt;file an issue on GitHub&lt;/a&gt; if you see anything awry.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;getdefaultprops&quot;&gt;&lt;/a&gt;&lt;code&gt;getDefaultProps&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#getdefaultprops&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Starting in React 0.11, &lt;code&gt;getDefaultProps()&lt;/code&gt; is called only once when &lt;code&gt;React.createClass()&lt;/code&gt; is called, instead of each time a component is rendered. This means that &lt;code&gt;getDefaultProps()&lt;/code&gt; can no longer vary its return value based on &lt;code&gt;this.props&lt;/code&gt; and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rendering-to-null&quot;&gt;&lt;/a&gt;Rendering to &lt;code&gt;null&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#rendering-to-null&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since React&amp;#39;s release, people have been using work arounds to &amp;quot;render nothing&amp;quot;. Usually this means returning an empty &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;span/&amp;gt;&lt;/code&gt;. Some people even got clever and started returning &lt;code&gt;&amp;lt;noscript/&amp;gt;&lt;/code&gt; to avoid extraneous DOM nodes. We finally provided a &amp;quot;blessed&amp;quot; solution that allows developers to write meaningful code. Returning &lt;code&gt;null&lt;/code&gt; is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; element, though in the future we hope to not put anything in the document. In the mean time, &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; elements do not affect layout in any way, so you can feel safe using &lt;code&gt;null&lt;/code&gt; today!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;if&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&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;nx&quot;&gt;visible&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// After&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;if&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&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;nx&quot;&gt;visible&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-namespacing&quot;&gt;&lt;/a&gt;JSX Namespacing &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-namespacing&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Another feature request we&amp;#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&amp;#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as &lt;code&gt;&amp;lt;Namespace.Component/&amp;gt;&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILabel&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UILabel&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/UILabel&amp;gt;&amp;lt;/UILayout&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// After&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Label&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/UI.Label&amp;gt;&amp;lt;/UI.Layout&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;improved-keyboard-event-normalization&quot;&gt;&lt;/a&gt;Improved keyboard event normalization &lt;a class=&quot;hash-link&quot; href=&quot;#improved-keyboard-event-normalization&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Keyboard events now contain a normalized &lt;code&gt;e.key&lt;/code&gt; value according to the &lt;a href=&quot;http://www.w3.org/TR/DOM-Level-3-Events/#keys-special&quot;&gt;DOM Level 3 Events spec&lt;/a&gt;, allowing you to write simpler key handling code that works in all browsers, such as:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&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;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Enter&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle enter key&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39; &amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle spacebar&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;ArrowLeft&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle left arrow&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;Keyboard and mouse events also now include a normalized &lt;code&gt;e.getModifierState()&lt;/code&gt; that works consistently across browsers.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;descriptors&quot;&gt;&lt;/a&gt;Descriptors &lt;a class=&quot;hash-link&quot; href=&quot;#descriptors&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In our &lt;a href=&quot;http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount&quot;&gt;v0.10 release notes&lt;/a&gt;, we called out that we were deprecating the existing behavior of the component function call (eg &lt;code&gt;component = MyComponent(props, ...children)&lt;/code&gt; or &lt;code&gt;component = &amp;lt;MyComponent prop={...}/&amp;gt;&lt;/code&gt;). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg &lt;code&gt;component.setProps(...)&lt;/code&gt;). This no longer works. &lt;code&gt;component&lt;/code&gt; in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.&lt;/p&gt;
&lt;p&gt;Along with this change to descriptors, &lt;code&gt;React.isValidComponent&lt;/code&gt; and &lt;code&gt;React.PropTypes.component&lt;/code&gt; now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of &lt;code&gt;MyComponent()&lt;/code&gt;, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we&amp;#39;re working to make sure we are consistent with our terminology.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;prop-type-validation&quot;&gt;&lt;/a&gt;Prop Type Validation &lt;a class=&quot;hash-link&quot; href=&quot;#prop-type-validation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Previously &lt;code&gt;React.PropTypes&lt;/code&gt; validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply &lt;code&gt;console.log&lt;/code&gt; your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (&lt;em&gt;not throw&lt;/em&gt;) an &lt;code&gt;Error&lt;/code&gt; object. We then log the &lt;code&gt;error.message&lt;/code&gt; property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an &lt;code&gt;Error&lt;/code&gt; with your message instead.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-changes&quot;&gt;&lt;/a&gt;Breaking Changes &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-changes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;getDefaultProps()&lt;/code&gt; is now called once per class and shared across all instances&lt;/li&gt;
&lt;li&gt;&lt;code&gt;MyComponent()&lt;/code&gt; now returns a descriptor, not an instance&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.isValidComponent&lt;/code&gt; and &lt;code&gt;React.PropTypes.component&lt;/code&gt; validate &lt;em&gt;descriptors&lt;/em&gt;, not component instances.&lt;/li&gt;
&lt;li&gt;Custom &lt;code&gt;propType&lt;/code&gt; validators should return an &lt;code&gt;Error&lt;/code&gt; instead of logging directly&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;new-features&quot;&gt;&lt;/a&gt;New Features &lt;a class=&quot;hash-link&quot; href=&quot;#new-features&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Rendering to &lt;code&gt;null&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Keyboard events include normalized &lt;code&gt;e.key&lt;/code&gt; and &lt;code&gt;e.getModifierState()&lt;/code&gt; properties&lt;/li&gt;
&lt;li&gt;New normalized &lt;code&gt;onBeforeInput&lt;/code&gt; event&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.Children.count&lt;/code&gt; has been added as a helper for counting the number of children&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;bug-fixes&quot;&gt;&lt;/a&gt;Bug Fixes &lt;a class=&quot;hash-link&quot; href=&quot;#bug-fixes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Re-renders are batched in more cases&lt;/li&gt;
&lt;li&gt;Events: &lt;code&gt;e.view&lt;/code&gt; properly normalized&lt;/li&gt;
&lt;li&gt;Added Support for more HTML attributes (&lt;code&gt;coords&lt;/code&gt;, &lt;code&gt;crossOrigin&lt;/code&gt;, &lt;code&gt;download&lt;/code&gt;, &lt;code&gt;hrefLang&lt;/code&gt;, &lt;code&gt;mediaGroup&lt;/code&gt;, &lt;code&gt;muted&lt;/code&gt;, &lt;code&gt;scrolling&lt;/code&gt;, &lt;code&gt;shape&lt;/code&gt;, &lt;code&gt;srcSet&lt;/code&gt;, &lt;code&gt;start&lt;/code&gt;, &lt;code&gt;useMap&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Improved SVG support
&lt;ul&gt;
&lt;li&gt;Changing &lt;code&gt;className&lt;/code&gt; on a mounted SVG component now works correctly&lt;/li&gt;
&lt;li&gt;Added support for elements &lt;code&gt;mask&lt;/code&gt; and &lt;code&gt;tspan&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for attributes &lt;code&gt;dx&lt;/code&gt;, &lt;code&gt;dy&lt;/code&gt;, &lt;code&gt;fillOpacity&lt;/code&gt;, &lt;code&gt;fontFamily&lt;/code&gt;, &lt;code&gt;fontSize&lt;/code&gt;, &lt;code&gt;markerEnd&lt;/code&gt;, &lt;code&gt;markerMid&lt;/code&gt;, &lt;code&gt;markerStart&lt;/code&gt;, &lt;code&gt;opacity&lt;/code&gt;, &lt;code&gt;patternContentUnits&lt;/code&gt;, &lt;code&gt;patternUnits&lt;/code&gt;, &lt;code&gt;preserveAspectRatio&lt;/code&gt;, &lt;code&gt;strokeDasharray&lt;/code&gt;, &lt;code&gt;strokeOpacity&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;CSS property names with vendor prefixes (&lt;code&gt;Webkit&lt;/code&gt;, &lt;code&gt;ms&lt;/code&gt;, &lt;code&gt;Moz&lt;/code&gt;, &lt;code&gt;O&lt;/code&gt;) are now handled properly&lt;/li&gt;
&lt;li&gt;Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;img&lt;/code&gt; event listeners are now unbound properly, preventing the error &amp;quot;Two valid but unequal nodes with the same &lt;code&gt;data-reactid&lt;/code&gt;&amp;quot;&lt;/li&gt;
&lt;li&gt;Added explicit warning when missing polyfills&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-addons&quot;&gt;&lt;/a&gt;React With Addons &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-addons&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;PureRenderMixin: a mixin which helps optimize &amp;quot;pure&amp;quot; components&lt;/li&gt;
&lt;li&gt;Perf: a new set of tools to help with performance analysis&lt;/li&gt;
&lt;li&gt;Update: New &lt;code&gt;$apply&lt;/code&gt; command to transform values&lt;/li&gt;
&lt;li&gt;TransitionGroup bug fixes with null elements, Android&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-npm-module&quot;&gt;&lt;/a&gt;React NPM Module &lt;a class=&quot;hash-link&quot; href=&quot;#react-npm-module&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Now includes the pre-built packages under &lt;code&gt;dist/&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;envify&lt;/code&gt; is properly listed as a dependency instead of a peer dependency&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx&quot;&gt;&lt;/a&gt;JSX &lt;a class=&quot;hash-link&quot; href=&quot;#jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Added support for namespaces, eg &lt;code&gt;&amp;lt;Components.Checkbox /&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;JSXTransformer
&lt;ul&gt;
&lt;li&gt;Enable the same &lt;code&gt;harmony&lt;/code&gt; features available in the command line with &lt;code&gt;&amp;lt;script type=&amp;quot;text/jsx;harmony=true&amp;quot;&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)&lt;/li&gt;
&lt;li&gt;Fixed a bug preventing sourcemaps from working in Firefox&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tools-module&quot;&gt;&lt;/a&gt;React Tools Module &lt;a class=&quot;hash-link&quot; href=&quot;#react-tools-module&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Improved readme with usage and API information&lt;/li&gt;
&lt;li&gt;Improved ES6 transforms available with &lt;code&gt;--harmony&lt;/code&gt; option&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;--source-map-inline&lt;/code&gt; option to the &lt;code&gt;jsx&lt;/code&gt; executable&lt;/li&gt;
&lt;li&gt;New &lt;code&gt;transformWithDetails&lt;/code&gt; API which gives access to the raw sourcemap data&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-07-17T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html</guid>
</item>
<item>
<title>React v0.11 RC</title>
<description>&lt;p&gt;It&amp;#39;s that time again… we&amp;#39;re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.&lt;/p&gt;
&lt;p&gt;The release candidate is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.11.0-rc1.js&quot;&gt;http://fb.me/react-0.11.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.11.0-rc1.min.js&quot;&gt;http://fb.me/react-0.11.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.11.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.11.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.11.0-rc1.js&quot;&gt;http://fb.me/JSXTransformer-0.11.0-rc1.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.11.0-rc1&lt;/code&gt; of the &lt;code&gt;react&lt;/code&gt; and &lt;code&gt;react-tools&lt;/code&gt; packages on npm and the &lt;code&gt;react&lt;/code&gt; package on bower.&lt;/p&gt;
&lt;p&gt;Please try these builds out and &lt;a href=&quot;https://github.com/facebook/react/issues/new&quot;&gt;file an issue on GitHub&lt;/a&gt; if you see anything awry.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;getdefaultprops&quot;&gt;&lt;/a&gt;&lt;code&gt;getDefaultProps&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#getdefaultprops&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Starting in React 0.11, &lt;code&gt;getDefaultProps()&lt;/code&gt; is called only once when &lt;code&gt;React.createClass()&lt;/code&gt; is called, instead of each time a component is rendered. This means that &lt;code&gt;getDefaultProps()&lt;/code&gt; can no longer vary its return value based on &lt;code&gt;this.props&lt;/code&gt; and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rendering-to-null&quot;&gt;&lt;/a&gt;Rendering to &lt;code&gt;null&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#rendering-to-null&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since React&amp;#39;s release, people have been using work arounds to &amp;quot;render nothing&amp;quot;. Usually this means returning an empty &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;span/&amp;gt;&lt;/code&gt;. Some people even got clever and started returning &lt;code&gt;&amp;lt;noscript/&amp;gt;&lt;/code&gt; to avoid extraneous DOM nodes. We finally provided a &amp;quot;blessed&amp;quot; solution that allows developers to write meaningful code. Returning &lt;code&gt;null&lt;/code&gt; is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; element, though in the future we hope to not put anything in the document. In the mean time, &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; elements do not affect layout in any way, so you can feel safe using &lt;code&gt;null&lt;/code&gt; today!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;if&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&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;nx&quot;&gt;visible&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// After&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;if&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&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;nx&quot;&gt;visible&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// ...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-namespacing&quot;&gt;&lt;/a&gt;JSX Namespacing &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-namespacing&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Another feature request we&amp;#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&amp;#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as &lt;code&gt;&amp;lt;Namespace.Component/&amp;gt;&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILabel&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Label&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UILabel&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/UILabel&amp;gt;&amp;lt;/UILayout&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// After&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Label&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/UI.Label&amp;gt;&amp;lt;/UI.Layout&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;improved-keyboard-event-normalization&quot;&gt;&lt;/a&gt;Improved keyboard event normalization &lt;a class=&quot;hash-link&quot; href=&quot;#improved-keyboard-event-normalization&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Keyboard events now contain a normalized &lt;code&gt;e.key&lt;/code&gt; value according to the &lt;a href=&quot;http://www.w3.org/TR/DOM-Level-3-Events/#keys-special&quot;&gt;DOM Level 3 Events spec&lt;/a&gt;, allowing you to write simpler key handling code that works in all browsers, such as:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&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;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Enter&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle enter key&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39; &amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle spacebar&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;ArrowLeft&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle left arrow&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;Keyboard and mouse events also now include a normalized &lt;code&gt;e.getModifierState()&lt;/code&gt; that works consistently across browsers.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-changes&quot;&gt;&lt;/a&gt;Breaking Changes &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-changes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;getDefaultProps()&lt;/code&gt; is now called once per class and shared across all instances&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;new-features&quot;&gt;&lt;/a&gt;New Features &lt;a class=&quot;hash-link&quot; href=&quot;#new-features&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Rendering to &lt;code&gt;null&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Keyboard events include normalized &lt;code&gt;e.key&lt;/code&gt; and &lt;code&gt;e.getModifierState()&lt;/code&gt; properties&lt;/li&gt;
&lt;li&gt;New normalized &lt;code&gt;onBeforeInput&lt;/code&gt; event&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.Children.count&lt;/code&gt; has been added as a helper for counting the number of children&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;bug-fixes&quot;&gt;&lt;/a&gt;Bug Fixes &lt;a class=&quot;hash-link&quot; href=&quot;#bug-fixes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Re-renders are batched in more cases&lt;/li&gt;
&lt;li&gt;Events: &lt;code&gt;e.view&lt;/code&gt; properly normalized&lt;/li&gt;
&lt;li&gt;Added Support for more HTML attributes (&lt;code&gt;coords&lt;/code&gt;, &lt;code&gt;crossOrigin&lt;/code&gt;, &lt;code&gt;download&lt;/code&gt;, &lt;code&gt;hrefLang&lt;/code&gt;, &lt;code&gt;mediaGroup&lt;/code&gt;, &lt;code&gt;muted&lt;/code&gt;, &lt;code&gt;scrolling&lt;/code&gt;, &lt;code&gt;shape&lt;/code&gt;, &lt;code&gt;srcSet&lt;/code&gt;, &lt;code&gt;start&lt;/code&gt;, &lt;code&gt;useMap&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Improved SVG support
&lt;ul&gt;
&lt;li&gt;Changing &lt;code&gt;className&lt;/code&gt; on a mounted SVG component now works correctly&lt;/li&gt;
&lt;li&gt;Added support for elements &lt;code&gt;mask&lt;/code&gt; and &lt;code&gt;tspan&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for attributes &lt;code&gt;dx&lt;/code&gt;, &lt;code&gt;dy&lt;/code&gt;, &lt;code&gt;fillOpacity&lt;/code&gt;, &lt;code&gt;fontFamily&lt;/code&gt;, &lt;code&gt;fontSize&lt;/code&gt;, &lt;code&gt;markerEnd&lt;/code&gt;, &lt;code&gt;markerMid&lt;/code&gt;, &lt;code&gt;markerStart&lt;/code&gt;, &lt;code&gt;opacity&lt;/code&gt;, &lt;code&gt;patternContentUnits&lt;/code&gt;, &lt;code&gt;patternUnits&lt;/code&gt;, &lt;code&gt;preserveAspectRatio&lt;/code&gt;, &lt;code&gt;strokeDasharray&lt;/code&gt;, &lt;code&gt;strokeOpacity&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;CSS property names with vendor prefixes (&lt;code&gt;Webkit&lt;/code&gt;, &lt;code&gt;ms&lt;/code&gt;, &lt;code&gt;Moz&lt;/code&gt;, &lt;code&gt;O&lt;/code&gt;) are now handled properly&lt;/li&gt;
&lt;li&gt;Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;img&lt;/code&gt; event listeners are now unbound properly, preventing the error &amp;quot;Two valid but unequal nodes with the same &lt;code&gt;data-reactid&lt;/code&gt;&amp;quot;&lt;/li&gt;
&lt;li&gt;Added explicit warning when missing polyfills&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-addons&quot;&gt;&lt;/a&gt;React With Addons &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-addons&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;PureRenderMixin&lt;/li&gt;
&lt;li&gt;Perf: a new set of tools to help with performance analysis&lt;/li&gt;
&lt;li&gt;Update: New &lt;code&gt;$apply&lt;/code&gt; command to transform values&lt;/li&gt;
&lt;li&gt;TransitionGroup bug fixes with null elements, Android&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-npm-module&quot;&gt;&lt;/a&gt;React NPM Module &lt;a class=&quot;hash-link&quot; href=&quot;#react-npm-module&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Now includes the pre-built packages under &lt;code&gt;dist/&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;envify&lt;/code&gt; is properly listed as a dependency instead of a peer dependency&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx&quot;&gt;&lt;/a&gt;JSX &lt;a class=&quot;hash-link&quot; href=&quot;#jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Added support for namespaces, eg &lt;code&gt;&amp;lt;Components.Checkbox /&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;JSXTransformer
&lt;ul&gt;
&lt;li&gt;Enable the same &lt;code&gt;harmony&lt;/code&gt; features available in the command line with &lt;code&gt;&amp;lt;script type=&amp;quot;text/jsx;harmony=true&amp;quot;&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)&lt;/li&gt;
&lt;li&gt;Fixed a bug preventing sourcemaps from working in Firefox&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tools-module&quot;&gt;&lt;/a&gt;React Tools Module &lt;a class=&quot;hash-link&quot; href=&quot;#react-tools-module&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Improved readme with usage and API information&lt;/li&gt;
&lt;li&gt;Improved ES6 transforms available with &lt;code&gt;--harmony&lt;/code&gt; option&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;--source-map-inline&lt;/code&gt; option to the &lt;code&gt;jsx&lt;/code&gt; executable&lt;/li&gt;
&lt;li&gt;New &lt;code&gt;transformWithDetails&lt;/code&gt; API which gives access to the raw sourcemap data&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-07-13T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/07/13/react-v0.11-rc1.html</guid>
</item>
<item>
<title>Community Round-up #19</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-meetups&quot;&gt;&lt;/a&gt;React Meetups! &lt;a class=&quot;hash-link&quot; href=&quot;#react-meetups&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in &lt;a href=&quot;http://www.meetup.com/ReactJS-San-Francisco/&quot;&gt;San Francisco&lt;/a&gt; (courtesy of &lt;a href=&quot;http://www.telmate.com&quot;&gt;Telmate&lt;/a&gt;), and one in &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/&quot;&gt;London&lt;/a&gt; (courtesy of &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/members/105837542/&quot;&gt;Stuart Harris&lt;/a&gt;, &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/members/15509971/&quot;&gt;Cain Ullah&lt;/a&gt; and &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/members/137058242/&quot;&gt;Zoe Merchant&lt;/a&gt;). These two events have been big successes; a second one in London is &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/events/191406572/&quot;&gt;already planned&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;If you don&amp;#39;t live near San Francisco or London, why not start one in your community?&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;complementary-tools&quot;&gt;&lt;/a&gt;Complementary Tools &lt;a class=&quot;hash-link&quot; href=&quot;#complementary-tools&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In case you haven&amp;#39;t seen it, we&amp;#39;ve consolidated the tooling solution around React on &lt;a href=&quot;https://github.com/facebook/react/wiki/Complementary-Tools&quot;&gt;this wiki page&lt;/a&gt;. Some of the notable recent entries include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/rpflorence&quot;&gt;Ryan Florence&lt;/a&gt; and &lt;a href=&quot;https://github.com/mjackson&quot;&gt;Michael Jackson&lt;/a&gt;&amp;#39;s &lt;a href=&quot;https://github.com/rpflorence/react-nested-router&quot;&gt;react-nested-router&lt;/a&gt;, which is a translation of the Ember router API to React.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/stevoland&quot;&gt;Stephen J. Collings&lt;/a&gt;&amp;#39;s &lt;a href=&quot;https://github.com/react-bootstrap/react-bootstrap&quot;&gt;react-bootstrap&lt;/a&gt;, which wraps the popular framework with a bit of React goodness. The &lt;a href=&quot;http://react-bootstrap.github.io/components.html&quot;&gt;website&lt;/a&gt; features live-editable demos.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://github.com/andreypopp&quot;&gt;Andrey Popp&lt;/a&gt;&amp;#39;s &lt;a href=&quot;https://github.com/andreypopp/react-quickstart&quot;&gt;react-quickstart&lt;/a&gt;, which gives you a quick template for server-side rendering and routing, among other features.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-in-interesting-places&quot;&gt;&lt;/a&gt;React in Interesting Places &lt;a class=&quot;hash-link&quot; href=&quot;#react-in-interesting-places&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn&amp;#39;t have imagined something like &lt;a href=&quot;http://rigsomelight.com&quot;&gt;Bruce Hauman&lt;/a&gt;&amp;#39;s &lt;a href=&quot;http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html&quot;&gt;Flappy Bird ClojureScript port&lt;/a&gt;, whose interactive programming has been made possible through React:&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/KZjFVdU8VLI&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;And don&amp;#39;t forget &lt;a href=&quot;https://github.com/petehunt&quot;&gt;Pete Hunt&lt;/a&gt;&amp;#39;s Wolfenstein 3D rendering engine in React (&lt;a href=&quot;https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183&quot;&gt;source code&lt;/a&gt;). While it&amp;#39;s nearly a year old, it&amp;#39;s still a nice demo.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.petehunt.net/wolfenstein3D-react/wolf3d.html&quot;&gt;&lt;img src=&quot;/react/img/blog/wolfenstein_react.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Give us a shoutout on IRC or &lt;a href=&quot;https://groups.google.com/forum/#!forum/reactjs&quot;&gt;React Google Groups&lt;/a&gt; if you&amp;#39;ve used React in some Interesting places.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;even-more-people-using-react&quot;&gt;&lt;/a&gt;Even More People Using React &lt;a class=&quot;hash-link&quot; href=&quot;#even-more-people-using-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;prismatic&quot;&gt;&lt;/a&gt;Prismatic &lt;a class=&quot;hash-link&quot; href=&quot;#prismatic&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://getprismatic.com/home&quot;&gt;Prismatic&lt;/a&gt; recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, &lt;a href=&quot;https://github.com/swannodette/om&quot;&gt;Om&lt;/a&gt;. They detailed their very positive experience &lt;a href=&quot;http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;adobe-brackets&quot;&gt;&lt;/a&gt;Adobe Brackets &lt;a class=&quot;hash-link&quot; href=&quot;#adobe-brackets&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://www.kevindangoor.com&quot;&gt;Kevin Dangoor&lt;/a&gt; works on &lt;a href=&quot;http://brackets.io/?lang=en&quot;&gt;Brackets&lt;/a&gt;, the open-source code editor. After writing &lt;a href=&quot;http://www.kevindangoor.com/2014/05/simplifying-code-with-react/&quot;&gt;his first impression on React&lt;/a&gt;, he followed up with another insightful &lt;a href=&quot;http://www.kevindangoor.com/2014/05/react-in-brackets/&quot;&gt;article&lt;/a&gt; on how to gradually make the code transition, how to preserve the editor&amp;#39;s good parts, and how to tune Brackets&amp;#39; tooling around JSX.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;storehouse&quot;&gt;&lt;/a&gt;Storehouse &lt;a class=&quot;hash-link&quot; href=&quot;#storehouse&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://www.storehouse.co&quot;&gt;Storehouse&lt;/a&gt; (Apple Design Award 2014)&amp;#39;s web presence is build with React. Here&amp;#39;s &lt;a href=&quot;https://www.storehouse.co/stories/y2ad-mexico-city-clouds&quot;&gt;an example story&lt;/a&gt;. Congratulations on the award!&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;vim-awesome&quot;&gt;&lt;/a&gt;Vim Awesome &lt;a class=&quot;hash-link&quot; href=&quot;#vim-awesome&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://vimawesome.com&quot;&gt;Vim Awesome&lt;/a&gt;, an open-source Vim plugins directory built on React, was just launched. Be sure to &lt;a href=&quot;https://github.com/divad12/vim-awesome&quot;&gt;check out the source code&lt;/a&gt; if you&amp;#39;re curious to see an example of how to build a small single-page React app.&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;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Spent 12 hours so far with &lt;a href=&quot;https://twitter.com/hashtag/reactjs?src=hash&quot;&gt;#reactjs&lt;/a&gt;. Spent another 2 wondering why we&amp;#39;ve been doing JS frameworks wrong until now. React makes me happy.&lt;/p&gt;&amp;mdash; Paul Irwin (@paulirwin) &lt;a href=&quot;https://twitter.com/paulirwin/statuses/481263947589242882&quot;&gt;June 24, 2014&lt;/a&gt;&lt;/blockquote&gt;
</description>
<pubDate>2014-06-27T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/06/27/community-roundup-19.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/06/27/community-roundup-19.html</guid>
</item>
<item>
<title>One Year of Open-Source React</title>
<description>&lt;p&gt;Today marks the one-year open-source anniversary of React.&lt;/p&gt;
&lt;p&gt;It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The &lt;a href=&quot;http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html&quot;&gt;roadmap&lt;/a&gt; gives a glimpse into the future of the library; exciting stuff lies ahead!&lt;/p&gt;
&lt;p&gt;Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was &lt;a href=&quot;http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/&quot;&gt;similarly skeptical&lt;/a&gt;. It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it&amp;#39;s been hard to convince people to try React. &lt;a href=&quot;http://facebook.github.io/react/docs/jsx-in-depth.html&quot;&gt;JSX&lt;/a&gt;, in particular, filtered out a huge chunk of potential early adopters.&lt;/p&gt;
&lt;p&gt;Fast forward one year, React has strongly &lt;a href=&quot;https://news.ycombinator.com/item?id=7489959&quot;&gt;grown in popularity&lt;/a&gt;. Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We&amp;#39;d also like to thank all the &lt;a href=&quot;https://github.com/facebook/react/graphs/contributors&quot;&gt;individual contributors&lt;/a&gt; who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn&amp;#39;t have gained as much traction without them. In the future, we will continue to try to set an example of what&amp;#39;s possible to achieve when we rethink about current “best practices”.&lt;/p&gt;
&lt;p&gt;Here’s to another year!&lt;/p&gt;
</description>
<pubDate>2014-05-29T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/05/29/one-year-of-open-source-react.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/05/29/one-year-of-open-source-react.html</guid>
</item>
<item>
<title>Flux: An Application Architecture for React</title>
<description>&lt;p&gt;We recently spoke at one of f8&amp;#39;s breakout session about Flux, a data flow architecture that works well with React. Check out the video here:&lt;/p&gt;
&lt;figure&gt;&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&amp;start=621&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;p&gt;To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.&lt;/p&gt;
&lt;p&gt;In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.&lt;/p&gt;
&lt;p&gt;When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application&amp;#39;s data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React&amp;#39;s declarative model, which allows the stores to send updates without specifying how to transition views between states.&lt;/p&gt;
&lt;p&gt;Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-todomvc&quot;&gt;example of this architecture&lt;/a&gt; is available, along with more &lt;a href=&quot;http://facebook.github.io/react/docs/flux-overview.html&quot;&gt;detailed documentation&lt;/a&gt; and a &lt;a href=&quot;http://facebook.github.io/react/docs/flux-todo-list.html&quot;&gt;tutorial&lt;/a&gt;. Look for more examples to come in the future.&lt;/p&gt;
</description>
<pubDate>2014-05-06T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/05/06/flux.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/05/06/flux.html</guid>
</item>
<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;On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;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;ul&gt;
&lt;li&gt;JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.&lt;/li&gt;
&lt;li&gt;Server-side component rendering to make your initial render super fast.&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>
</channel>
</rss>
Reference in New Issue View Git Blame Copy Permalink