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
8a98319d58112cd3ca6134861748d81f7c63fd39
react/blog/index.html
T
Paul O’Shannessy 8a98319d58 0.10 blog post
2014-03-21 14:55:09 -07:00

557 lines
51 KiB
HTML
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.
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Blog</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/index.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<meta property="fb:app_id" content="623268441017527" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></li>
<li><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></li>
<li><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></li>
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
<li><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></li>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/21/react-v0.10.html">React v0.10</a></h1>
<p class="meta">March 21, 2014 by Paul O’Shannessy</p>
<hr />
<div class="post">
<p>Hot on the heels of the <a href="/react/blog/2014/02/20/react-v0.10rc.html">release candidate earlier this week</a>, we&#39;re ready to call v0.10 done. The only major issue we discovered had to do with the <code>react-tools</code> package, which has been updated. We&#39;ve copied over the changelog from the RC with some small clarifying changes.</p>
<p>The release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0.js">http://fb.me/react-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0.min.js">http://fb.me/react-0.10.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0.js">http://fb.me/react-with-addons-0.10.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.min.js">http://fb.me/react-with-addons-0.10.0.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0.js">http://fb.me/JSXTransformer-0.10.0.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.10.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/19/react-v0.10-rc1.html">React v0.10 RC</a></h1>
<p class="meta">March 19, 2014 by Paul O’Shannessy</p>
<hr />
<div class="post">
<p><a href="http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html">v0.9 has only been out for a month</a>, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don&#39;t have a long list of changes to talk about.</p>
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.10.0-rc1.js">http://fb.me/react-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.10.0-rc1.min.js">http://fb.me/react-0.10.0-rc1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.10.0-rc1.js">http://fb.me/react-with-addons-0.10.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc1.min.js">http://fb.me/react-with-addons-0.10.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.10.0-rc1.js">http://fb.me/JSXTransformer-0.10.0-rc1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.10.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="clone-on-mount"></a>Clone On Mount <a class="hash-link" href="#clone-on-mount">#</a></h2>
<p>The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (<code>React.DOM.div()</code>, <code>MyComponent()</code>) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.</p>
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
<span class="c1">// The change here is very simple. The return value of renderComponent will be</span>
<span class="c1">// the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">)</span>
<span class="c1">// ...</span>
<span class="nx">instance</span><span class="p">.</span><span class="nx">setProps</span><span class="p">(...);</span>
</code></pre></div>
<p>These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.</p>
<p>The plan for v0.11 is that we will go fully to &quot;descriptors&quot;. Method calls on the return value of <code>MyComponent()</code> will fail hard.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>Added warnings to help migrate towards descriptors</li>
<li>Made it possible to server render without React-related markup (<code>data-reactid</code>, <code>data-react-checksum</code>). This DOM will not be mountable by React. <a href="/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup">Read the docs for <code>React.renderComponentToStaticMarkup</code></a></li>
<li>Added support for more attributes:
<ul>
<li><code>srcSet</code> for <code>&lt;img&gt;</code> to specify images at different pixel ratios</li>
<li><code>textAnchor</code> for SVG</li>
</ul></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>Ensure all void elements don’t insert a closing tag into the markup.</li>
<li>Ensure <code>className={false}</code> behaves consistently</li>
<li>Ensure <code>this.refs</code> is defined, even if no refs are specified.</li>
</ul>
<h3><a class="anchor" name="addons"></a>Addons <a class="hash-link" href="#addons">#</a></h3>
<ul>
<li><code>update</code> function to deal with immutable data. <a href="/react/docs/update.html">Read the docs</a></li>
</ul>
<h3><a class="anchor" name="react-tools"></a>react-tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>Added an option argument to <code>transform</code> function. The only option supported is <code>harmony</code>, which behaves the same as <code>jsx --harmony</code> on the command line. This uses the ES6 transforms from <a href="https://github.com/facebook/jstransform">jstransform</a>.</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/03/14/community-roundup-18.html">Community Round-up #18</a></h1>
<p class="meta">March 14, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>In this Round-up, we are taking a few closer looks at React&#39;s interplay with different frameworks and architectures.</p>
<h2><a class="anchor" name="little-framework-big-splash"></a>&quot;Little framework BIG splash&quot; <a class="hash-link" href="#little-framework-big-splash">#</a></h2>
<p>Let&#39;s start with yet another refreshing introduction to React: Craig Savolainen (<a href="https://twitter.com/maedhr">@maedhr</a>) walks through some first steps, demonstrating <a href="http://infinitemonkeys.influitive.com/little-framework-big-splash">how to build a Google Maps component</a> using React.</p>
<h2><a class="anchor" name="architecting-your-app-with-react"></a>Architecting your app with react <a class="hash-link" href="#architecting-your-app-with-react">#</a></h2>
<p>Brandon Konkle (<a href="https://twitter.com/bkonkle">@bkonkle</a>)
<a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Architecting your app with react</a>
We&#39;re looking forward to part 2!</p>
<blockquote>
<p>React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You&#39;ll often see React used to manage specific parts of an application&#39;s UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application&#39;s interface.</p>
<p><a href="http://lincolnloop.com/blog/architecting-your-app-react-part-1/">Read the full article...</a></p>
</blockquote>
<h2><a class="anchor" name="react-vs.-async-dom-manipulation"></a>React vs. async DOM manipulation <a class="hash-link" href="#react-vs.-async-dom-manipulation">#</a></h2>
<p>Eliseu Monar (<a href="https://twitter.com/eliseumds">@eliseumds</a>)&#39;s post &quot;<a href="http://eliseu.tk/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering">ReactJS vs async concurrent rendering</a>&quot; is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.</p>
<h2><a class="anchor" name="react-scala-and-the-play-framework"></a>React, Scala and the Play Framework <a class="hash-link" href="#react-scala-and-the-play-framework">#</a></h2>
<p><a href="http://matthiasnehlsen.com/">Matthias Nehlsen</a> wrote a detailed introductory piece on <a href="http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/">React and the Play Framework</a>, including a helpful architectural diagram of a typical React app.</p>
<p>Nehlsen&#39;s React frontend is the second implementation of his chat application&#39;s frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.</p>
<p>In <a href="http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/">another article</a>, he walks us through the process of using React with scala.js to implement app-wide undo functionality.</p>
<p>Also check out his <a href="http://m.ustream.tv/recorded/42780242">talk</a> at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.</p>
<h2><a class="anchor" name="react-and-backbone"></a>React and Backbone <a class="hash-link" href="#react-and-backbone">#</a></h2>
<p>The folks over at <a href="https://venmo.com/">Venmo</a> are using React in conjunction with Backbone.
Thomas Boyt (<a href="https://twitter.com/thomasaboyt">@thomasaboyt</a>) wrote <a href="http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html">this detailed piece</a> about why React and Backbone are &quot;a fantastic pairing&quot;.</p>
<h2><a class="anchor" name="react-vs.-ember"></a>React vs. Ember <a class="hash-link" href="#react-vs.-ember">#</a></h2>
<p>Eric Berry (<a href="https://twitter.com/coderberry">@coderberry</a>) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: <a href="http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/">&quot;Facebook React vs. Ember&quot;</a>.</p>
<h2><a class="anchor" name="react-and-plain-old-html"></a>React and plain old HTML <a class="hash-link" href="#react-and-plain-old-html">#</a></h2>
<p>Daniel Lo Nigro (<a href="https://twitter.com/Daniel15">@Daniel15</a>) created <a href="https://github.com/reactjs/react-magic">React-Magic</a>, which leverages React to ajaxify plain old html pages and even <a href="http://stuff.dan.cx/facebook/react-hacks/magic/red.php">allows CSS transitions between pageloads</a>.</p>
<blockquote>
<p>React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to &quot;diff&quot; the old HTML with the new HTML, and only update the parts of the DOM that have been changed.</p>
<p><a href="https://github.com/reactjs/react-magic">Check out the project on GitHub...</a></p>
</blockquote>
<p>On a related note, <a href="https://turbo-react.herokuapp.com/">Reactize</a> by Ross Allen (<a href="https://twitter.com/ssorallen">@ssorallen</a>) is a similarly awesome project: A wrapper for Rails&#39; <a href="https://github.com/rails/turbolinks/">Turbolinks</a>, which seems to have inspired John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) to then create <a href="http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/">a server-rendered version using the JSX transformer in Rails middleware</a>.</p>
<h2><a class="anchor" name="react-and-object.observe"></a>React and Object.observe <a class="hash-link" href="#react-and-object.observe">#</a></h2>
<p>Check out <a href="https://github.com/fdecampredon">François de Campredon</a>&#39;s implementation of <a href="https://github.com/fdecampredon/react-observe-todomvc/">TodoMVC based on React and ES6&#39;s Object.observe</a>.</p>
<h2><a class="anchor" name="react-and-angular"></a>React and Angular <a class="hash-link" href="#react-and-angular">#</a></h2>
<p>Ian Bicking (<a href="https://twitter.com/ianbicking">@ianbicking</a>) of Mozilla Labs <a href="https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE">explains why he &quot;decided to go with React instead of Angular.js&quot;</a>.</p>
<h3><a class="anchor" name="ng-react-update"></a>ng-React Update <a class="hash-link" href="#ng-react-update">#</a></h3>
<p><a href="https://github.com/davidchang">David Chang</a> works through some performance improvements of his <a href="https://github.com/davidchang/ngReact">ngReact</a> project. His post <a href="http://davidandsuzi.com/ngreact-update/">&quot;ng-React Update - React 0.9 and Angular Track By&quot;</a> includes some helpful advice on boosting render performance for Angular components.</p>
<blockquote>
<p>Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I&#39;ll admit that you need to know how to twist the right knobs to get performance.</p>
<p>That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn&#39;t actually get it any faster. So pretty impressive stuff.</p>
<p><a href="http://davidandsuzi.com/ngreact-update/">Read the full post...</a></p>
</blockquote>
<p>React was also recently mentioned at ng-conf, where the Angular team commented on React&#39;s concept of the virtual DOM:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-and-web-components"></a>React and Web Components <a class="hash-link" href="#react-and-web-components">#</a></h2>
<p>Jonathan Krause (<a href="https://twitter.com/jonykrause">@jonykrause</a>) offers his thoughts regarding <a href="http://jonykrau.se/posts/the-value-of-react">parallels between React and Web Components</a>, highlighting the value of React&#39;s ability to render pages on the server practically for free.</p>
<h2><a class="anchor" name="immutable-react"></a>Immutable React <a class="hash-link" href="#immutable-react">#</a></h2>
<p><a href="http://pk11.kinja.com/">Peter Hausel</a> shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to <a href="https://npmjs.org/package/mori">mori</a>), really taking advantage of the framework&#39;s one-way reactive data binding:</p>
<blockquote>
<p>Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.</p>
<p><a href="http://tech.kinja.com/immutable-react-1495205675">Read the full post</a></p>
</blockquote>
<h2><a class="anchor" name="d3-and-react"></a>D3 and React <a class="hash-link" href="#d3-and-react">#</a></h2>
<p><a href="http://10consulting.com/">Ben Smith</a> built some great SVG-based charting components using a little less of D3 and a little more of React: <a href="http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/">D3 and React - the future of charting components?</a></p>
<h2><a class="anchor" name="om-and-react"></a>Om and React <a class="hash-link" href="#om-and-react">#</a></h2>
<p>Josh Haberman (<a href="https://twitter.com/JoshHaberman">@joshhaberman</a>) discusses performance differences between React, Om and traditional MVC frameworks in &quot;<a href="http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html">A closer look at OM vs React performance</a>&quot;.</p>
<p>Speaking of Om: <a href="https://github.com/sgrove/omchaya">Omchaya</a> by Sean Grove (<a href="https://twitter.com/sgrove">@sgrove</a>) is a neat Cljs/Om example project.</p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>&mdash; John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></h1>
<p class="meta">February 24, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>It&#39;s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>
<h2><a class="anchor" name="react-in-the-real-world"></a>React in the Real World <a class="hash-link" href="#react-in-the-real-world">#</a></h2><h3><a class="anchor" name="facebook-lookback-video-editor"></a>Facebook Lookback video editor <a class="hash-link" href="#facebook-lookback-video-editor">#</a></h3>
<p>Large parts of Facebook&#39;s web frontend are already powered by React. The recently released Facebook <a href="https://www.facebook.com/lookback/edit/">Lookback video and its corresponding editor</a> are great examples of a complex, real-world React app.</p>
<h3><a class="anchor" name="russias-largest-bank-is-now-powered-by-react"></a>Russia&#39;s largest bank is now powered by React <a class="hash-link" href="#russias-largest-bank-is-now-powered-by-react">#</a></h3>
<p>Sberbank, Russia&#39;s largest bank, recently switched large parts of their site to use React, as detailed in <a href="https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg">this post by Vyacheslav Slinko</a>.</p>
<h3><a class="anchor" name="relato"></a>Relato <a class="hash-link" href="#relato">#</a></h3>
<p><a href="http://bripkens.github.io/relato/">Relato</a> by <a href="https://github.com/bripkens">Ben Ripkens</a> shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it&#39;s super fast!</p>
<h3><a class="anchor" name="makona-editor"></a>Makona Editor <a class="hash-link" href="#makona-editor">#</a></h3>
<p>John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
<figure><a href="http://johnthethird.github.io/makona-editor/"><img src="/react/img/blog/makona-editor.png" alt=""></a></figure></p>
<h3><a class="anchor" name="create-chrome-extensions-using-react"></a>Create Chrome extensions using React <a class="hash-link" href="#create-chrome-extensions-using-react">#</a></h3>
<p>React is in no way limited to just web pages. Brandon Tilley (<a href="https://twitter.com/BinaryMuse">@BinaryMuse</a>) just released a detailed walk-through of <a href="http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html">how he built his Chrome extension &quot;Fast Tab Switcher&quot; using React</a>.</p>
<h3><a class="anchor" name="twitter-streaming-client"></a>Twitter Streaming Client <a class="hash-link" href="#twitter-streaming-client">#</a></h3>
<p>Javier Aguirre (<a href="https://twitter.com/javaguirre">@javaguirre</a>) put together a simple <a href="http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/">twitter streaming client using node, socket.io and React</a>.</p>
<h3><a class="anchor" name="sproutsheet"></a>Sproutsheet <a class="hash-link" href="#sproutsheet">#</a></h3>
<p><a href="http://sproutsheet.com/">Sproutsheet</a> is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It&#39;s currently in beta and supports localStorage, and data/image import and export.</p>
<h3><a class="anchor" name="instant-domain-search"></a>Instant Domain Search <a class="hash-link" href="#instant-domain-search">#</a></h3>
<p><a href="https://instantdomainsearch.com/">Instant Domain Search</a> also uses React. It sure is instant!</p>
<h3><a class="anchor" name="svg-based-graphical-node-editor"></a>SVG-based graphical node editor <a class="hash-link" href="#svg-based-graphical-node-editor">#</a></h3>
<p><a href="http://noflojs.org/">NoFlo</a> and <a href="http://meemoo.org/">Meemoo</a> developer <a href="http://www.forresto.com/">Forresto Oliphant</a> built an awesome SVG-based <a href="http://forresto.github.io/prototyping/react/">node editor</a> in React.
<figure><a href="http://forresto.github.io/prototyping/react/"><img src="/react/img/blog/react-svg-fbp.png" alt=""></a></figure></p>
<h3><a class="anchor" name="ultimate-tic-tac-toe-game-in-react"></a>Ultimate Tic-Tac-Toe Game in React <a class="hash-link" href="#ultimate-tic-tac-toe-game-in-react">#</a></h3>
<p>Rafał Cieślak (<a href="https://twitter.com/Ravicious">@Ravicious</a>) wrote a <a href="http://ravicious.github.io/ultimate-ttt/">React version</a> of <a href="http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/">Ultimate Tic Tac Toe</a>. Find the source <a href="https://github.com/ravicious/ultimate-ttt">here</a>.</p>
<h3><a class="anchor" name="reactjs-gallery"></a>ReactJS Gallery <a class="hash-link" href="#reactjs-gallery">#</a></h3>
<p><a href="https://github.com/lele85">Emanuele Rampichini</a>&#39;s <a href="https://github.com/lele85/ReactGallery">ReactJS Gallery</a> is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.</p>
<p>Emanuele shared this awesome demo video with us:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-components"></a>React Components <a class="hash-link" href="#react-components">#</a></h2><h3><a class="anchor" name="table-sorter"></a>Table Sorter <a class="hash-link" href="#table-sorter">#</a></h3>
<p><a href="http://bgerm.github.io/react-table-sorter-demo/">Table Sorter</a> by <a href="https://github.com/bgerm">bgerm</a> [<a href="https://github.com/bgerm/react-table-sorter-demo">source</a>] is another helpful React component.</p>
<h3><a class="anchor" name="static-search"></a>Static-search <a class="hash-link" href="#static-search">#</a></h3>
<p>Dmitry Chestnykh <a href="https://twitter.com/dchest">@dchest</a> wrote a <a href="https://github.com/dchest/static-search">static search indexer</a> in Go, along with a <a href="http://www.codingrobots.com/search/">React-based web front-end</a> that consumes search result via JSON.</p>
<h3><a class="anchor" name="lorem-ipsum-component"></a>Lorem Ipsum component <a class="hash-link" href="#lorem-ipsum-component">#</a></h3>
<p><a href="https://github.com/martinandert">Martin Andert</a> created <a href="https://github.com/martinandert/react-lorem-component">react-lorem-component</a>, a simple component for all your placeholding needs.</p>
<h3><a class="anchor" name="input-with-placeholder-shim"></a>Input with placeholder shim <a class="hash-link" href="#input-with-placeholder-shim">#</a></h3>
<p><a href="https://github.com/enigma-io/react-input-placeholder">react-input=placeholder</a> by <a href="https://github.com/enigma-io">enigma-io</a> is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don&#39;t natively support it.</p>
<h3><a class="anchor" name="dicontainer"></a>diContainer <a class="hash-link" href="#dicontainer">#</a></h3>
<p><a href="https://github.com/SpektrumFM/dicontainer">dicontainer</a> provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.</p>
<h2><a class="anchor" name="react-server-rendering"></a>React server rendering <a class="hash-link" href="#react-server-rendering">#</a></h2>
<p>Ever wonder how to pre-render React components on the server? <a href="https://github.com/mhart/react-server-example">react-server-example</a> by Michael Hart (<a href="http://twitter.com/hichaelmart">@hichaelmart</a>) walks through the necessary steps.</p>
<p>Similarly, Alan deLevie (<a href="https://twitter.com/adelevie">@adelevie</a>) created <a href="https://github.com/adelevie/react-client-server-starter">react-client-server-starter</a>, another detailed walk-through of how to server-render your app.</p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
<p class="meta">February 20, 2014 by Ben Alpert</p>
<hr />
<div class="post">
<p>I&#39;m excited to announce that today we&#39;re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
<p>As always, the release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.9.0.js">http://fb.me/react-0.9.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
<li><strong>In-Browser JSX Transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.9.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<h2><a class="anchor" name="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We&#39;ve also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly.</p>
<p>We&#39;ve also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
<p>We&#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
<p>In cases where you want to preserve the space adjacent to a newline, you can write <code>{&#39;Monkeys: &#39;}</code> or <code>Monkeys:{&#39; &#39;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:
<ul>
<li><code>crossOrigin</code> for CORS requests</li>
<li><code>download</code> and <code>hrefLang</code> for <code>&lt;a&gt;</code> tags</li>
<li><code>mediaGroup</code> and <code>muted</code> for <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> tags</li>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled=&quot;true&quot;</code>, now simply <code>disabled</code>)</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li><code>React.addons.TestUtils</code> was added to help write unit tests</li>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>
</div>
</div>
<div class="pagination">
<a href="/react/blog/page2/" class="next">
Next Page &raquo;
</a>
</div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">&copy; 2014 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink