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
c2e3735ffbb01d61bd5ca9ae2a5fd0ad93fa128f
react/feed.xml
T
Ben Alpert 36aeb76e5f Rebuild docs for typo fix
2014-02-24 15:28:49 -08:00

820 lines
119 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 #17</title>
<description>&lt;p&gt;It&amp;#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.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-in-the-real-world&quot;&gt;&lt;/a&gt;React in the Real World &lt;a class=&quot;hash-link&quot; href=&quot;#react-in-the-real-world&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;facebook-lookback-video-editor&quot;&gt;&lt;/a&gt;Facebook Lookback video editor &lt;a class=&quot;hash-link&quot; href=&quot;#facebook-lookback-video-editor&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Large parts of Facebook&amp;#39;s web frontend are already powered by React. The recently released Facebook &lt;a href=&quot;https://www.facebook.com/lookback/edit/&quot;&gt;Lookback video and its corresponding editor&lt;/a&gt; are great examples of a complex, real-world React app.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;russias-largest-bank-is-now-powered-by-react&quot;&gt;&lt;/a&gt;Russia&amp;#39;s largest bank is now powered by React &lt;a class=&quot;hash-link&quot; href=&quot;#russias-largest-bank-is-now-powered-by-react&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Sberbank, Russia&amp;#39;s largest bank, recently switched large parts of their site to use React, as detailed in &lt;a href=&quot;https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg&quot;&gt;this post by Vyacheslav Slinko&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;relato&quot;&gt;&lt;/a&gt;Relato &lt;a class=&quot;hash-link&quot; href=&quot;#relato&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://bripkens.github.io/relato/&quot;&gt;Relato&lt;/a&gt; by &lt;a href=&quot;https://github.com/bripkens&quot;&gt;Ben Ripkens&lt;/a&gt; shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &amp;ndash; it&amp;#39;s super fast!&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;makona-editor&quot;&gt;&lt;/a&gt;Makona Editor &lt;a class=&quot;hash-link&quot; href=&quot;#makona-editor&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;John Lynch (&lt;a href=&quot;https://twitter.com/johnrlynch&quot;&gt;@johnrlynch&lt;/a&gt;) 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.
&lt;figure&gt;&lt;a href=&quot;http://johnthethird.github.io/makona-editor/&quot;&gt;&lt;img src=&quot;/react/img/blog/makona-editor.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;create-chrome-extensions-using-react&quot;&gt;&lt;/a&gt;Create Chrome extensions using React &lt;a class=&quot;hash-link&quot; href=&quot;#create-chrome-extensions-using-react&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;React is in no way limited to just web pages. Brandon Tilley (&lt;a href=&quot;https://twitter.com/BinaryMuse&quot;&gt;@BinaryMuse&lt;/a&gt;) just released a detailed walk-through of &lt;a href=&quot;http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html&quot;&gt;how he built his Chrome extension &amp;quot;Fast Tab Switcher&amp;quot; using React&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;twitter-streaming-client&quot;&gt;&lt;/a&gt;Twitter Streaming Client &lt;a class=&quot;hash-link&quot; href=&quot;#twitter-streaming-client&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Javier Aguirre (&lt;a href=&quot;https://twitter.com/javaguirre&quot;&gt;@javaguirre&lt;/a&gt;) put together a simple &lt;a href=&quot;http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/&quot;&gt;twitter streaming client using node, socket.io and React&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;sproutsheet&quot;&gt;&lt;/a&gt;Sproutsheet &lt;a class=&quot;hash-link&quot; href=&quot;#sproutsheet&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://sproutsheet.com/&quot;&gt;Sproutsheet&lt;/a&gt; is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It&amp;#39;s currently in beta and supports localStorage, and data/image import and export.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;instant-domain-search&quot;&gt;&lt;/a&gt;Instant Domain Search &lt;a class=&quot;hash-link&quot; href=&quot;#instant-domain-search&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://instantdomainsearch.com/&quot;&gt;Instant Domain Search&lt;/a&gt; also uses React. It sure is instant!&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;svg-based-graphical-node-editor&quot;&gt;&lt;/a&gt;SVG-based graphical node editor &lt;a class=&quot;hash-link&quot; href=&quot;#svg-based-graphical-node-editor&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://noflojs.org/&quot;&gt;NoFlo&lt;/a&gt; and &lt;a href=&quot;http://meemoo.org/&quot;&gt;Meemoo&lt;/a&gt; developer &lt;a href=&quot;http://www.forresto.com/&quot;&gt;Forresto Oliphant&lt;/a&gt; built an awesome SVG-based &lt;a href=&quot;http://forresto.github.io/prototyping/react/&quot;&gt;node editor&lt;/a&gt; in React.
&lt;figure&gt;&lt;a href=&quot;http://forresto.github.io/prototyping/react/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-svg-fbp.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;ultimate-tic-tac-toe-game-in-react&quot;&gt;&lt;/a&gt;Ultimate Tic-Tac-Toe Game in React &lt;a class=&quot;hash-link&quot; href=&quot;#ultimate-tic-tac-toe-game-in-react&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Rafał Cieślak (&lt;a href=&quot;https://twitter.com/Ravicious&quot;&gt;@Ravicious&lt;/a&gt;) wrote a &lt;a href=&quot;http://ravicious.github.io/ultimate-ttt/&quot;&gt;React version&lt;/a&gt; of &lt;a href=&quot;http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/&quot;&gt;Ultimate Tic Tac Toe&lt;/a&gt;. Find the source &lt;a href=&quot;https://github.com/ravicious/ultimate-ttt&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactjs-gallery&quot;&gt;&lt;/a&gt;ReactJS Gallery &lt;a class=&quot;hash-link&quot; href=&quot;#reactjs-gallery&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/lele85&quot;&gt;Emanuele Rampichini&lt;/a&gt;&amp;#39;s &lt;a href=&quot;https://github.com/lele85/ReactGallery&quot;&gt;ReactJS Gallery&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;Emanuele shared this awesome demo video with us:&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/jYcpaemt90M&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-components&quot;&gt;&lt;/a&gt;React Components &lt;a class=&quot;hash-link&quot; href=&quot;#react-components&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;table-sorter&quot;&gt;&lt;/a&gt;Table Sorter &lt;a class=&quot;hash-link&quot; href=&quot;#table-sorter&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://bgerm.github.io/react-table-sorter-demo/&quot;&gt;Table Sorter&lt;/a&gt; by &lt;a href=&quot;https://github.com/bgerm&quot;&gt;bgerm&lt;/a&gt; [&lt;a href=&quot;https://github.com/bgerm/react-table-sorter-demo&quot;&gt;source&lt;/a&gt;] is another helpful React component.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;static-search&quot;&gt;&lt;/a&gt;Static-search &lt;a class=&quot;hash-link&quot; href=&quot;#static-search&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Dmitry Chestnykh &lt;a href=&quot;https://twitter.com/dchest&quot;&gt;@dchest&lt;/a&gt; wrote a &lt;a href=&quot;https://github.com/dchest/static-search&quot;&gt;static search indexer&lt;/a&gt; in Go, along with a &lt;a href=&quot;http://www.codingrobots.com/search/&quot;&gt;React-based web front-end&lt;/a&gt; that consumes search result via JSON.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;lorem-ipsum-component&quot;&gt;&lt;/a&gt;Lorem Ipsum component &lt;a class=&quot;hash-link&quot; href=&quot;#lorem-ipsum-component&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/martinandert&quot;&gt;Martin Andert&lt;/a&gt; created &lt;a href=&quot;https://github.com/martinandert/react-lorem-component&quot;&gt;react-lorem-component&lt;/a&gt;, a simple component for all your placeholding needs.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;input-with-placeholder-shim&quot;&gt;&lt;/a&gt;Input with placeholder shim &lt;a class=&quot;hash-link&quot; href=&quot;#input-with-placeholder-shim&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/enigma-io/react-input-placeholder&quot;&gt;react-input=placeholder&lt;/a&gt; by &lt;a href=&quot;https://github.com/enigma-io&quot;&gt;enigma-io&lt;/a&gt; is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don&amp;#39;t natively support it.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;dicontainer&quot;&gt;&lt;/a&gt;diContainer &lt;a class=&quot;hash-link&quot; href=&quot;#dicontainer&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/SpektrumFM/dicontainer&quot;&gt;dicontainer&lt;/a&gt; provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-server-rendering&quot;&gt;&lt;/a&gt;React server rendering &lt;a class=&quot;hash-link&quot; href=&quot;#react-server-rendering&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ever wonder how to pre-render React components on the server? &lt;a href=&quot;https://github.com/mhart/react-server-example&quot;&gt;react-server-example&lt;/a&gt; by Michael Hart (&lt;a href=&quot;http://twitter.com/hichaelmart&quot;&gt;@hichaelmart&lt;/a&gt;) walks through the necessary steps.&lt;/p&gt;
&lt;p&gt;Similarly, Alan deLevie (&lt;a href=&quot;https://twitter.com/adelevie&quot;&gt;@adelevie&lt;/a&gt;) created &lt;a href=&quot;https://github.com/adelevie/react-client-server-starter&quot;&gt;react-client-server-starter&lt;/a&gt;, another detailed walk-through of how to server-render your app.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweet&quot;&gt;&lt;/a&gt;Random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&amp;src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)&lt;/p&gt;&amp;mdash; Camlistore (@Camlistore) &lt;a href=&quot;https://twitter.com/Camlistore/status/423925795820539904&quot;&gt;January 16, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-02-24T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/24/community-roundup-17.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/24/community-roundup-17.html</guid>
</item>
<item>
<title>React v0.9</title>
<description>&lt;p&gt;I&amp;#39;m excited to announce that today we&amp;#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!&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;As always, 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.9.0.js&quot;&gt;http://fb.me/react-0.9.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.9.0.min.js&quot;&gt;http://fb.me/react-0.9.0.min.js&lt;/a&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.9.0.js&quot;&gt;http://fb.me/react-with-addons-0.9.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.9.0.min.js&quot;&gt;http://fb.me/react-with-addons-0.9.0.min.js&lt;/a&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.9.0.js&quot;&gt;http://fb.me/JSXTransformer-0.9.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.9.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;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;whats-new&quot;&gt;&lt;/a&gt;What’s New? &lt;a class=&quot;hash-link&quot; href=&quot;#whats-new&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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&amp;#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&amp;#39;s purple break-on-error stop sign now works properly.&lt;/p&gt;
&lt;p&gt;We&amp;#39;ve also added to the add-ons build &lt;a href=&quot;/react/docs/test-utils.html&quot;&gt;React.addons.TestUtils&lt;/a&gt;, 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.&lt;/p&gt;
&lt;p&gt;We&amp;#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-whitespace&quot;&gt;&lt;/a&gt;JSX Whitespace &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-whitespace&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In addition to the changes to React core listed below, we&amp;#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:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;html language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
Monkeys:
{listOfMonkeys} {submitButton}
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In v0.8 and below, it was transformed to the following:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;DOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;s2&quot;&gt;&amp;quot; Monkeys: &amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;listOfMonkeys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;submitButton&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;In v0.9, it will be transformed to this JS instead:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;DOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Monkeys:&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt; &lt;span class=&quot;nx&quot;&gt;listOfMonkeys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot; &amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;submitButton&lt;/span&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;We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.&lt;/p&gt;
&lt;p&gt;In cases where you want to preserve the space adjacent to a newline, you can write &lt;code&gt;{&amp;#39;Monkeys: &amp;#39;}&lt;/code&gt; or &lt;code&gt;Monkeys:{&amp;#39; &amp;#39;}&lt;/code&gt; in your JSX source. We&amp;#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 &lt;a href=&quot;https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md&quot;&gt;install jsx_whitespace_transformer from npm&lt;/a&gt; and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&amp;#39;s existing whitespace behavior.&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;The lifecycle methods &lt;code&gt;componentDidMount&lt;/code&gt; and &lt;code&gt;componentDidUpdate&lt;/code&gt; no longer receive the root node as a parameter; use &lt;code&gt;this.getDOMNode()&lt;/code&gt; instead&lt;/li&gt;
&lt;li&gt;Whenever a prop is equal to &lt;code&gt;undefined&lt;/code&gt;, the default value returned by &lt;code&gt;getDefaultProps&lt;/code&gt; will now be used instead&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.unmountAndReleaseReactRootNode&lt;/code&gt; was previously deprecated and has now been removed&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToString&lt;/code&gt; is now synchronous and returns the generated HTML string&lt;/li&gt;
&lt;li&gt;Full-page rendering (that is, rendering the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; tag using React) is now supported only when starting with server-rendered markup&lt;/li&gt;
&lt;li&gt;On mouse wheel events, &lt;code&gt;deltaY&lt;/code&gt; is no longer negated&lt;/li&gt;
&lt;li&gt;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)&lt;/li&gt;
&lt;li&gt;On &lt;code&gt;input&lt;/code&gt;, &lt;code&gt;select&lt;/code&gt;, and &lt;code&gt;textarea&lt;/code&gt; elements, &lt;code&gt;.getValue()&lt;/code&gt; is no longer supported; use &lt;code&gt;.getDOMNode().value&lt;/code&gt; instead&lt;/li&gt;
&lt;li&gt;&lt;code&gt;this.context&lt;/code&gt; on components is now reserved for internal use by React&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;React now never rethrows errors, so stack traces are more accurate and Chrome&amp;#39;s purple break-on-error stop sign now works properly&lt;/li&gt;
&lt;li&gt;Added support for SVG tags &lt;code&gt;defs&lt;/code&gt;, &lt;code&gt;linearGradient&lt;/code&gt;, &lt;code&gt;polygon&lt;/code&gt;, &lt;code&gt;radialGradient&lt;/code&gt;, &lt;code&gt;stop&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for more attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;crossOrigin&lt;/code&gt; for CORS requests&lt;/li&gt;
&lt;li&gt;&lt;code&gt;download&lt;/code&gt; and &lt;code&gt;hrefLang&lt;/code&gt; for &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;mediaGroup&lt;/code&gt; and &lt;code&gt;muted&lt;/code&gt; for &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;noValidate&lt;/code&gt; and &lt;code&gt;formNoValidate&lt;/code&gt; for forms&lt;/li&gt;
&lt;li&gt;&lt;code&gt;property&lt;/code&gt; for Open Graph &lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;sandbox&lt;/code&gt;, &lt;code&gt;seamless&lt;/code&gt;, and &lt;code&gt;srcDoc&lt;/code&gt; for &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scope&lt;/code&gt; for screen readers&lt;/li&gt;
&lt;li&gt;&lt;code&gt;span&lt;/code&gt; for &lt;code&gt;&amp;lt;colgroup&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Added support for defining &lt;code&gt;propTypes&lt;/code&gt; in mixins&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;any&lt;/code&gt;, &lt;code&gt;arrayOf&lt;/code&gt;, &lt;code&gt;component&lt;/code&gt;, &lt;code&gt;oneOfType&lt;/code&gt;, &lt;code&gt;renderable&lt;/code&gt;, &lt;code&gt;shape&lt;/code&gt; to &lt;code&gt;React.PropTypes&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;statics&lt;/code&gt; on component spec for static component methods&lt;/li&gt;
&lt;li&gt;On all events, &lt;code&gt;.currentTarget&lt;/code&gt; is now properly set&lt;/li&gt;
&lt;li&gt;On keyboard events, &lt;code&gt;.key&lt;/code&gt; is now polyfilled in all browsers for special (non-printable) keys&lt;/li&gt;
&lt;li&gt;On clipboard events, &lt;code&gt;.clipboardData&lt;/code&gt; is now polyfilled in IE&lt;/li&gt;
&lt;li&gt;On drag events, &lt;code&gt;.dataTransfer&lt;/code&gt; is now present&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onMouseOver&lt;/code&gt; and &lt;code&gt;onMouseOut&lt;/code&gt; in addition to the existing &lt;code&gt;onMouseEnter&lt;/code&gt; and &lt;code&gt;onMouseLeave&lt;/code&gt; events&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onLoad&lt;/code&gt; and &lt;code&gt;onError&lt;/code&gt; on &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onReset&lt;/code&gt; on &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;autoFocus&lt;/code&gt; attribute is now polyfilled consistently on &lt;code&gt;input&lt;/code&gt;, &lt;code&gt;select&lt;/code&gt;, and &lt;code&gt;textarea&lt;/code&gt;&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;React no longer adds an &lt;code&gt;__owner__&lt;/code&gt; property to each component&amp;#39;s &lt;code&gt;props&lt;/code&gt; object; passed-in props are now never mutated&lt;/li&gt;
&lt;li&gt;When nesting top-level components (e.g., calling &lt;code&gt;React.renderComponent&lt;/code&gt; within &lt;code&gt;componentDidMount&lt;/code&gt;), events now properly bubble to the parent component&lt;/li&gt;
&lt;li&gt;Fixed a case where nesting top-level components would throw an error when updating&lt;/li&gt;
&lt;li&gt;Passing an invalid or misspelled propTypes type now throws an error&lt;/li&gt;
&lt;li&gt;On mouse enter/leave events, &lt;code&gt;.target&lt;/code&gt;, &lt;code&gt;.relatedTarget&lt;/code&gt;, and &lt;code&gt;.type&lt;/code&gt; are now set properly&lt;/li&gt;
&lt;li&gt;On composition events, &lt;code&gt;.data&lt;/code&gt; is now properly normalized in IE9 and IE10&lt;/li&gt;
&lt;li&gt;CSS property values no longer have &lt;code&gt;px&lt;/code&gt; appended for the unitless properties &lt;code&gt;columnCount&lt;/code&gt;, &lt;code&gt;flex&lt;/code&gt;, &lt;code&gt;flexGrow&lt;/code&gt;, &lt;code&gt;flexShrink&lt;/code&gt;, &lt;code&gt;lineClamp&lt;/code&gt;, &lt;code&gt;order&lt;/code&gt;, &lt;code&gt;widows&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Fixed a memory leak when unmounting children with a &lt;code&gt;componentWillUnmount&lt;/code&gt; handler&lt;/li&gt;
&lt;li&gt;Fixed a memory leak when &lt;code&gt;renderComponentToString&lt;/code&gt; would store event handlers&lt;/li&gt;
&lt;li&gt;Fixed an error that could be thrown when removing form elements during a click handler&lt;/li&gt;
&lt;li&gt;Boolean attributes such as &lt;code&gt;disabled&lt;/code&gt; are rendered without a value (previously &lt;code&gt;disabled=&amp;quot;true&amp;quot;&lt;/code&gt;, now simply &lt;code&gt;disabled&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;key&lt;/code&gt; values containing &lt;code&gt;.&lt;/code&gt; are now supported&lt;/li&gt;
&lt;li&gt;Shortened &lt;code&gt;data-reactid&lt;/code&gt; values for performance&lt;/li&gt;
&lt;li&gt;Components now always remount when the &lt;code&gt;key&lt;/code&gt; property changes&lt;/li&gt;
&lt;li&gt;Event handlers are attached to &lt;code&gt;document&lt;/code&gt; only when necessary, improving performance in some cases&lt;/li&gt;
&lt;li&gt;Events no longer use &lt;code&gt;.returnValue&lt;/code&gt; in modern browsers, eliminating a warning in Chrome&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scrollLeft&lt;/code&gt; and &lt;code&gt;scrollTop&lt;/code&gt; are no longer accessed on document.body, eliminating a warning in Chrome&lt;/li&gt;
&lt;li&gt;General performance fixes, memory optimizations, improvements to warnings and error messages&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;&lt;code&gt;React.addons.TestUtils&lt;/code&gt; was added to help write unit tests&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.addons.TransitionGroup&lt;/code&gt; was renamed to &lt;code&gt;React.addons.CSSTransitionGroup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.addons.TransitionGroup&lt;/code&gt; was added as a more general animation wrapper&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.addons.cloneWithProps&lt;/code&gt; was added for cloning components and modifying their props&lt;/li&gt;
&lt;li&gt;Bug fix for adding back nodes during an exit transition for CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;Bug fix for changing &lt;code&gt;transitionLeave&lt;/code&gt; in CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;Performance optimizations for CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;On checkbox &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; elements, &lt;code&gt;checkedLink&lt;/code&gt; is now supported for two-way binding&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-compiler-and-react-tools-package&quot;&gt;&lt;/a&gt;JSX Compiler and react-tools Package &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-compiler-and-react-tools-package&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;react-tools&lt;/code&gt; npm package no longer includes the React core libraries; use the &lt;code&gt;react&lt;/code&gt; package instead.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;displayName&lt;/code&gt; is now added in more cases, improving error messages and names in the React Dev Tools&lt;/li&gt;
&lt;li&gt;Fixed an issue where an invalid token error was thrown after a JSX closing tag&lt;/li&gt;
&lt;li&gt;&lt;code&gt;JSXTransformer&lt;/code&gt; now uses source maps automatically in modern browsers&lt;/li&gt;
&lt;li&gt;&lt;code&gt;JSXTransformer&lt;/code&gt; error messages now include the filename and problematic line contents when a file fails to parse&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-02-20T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html</guid>
</item>
<item>
<title>React v0.9 RC</title>
<description>&lt;p&gt;We&amp;#39;re almost ready to release React v0.9! We&amp;#39;re posting a release candidate so that you can test your apps on it; we&amp;#39;d much prefer to find show-stopping bugs now rather than after we release.&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.9.0-rc1.js&quot;&gt;http://fb.me/react-0.9.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.9.0-rc1.min.js&quot;&gt;http://fb.me/react-0.9.0-rc1.min.js&lt;/a&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.9.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.9.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.9.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.9.0-rc1.min.js&lt;/a&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.9.0-rc1.js&quot;&gt;http://fb.me/JSXTransformer-0.9.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.9.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;upgrade-notes&quot;&gt;&lt;/a&gt;Upgrade Notes &lt;a class=&quot;hash-link&quot; href=&quot;#upgrade-notes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In addition to the changes to React core listed below, we&amp;#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:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;html language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&amp;gt;&lt;/span&gt;
Monkeys:
{listOfMonkeys} {submitButton}
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In v0.8 and below, it was transformed to the following:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;DOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;s2&quot;&gt;&amp;quot; Monkeys: &amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;listOfMonkeys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;submitButton&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;In v0.9, it will be transformed to this JS instead:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;DOM&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;null&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;hll&quot;&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Monkeys:&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;span class=&quot;hll&quot;&gt; &lt;span class=&quot;nx&quot;&gt;listOfMonkeys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot; &amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;submitButton&lt;/span&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;We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.&lt;/p&gt;
&lt;p&gt;In cases where you want to preserve the space adjacent to a newline, you can write a JS string like &lt;code&gt;{&amp;quot;Monkeys: &amp;quot;}&lt;/code&gt; in your JSX source. We&amp;#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 &lt;a href=&quot;https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md&quot;&gt;install jsx_whitespace_transformer from npm&lt;/a&gt; and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&amp;#39;s existing whitespace behavior.&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;The lifecycle methods &lt;code&gt;componentDidMount&lt;/code&gt; and &lt;code&gt;componentDidUpdate&lt;/code&gt; no longer receive the root node as a parameter; use &lt;code&gt;this.getDOMNode()&lt;/code&gt; instead&lt;/li&gt;
&lt;li&gt;Whenever a prop is equal to &lt;code&gt;undefined&lt;/code&gt;, the default value returned by &lt;code&gt;getDefaultProps&lt;/code&gt; will now be used instead&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.unmountAndReleaseReactRootNode&lt;/code&gt; was previously deprecated and has now been removed&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToString&lt;/code&gt; is now synchronous and returns the generated HTML string&lt;/li&gt;
&lt;li&gt;Full-page rendering (that is, rendering the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; tag using React) is now supported only when starting with server-rendered markup&lt;/li&gt;
&lt;li&gt;On mouse wheel events, &lt;code&gt;deltaY&lt;/code&gt; is no longer negated&lt;/li&gt;
&lt;li&gt;When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)&lt;/li&gt;
&lt;li&gt;On &lt;code&gt;input&lt;/code&gt;, &lt;code&gt;select&lt;/code&gt;, and &lt;code&gt;textarea&lt;/code&gt; elements, &lt;code&gt;.getValue()&lt;/code&gt; is no longer supported; use &lt;code&gt;.getDOMNode().value&lt;/code&gt; instead&lt;/li&gt;
&lt;li&gt;&lt;code&gt;this.context&lt;/code&gt; on components is now reserved for internal use by React&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;React now never rethrows errors, so stack traces are more accurate and Chrome&amp;#39;s purple break-on-error stop sign now works properly&lt;/li&gt;
&lt;li&gt;Added a new tool for profiling React components and identifying places where defining &lt;code&gt;shouldComponentUpdate&lt;/code&gt; can give performance improvements&lt;/li&gt;
&lt;li&gt;Added support for SVG tags &lt;code&gt;defs&lt;/code&gt;, &lt;code&gt;linearGradient&lt;/code&gt;, &lt;code&gt;polygon&lt;/code&gt;, &lt;code&gt;radialGradient&lt;/code&gt;, &lt;code&gt;stop&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for more attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;noValidate&lt;/code&gt; and &lt;code&gt;formNoValidate&lt;/code&gt; for forms&lt;/li&gt;
&lt;li&gt;&lt;code&gt;property&lt;/code&gt; for Open Graph &lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;sandbox&lt;/code&gt;, &lt;code&gt;seamless&lt;/code&gt;, and &lt;code&gt;srcDoc&lt;/code&gt; for &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scope&lt;/code&gt; for screen readers&lt;/li&gt;
&lt;li&gt;&lt;code&gt;span&lt;/code&gt; for &lt;code&gt;&amp;lt;colgroup&amp;gt;&lt;/code&gt; tags&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Added support for defining &lt;code&gt;propTypes&lt;/code&gt; in mixins&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;any&lt;/code&gt;, &lt;code&gt;arrayOf&lt;/code&gt;, &lt;code&gt;component&lt;/code&gt;, &lt;code&gt;oneOfType&lt;/code&gt;, &lt;code&gt;renderable&lt;/code&gt;, &lt;code&gt;shape&lt;/code&gt; to &lt;code&gt;React.PropTypes&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;statics&lt;/code&gt; on component spec for static component methods&lt;/li&gt;
&lt;li&gt;On all events, &lt;code&gt;.currentTarget&lt;/code&gt; is now properly set&lt;/li&gt;
&lt;li&gt;On keyboard events, &lt;code&gt;.key&lt;/code&gt; is now polyfilled in all browsers for special (non-printable) keys&lt;/li&gt;
&lt;li&gt;On clipboard events, &lt;code&gt;.clipboardData&lt;/code&gt; is now polyfilled in IE&lt;/li&gt;
&lt;li&gt;On drag events, &lt;code&gt;.dataTransfer&lt;/code&gt; is now present&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onMouseOver&lt;/code&gt; and &lt;code&gt;onMouseOut&lt;/code&gt; in addition to the existing &lt;code&gt;onMouseEnter&lt;/code&gt; and &lt;code&gt;onMouseLeave&lt;/code&gt; events&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onLoad&lt;/code&gt; and &lt;code&gt;onError&lt;/code&gt; on &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onReset&lt;/code&gt; on &lt;code&gt;&amp;lt;form&amp;gt;&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;autoFocus&lt;/code&gt; attribute is now polyfilled consistently on &lt;code&gt;input&lt;/code&gt;, &lt;code&gt;select&lt;/code&gt;, and &lt;code&gt;textarea&lt;/code&gt;&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;React no longer adds an &lt;code&gt;__owner__&lt;/code&gt; property to each component&amp;#39;s &lt;code&gt;props&lt;/code&gt; object; passed-in props are now never mutated&lt;/li&gt;
&lt;li&gt;When nesting top-level components (e.g., calling &lt;code&gt;React.renderComponent&lt;/code&gt; within &lt;code&gt;componentDidMount&lt;/code&gt;), events now properly bubble to the parent component&lt;/li&gt;
&lt;li&gt;Fixed a case where nesting top-level components would throw an error when updating&lt;/li&gt;
&lt;li&gt;Passing an invalid or misspelled propTypes type now throws an error&lt;/li&gt;
&lt;li&gt;On mouse enter/leave events, &lt;code&gt;.target&lt;/code&gt;, &lt;code&gt;.relatedTarget&lt;/code&gt;, and &lt;code&gt;.type&lt;/code&gt; are now set properly&lt;/li&gt;
&lt;li&gt;On composition events, &lt;code&gt;.data&lt;/code&gt; is now properly normalized in IE9 and IE10&lt;/li&gt;
&lt;li&gt;CSS property values no longer have &lt;code&gt;px&lt;/code&gt; appended for the unitless properties &lt;code&gt;columnCount&lt;/code&gt;, &lt;code&gt;flex&lt;/code&gt;, &lt;code&gt;flexGrow&lt;/code&gt;, &lt;code&gt;flexShrink&lt;/code&gt;, &lt;code&gt;lineClamp&lt;/code&gt;, &lt;code&gt;order&lt;/code&gt;, &lt;code&gt;widows&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Fixed a memory leak when unmounting children with a &lt;code&gt;componentWillUnmount&lt;/code&gt; handler&lt;/li&gt;
&lt;li&gt;Fixed a memory leak when &lt;code&gt;renderComponentToString&lt;/code&gt; would store event handlers&lt;/li&gt;
&lt;li&gt;Fixed an error that could be thrown when removing form elements during a click handler&lt;/li&gt;
&lt;li&gt;&lt;code&gt;key&lt;/code&gt; values containing &lt;code&gt;.&lt;/code&gt; are now supported&lt;/li&gt;
&lt;li&gt;Shortened &lt;code&gt;data-reactid&lt;/code&gt; values for performance&lt;/li&gt;
&lt;li&gt;Components now always remount when the &lt;code&gt;key&lt;/code&gt; property changes&lt;/li&gt;
&lt;li&gt;Event handlers are attached to &lt;code&gt;document&lt;/code&gt; only when necessary, improving performance in some cases&lt;/li&gt;
&lt;li&gt;Events no longer use &lt;code&gt;.returnValue&lt;/code&gt; in modern browsers, eliminating a warning in Chrome&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scrollLeft&lt;/code&gt; and &lt;code&gt;scrollTop&lt;/code&gt; are no longer accessed on document.body, eliminating a warning in Chrome&lt;/li&gt;
&lt;li&gt;General performance fixes, memory optimizations, improvements to warnings and error messages&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;&lt;code&gt;React.addons.TransitionGroup&lt;/code&gt; was renamed to &lt;code&gt;React.addons.CSSTransitionGroup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.addons.TransitionGroup&lt;/code&gt; was added as a more general animation wrapper&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.addons.cloneWithProps&lt;/code&gt; was added for cloning components and modifying their props&lt;/li&gt;
&lt;li&gt;Bug fix for adding back nodes during an exit transition for CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;Bug fix for changing &lt;code&gt;transitionLeave&lt;/code&gt; in CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;Performance optimizations for CSSTransitionGroup&lt;/li&gt;
&lt;li&gt;On checkbox &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; elements, &lt;code&gt;checkedLink&lt;/code&gt; is now supported for two-way binding&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-compiler-and-react-tools-package&quot;&gt;&lt;/a&gt;JSX Compiler and react-tools Package &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-compiler-and-react-tools-package&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;react-tools&lt;/code&gt; npm package no longer includes the React core libraries; use the &lt;code&gt;react&lt;/code&gt; package instead.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;displayName&lt;/code&gt; is now added in more cases, improving error messages and names in the React Dev Tools&lt;/li&gt;
&lt;li&gt;Fixed an issue where an invalid token error was thrown after a JSX closing tag&lt;/li&gt;
&lt;li&gt;&lt;code&gt;JSXTransformer&lt;/code&gt; now uses source maps automatically in modern browsers&lt;/li&gt;
&lt;li&gt;&lt;code&gt;JSXTransformer&lt;/code&gt; error messages now include the filename and problematic line contents when a file fails to parse&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-02-16T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/16/react-v0.9-rc1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/16/react-v0.9-rc1.html</guid>
</item>
<item>
<title>Community Round-up #16</title>
<description>&lt;p&gt;There have been many posts recently covering the &lt;i&gt;why&lt;/i&gt; and &lt;i&gt;how&lt;/i&gt; of React. This week&amp;#39;s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-in-a-nutshell&quot;&gt;&lt;/a&gt;React in a nutshell &lt;a class=&quot;hash-link&quot; href=&quot;#react-in-a-nutshell&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Got five minutes to pitch React to your coworkers? John Lynch (&lt;a href=&quot;https://twitter.com/johnrlynch&quot;&gt;@johnrlynch&lt;/a&gt;) put together &lt;a href=&quot;http://slid.es/johnlynch/reactjs&quot;&gt;this excellent and refreshing slideshow&lt;/a&gt;:&lt;/p&gt;
&lt;iframe src=&quot;//slid.es/johnlynch/reactjs/embed&quot; width=&quot;576&quot; height=&quot;420&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reacts-diff-algorithm&quot;&gt;&lt;/a&gt;React&amp;#39;s diff algorithm &lt;a class=&quot;hash-link&quot; href=&quot;#reacts-diff-algorithm&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React core team member Christopher Chedeau (&lt;a href=&quot;https://twitter.com/vjeux&quot;&gt;@vjeux&lt;/a&gt;) explores the innards of React&amp;#39;s tree diffing algorithm in this &lt;a href=&quot;http://calendar.perfplanet.com/2013/diff/&quot;&gt;extensive and well-illustrated post&lt;/a&gt;. &lt;figure&gt;&lt;a href=&quot;http://calendar.perfplanet.com/2013/diff/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-diff-tree.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;While we&amp;#39;re talking about tree diffing: Matt Esch (&lt;a href=&quot;https://twitter.com/MatthewEsch&quot;&gt;@MatthewEsch&lt;/a&gt;) created &lt;a href=&quot;https://github.com/Matt-Esch/virtual-dom&quot;&gt;this project&lt;/a&gt;, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;many-many-new-introductions-to-react&quot;&gt;&lt;/a&gt;Many, many new introductions to React! &lt;a class=&quot;hash-link&quot; href=&quot;#many-many-new-introductions-to-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;James Padosley wrote a short post on the basics (and merits) of React: &lt;a href=&quot;http://james.padolsey.com/javascript/what-is-react/&quot;&gt;What is React?&lt;/a&gt;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;What I like most about React is that it doesn&amp;#39;t impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://james.padolsey.com/javascript/what-is-react/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Taylor Lapeyre (&lt;a href=&quot;https://twitter.com/taylorlapeyre&quot;&gt;@taylorlapeyre&lt;/a&gt;) wrote another nice &lt;a href=&quot;http://words.taylorlapeyre.me/an-introduction-to-react&quot;&gt;introduction to React&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://words.taylorlapeyre.me/an-introduction-to-react&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href=&quot;http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&amp;amp;utm_medium=post&amp;amp;utm_campaign=echojs&quot;&gt;This &amp;quot;Deep explanation for newbies&amp;quot;&lt;/a&gt; by &lt;a href=&quot;https://twitter.com/ProJavaScript&quot;&gt;@ProJavaScript&lt;/a&gt; explains how to get started building a React game without using the optional JSX syntax.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-around-the-world&quot;&gt;&lt;/a&gt;React around the world &lt;a class=&quot;hash-link&quot; href=&quot;#react-around-the-world&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;It&amp;#39;s great to see the React community expand internationally. &lt;a href=&quot;http://habrahabr.ru/post/189230/&quot;&gt;This site&lt;/a&gt; features a React introduction in Russian.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tutorial-series&quot;&gt;&lt;/a&gt;React tutorial series &lt;a class=&quot;hash-link&quot; href=&quot;#react-tutorial-series&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/@followchrisp&quot;&gt;Christopher Pitt&lt;/a&gt; explains &lt;a href=&quot;https://medium.com/react-tutorials/828c397e3dc8&quot;&gt;React Components&lt;/a&gt; and &lt;a href=&quot;https://medium.com/react-tutorials/ef11cd55caa0&quot;&gt;React Properties&lt;/a&gt;. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the &lt;a href=&quot;https://medium.com/react-tutorials&quot;&gt;other posts in his React Tutorial series&lt;/a&gt;, e.g. on using &lt;a href=&quot;https://medium.com/react-tutorials/8aaec65a546c&quot;&gt;React + Backbone Model&lt;/a&gt; and &lt;a href=&quot;https://medium.com/react-tutorials/c00be0cf1592&quot;&gt;React + Backbone Router&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;beginner-tutorial-implementing-the-board-game-go&quot;&gt;&lt;/a&gt;Beginner tutorial: Implementing the board game Go &lt;a class=&quot;hash-link&quot; href=&quot;#beginner-tutorial-implementing-the-board-game-go&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://cjlarose.com/&quot;&gt;Chris LaRose&lt;/a&gt; walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his &lt;a href=&quot;http://cjlarose.com/2014/01/09/react-board-game-tutorial.html&quot;&gt;tutorial&lt;/a&gt; or go straight to the &lt;a href=&quot;https://github.com/cjlarose/react-go&quot;&gt;code&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;egghead.io-video-tutorials&quot;&gt;&lt;/a&gt;Egghead.io video tutorials &lt;a class=&quot;hash-link&quot; href=&quot;#egghead.io-video-tutorials&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Joe Maddalone (&lt;a href=&quot;https://twitter.com/joemaddalone&quot;&gt;@joemaddalone&lt;/a&gt;) of &lt;a href=&quot;https://egghead.io/&quot;&gt;egghead.io&lt;/a&gt; created a series of React video tutorials, such as &lt;a href=&quot;http://www.youtube.com/watch?v=rFvZydtmsxM&amp;amp;feature=youtu.be&amp;amp;a&quot;&gt;this&lt;/a&gt; introduction to React Components. [&lt;a href=&quot;http://www.youtube.com/watch?v=rFvZydtmsxM&amp;amp;feature=youtu.be&amp;amp;a&quot;&gt;part 1&lt;/a&gt;], [&lt;a href=&quot;http://www.youtube.com/watch?v=5yvFLrt7N8M&quot;&gt;part 2&lt;/a&gt;]&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-finally-a-great-serverclient-web-stack&quot;&gt;&lt;/a&gt;&amp;quot;React: Finally, a great server/client web stack&amp;quot; &lt;a class=&quot;hash-link&quot; href=&quot;#react-finally-a-great-serverclient-web-stack&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Eric Florenzano (&lt;a href=&quot;https://twitter.com/ericflo&quot;&gt;@ericflo&lt;/a&gt;) sheds some light on what makes React perfect for server rendering:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;[...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]&lt;/p&gt;
&lt;p&gt;What I&amp;#39;ve discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;building-a-complex-react-component&quot;&gt;&lt;/a&gt;Building a complex React component &lt;a class=&quot;hash-link&quot; href=&quot;#building-a-complex-react-component&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://matt-harrison.com/&quot;&gt;Matt Harrison&lt;/a&gt; walks through the process of &lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;creating an SVG-based Resistance Calculator&lt;/a&gt; using React. &lt;figure&gt;&lt;a href=&quot;http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/&quot;&gt;&lt;img src=&quot;/react/img/blog/resistance-calculator.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweets&quot;&gt;&lt;/a&gt;Random Tweets &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweets&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs](https://twitter.com/search?q=%23reactjs&amp;src=hash) has very simple API, but it&#39;s amazing how much work has been done under the hood to make it blazing fast.&lt;/p&gt;&amp;mdash; Anton Astashov (@anton_astashov) &lt;a href=&quot;https://twitter.com/anton_astashov/status/417556491646693378&quot;&gt;December 30, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[#reactjs]((https://twitter.com/search?q=%23reactjs&amp;src=hash) makes refactoring your HTML as easy &amp; natural as refactoring your javascript [@react_js](https://twitter.com/react_js)&lt;/p&gt;&amp;mdash; Jared Forsyth (@jaredforsyth) &lt;a href=&quot;https://twitter.com/jaredforsyth/status/420304083010854912&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Played with react.js for an hour, so many things suddenly became stupidly simple.&lt;/p&gt;&amp;mdash; andrewingram (@andrewingram) &lt;a href=&quot;https://twitter.com/andrewingram/status/422810480701620225&quot;&gt;January 13, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice&lt;/p&gt;&amp;mdash; julik (@julikt) &lt;a href=&quot;https://twitter.com/julikt/status/422843478792765440&quot;&gt;January 13, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;brb rewriting everything with react
&lt;/p&gt;&amp;mdash; Ben Smithett (@bensmithett) &lt;a href=&quot;https://twitter.com/bensmithett/status/430671242186592256&quot;&gt;February 4, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-02-15T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html</guid>
</item>
<item>
<title>Community Round-up #15</title>
<description>&lt;p&gt;Interest in React seems to have surged ever since David Nolen (&lt;a href=&quot;https://twitter.com/swannodette&quot;&gt;@swannodette&lt;/a&gt;)&amp;#39;s introduction of &lt;a href=&quot;https://github.com/swannodette/om&quot;&gt;Om&lt;/a&gt; in his post &lt;a href=&quot;http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/&quot;&gt;&amp;quot;The Future of Javascript MVC Frameworks&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-another-level-of-indirection&quot;&gt;&lt;/a&gt;&amp;quot;React: Another Level of Indirection&amp;quot; &lt;a class=&quot;hash-link&quot; href=&quot;#react-another-level-of-indirection&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To start things off, Eric Normand (&lt;a href=&quot;https://twitter.com/ericnormand&quot;&gt;@ericnormand&lt;/a&gt;) of &lt;a href=&quot;http://lispcast.com&quot;&gt;LispCast&lt;/a&gt; makes the case for &lt;a href=&quot;http://www.lispcast.com/react-another-level-of-indirection&quot;&gt;React from a general functional programming standpoint&lt;/a&gt; and explains how React&amp;#39;s &amp;quot;Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript&amp;quot;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.lispcast.com/react-another-level-of-indirection&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reagent-minimalistic-react-for-clojurescript&quot;&gt;&lt;/a&gt;Reagent: Minimalistic React for ClojureScript &lt;a class=&quot;hash-link&quot; href=&quot;#reagent-minimalistic-react-for-clojurescript&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Dan Holmsand (&lt;a href=&quot;https://twitter.com/holmsand&quot;&gt;@holmsand&lt;/a&gt;) created &lt;a href=&quot;http://holmsand.github.io/reagent/&quot;&gt;Reagent&lt;/a&gt;, a simplistic ClojureScript API to React.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.&lt;/p&gt;
&lt;p&gt;The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://holmsand.github.io/reagent/&quot;&gt;Check it out on Github...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;functional-dom-programming&quot;&gt;&lt;/a&gt;Functional DOM programming &lt;a class=&quot;hash-link&quot; href=&quot;#functional-dom-programming&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React&amp;#39;s one-way data-binding naturally lends itself to a functional programming approach. Facebook&amp;#39;s Pete Hunt (&lt;a href=&quot;https://twitter.com/floydophone&quot;&gt;@floydophone&lt;/a&gt;) explores how one would go about &lt;a href=&quot;https://medium.com/p/67d81637d43&quot;&gt;writing web apps in a functional manner&lt;/a&gt;. Spoiler alert:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/p/67d81637d43&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/Lqcs6hPOcFw?start=2963&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;kioo-separating-markup-and-logic&quot;&gt;&lt;/a&gt;Kioo: Separating markup and logic &lt;a class=&quot;hash-link&quot; href=&quot;#kioo-separating-markup-and-logic&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/ckirkendall&quot;&gt;Creighton Kirkendall&lt;/a&gt; created &lt;a href=&quot;https://github.com/ckirkendall/kioo&quot;&gt;Kioo&lt;/a&gt;, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.&lt;/p&gt;
&lt;p&gt;A basic example from github:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;html language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;cp&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;html&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;lang=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;en&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;header&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Header placeholder&lt;span class=&quot;nt&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;ul&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;id=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;navigation&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;li&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;nav-item&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;a&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;href=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;#&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;Placeholder&lt;span class=&quot;nt&quot;&gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;div&lt;/span&gt; &lt;span class=&quot;na&quot;&gt;class=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;content&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&lt;/span&gt;place holder&lt;span class=&quot;nt&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nt&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;clojure language-clojure&quot; data-lang=&quot;clojure&quot;&gt;&lt;span class=&quot;nv&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;defn &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;my-nav-item&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;caption&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;func&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;nf&quot;&gt;kioo/component&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;main.html&amp;quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:.nav-item&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;ss&quot;&gt;:a&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;nf&quot;&gt;do-&amp;gt;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;content&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;caption&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;nf&quot;&gt;set-attr&lt;/span&gt; &lt;span class=&quot;ss&quot;&gt;:onClick&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;func&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;defn &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;my-header&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;heading&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;nav-elms&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;nf&quot;&gt;kioo/component&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;main.html&amp;quot;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:header&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;ss&quot;&gt;:h1&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;nf&quot;&gt;content&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;heading&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;ss&quot;&gt;:ul&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;nf&quot;&gt;content&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nb&quot;&gt;map &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;my-nav-item&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;nav-elms&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;defn &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;my-page&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;data&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;nf&quot;&gt;kioo/component&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;main.html&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;{[&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:header&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;nf&quot;&gt;substitute&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;my-header&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:heading&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;data&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;ss&quot;&gt;:navigation&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;data&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;ss&quot;&gt;:.content&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;nf&quot;&gt;content&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:content&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;data&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;def &lt;/span&gt;&lt;span class=&quot;nv&quot;&gt;app-state&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;atom&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;ss&quot;&gt;:heading&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;
&lt;span class=&quot;ss&quot;&gt;:content&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;quot;Hello World&amp;quot;&lt;/span&gt;
&lt;span class=&quot;ss&quot;&gt;:navigation&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[[&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;home&amp;quot;&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;nf&quot;&gt;js/alert&lt;/span&gt; &lt;span class=&quot;nv&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;s&quot;&gt;&amp;quot;next&amp;quot;&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;nf&quot;&gt;js/alert&lt;/span&gt; &lt;span class=&quot;nv&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;nf&quot;&gt;om/root&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;app-state&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;my-page&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;.-body&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;js/document&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;om&quot;&gt;&lt;/a&gt;Om &lt;a class=&quot;hash-link&quot; href=&quot;#om&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In an interview with David Nolen, Tom Coupland (&lt;a href=&quot;https://twitter.com/tcoupland&quot;&gt;@tcoupland&lt;/a&gt;) of InfoQ provides a nice summary of recent developments around Om (&amp;quot;&lt;a href=&quot;http://www.infoq.com/news/2014/01/om-react&quot;&gt;Om: Enhancing Facebook&amp;#39;s React with Immutability&lt;/a&gt;&amp;quot;).&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.infoq.com/news/2014/01/om-react&quot;&gt;Read the full interview...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;a-slice-of-react-clojurescript-and-om&quot;&gt;&lt;/a&gt;A slice of React, ClojureScript and Om &lt;a class=&quot;hash-link&quot; href=&quot;#a-slice-of-react-clojurescript-and-om&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Fredrik Dyrkell (&lt;a href=&quot;https://twitter.com/lexicallyscoped&quot;&gt;@lexicallyscoped&lt;/a&gt;) rewrote part of the &lt;a href=&quot;http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html&quot;&gt;React tutorial in both ClojureScript and Om&lt;/a&gt;, along with short, helpful explanations.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;In a separate post, Dyrkell breaks down &lt;a href=&quot;http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html&quot;&gt;how to build a binary clock component&lt;/a&gt; in Om.&lt;/p&gt;
&lt;p&gt;[&lt;a href=&quot;http://www.lexicallyscoped.com/demo/binclock/&quot;&gt;Demo&lt;/a&gt;] [&lt;a href=&quot;https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs&quot;&gt;Code&lt;/a&gt;]&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;time-travel-implementing-undo-in-om&quot;&gt;&lt;/a&gt;Time Travel: Implementing undo in Om &lt;a class=&quot;hash-link&quot; href=&quot;#time-travel-implementing-undo-in-om&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;David Nolen shows how to leverage immutable data structures to &lt;a href=&quot;http://swannodette.github.io/2013/12/31/time-travel/&quot;&gt;add global undo&lt;/a&gt; functionality to an app – using just 13 lines of ClojureScript.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;a-step-by-step-om-walkthrough&quot;&gt;&lt;/a&gt;A Step-by-Step Om Walkthrough &lt;a class=&quot;hash-link&quot; href=&quot;#a-step-by-step-om-walkthrough&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;http://www.joshlehman.me&quot;&gt;Josh Lehman&lt;/a&gt; took the time to create an extensive &lt;a href=&quot;http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/&quot;&gt;step-by-step walkthrough&lt;/a&gt; of the React tutorial in Om. The well-documented source is on &lt;a href=&quot;https://github.com/jalehman/omtut-starter&quot;&gt;github&lt;/a&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;omkara&quot;&gt;&lt;/a&gt;Omkara &lt;a class=&quot;hash-link&quot; href=&quot;#omkara&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/brendanyounger&quot;&gt;brendanyounger&lt;/a&gt; created &lt;a href=&quot;https://github.com/brendanyounger/omkara&quot;&gt;omkara&lt;/a&gt;, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;om-experience-report&quot;&gt;&lt;/a&gt;Om Experience Report &lt;a class=&quot;hash-link&quot; href=&quot;#om-experience-report&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Adam Solove (&lt;a href=&quot;https://twitter.com/asolove/&quot;&gt;@asolove&lt;/a&gt;) &lt;a href=&quot;http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html&quot;&gt;dives a little deeper into Om, React and ClojureScript&lt;/a&gt;. He shares some helpful tips he gathered while building his &lt;a href=&quot;https://github.com/asolove/carto-crayon&quot;&gt;CartoCrayon&lt;/a&gt; prototype.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;not-so-random-tweet&quot;&gt;&lt;/a&gt;Not-so-random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#not-so-random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;[@swannodette](https://twitter.com/swannodette) No thank you! It&#39;s honestly a bit weird because Om is exactly what I didn&#39;t know I wanted for doing functional UI work.&lt;/p&gt;&amp;mdash; Adam Solove (@asolove) &lt;a href=&quot;https://twitter.com/asolove/status/420294067637858304&quot;&gt;January 6, 2014&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-02-05T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/02/05/community-roundup-15.html</guid>
</item>
<item>
<title>Community Round-up #14</title>
<description>&lt;p&gt;The theme of this first round-up of 2014 is integration. I&amp;#39;ve tried to assemble a list of articles and projects that use React in various environments.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-baseline&quot;&gt;&lt;/a&gt;React Baseline &lt;a class=&quot;hash-link&quot; href=&quot;#react-baseline&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React is only one-piece of your web application stack. &lt;a href=&quot;https://github.com/intabulas&quot;&gt;Mark Lussier&lt;/a&gt; shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github&lt;/p&gt;
&lt;p&gt;I encourage you to fork, and make it right and submit a pull request!&lt;/p&gt;
&lt;p&gt;My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project&amp;#39;s Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/intabulas/reactjs-baseline&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;animal-sounds&quot;&gt;&lt;/a&gt;Animal Sounds &lt;a class=&quot;hash-link&quot; href=&quot;#animal-sounds&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://joshduck.com/&quot;&gt;Josh Duck&lt;/a&gt; used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
&lt;figure&gt;&lt;a href=&quot;http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9&quot;&gt;&lt;img src=&quot;/react/img/blog/animal-sounds.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9&quot;&gt;Download the app...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-rails-tutorial&quot;&gt;&lt;/a&gt;React Rails Tutorial &lt;a class=&quot;hash-link&quot; href=&quot;#react-rails-tutorial&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://selem.im&quot;&gt;Selem Delul&lt;/a&gt; bundled the &lt;a href=&quot;http://facebook.github.io/react/docs/tutorial.html&quot;&gt;React Tutorial&lt;/a&gt; into a rails app. This is a good example on how to get started with a rails project.&lt;/p&gt;
&lt;blockquote&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;git clone https://github.com/necrodome/react-rails-tutorial
cd react-rails-tutorial
bundle install
rake db:migrate
rails s
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/necrodome/react-rails-tutorial&quot;&gt;View on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;mixing-with-backbone&quot;&gt;&lt;/a&gt;Mixing with Backbone &lt;a class=&quot;hash-link&quot; href=&quot;#mixing-with-backbone&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://eldar.djafarov.com/&quot;&gt;Eldar Djafarov&lt;/a&gt; implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.&lt;/p&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/djkojb/qZf48/13/embedded/&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;&lt;a href=&quot;http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/&quot;&gt;Check out the blog post...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-infinite-scroll&quot;&gt;&lt;/a&gt;React Infinite Scroll &lt;a class=&quot;hash-link&quot; href=&quot;#react-infinite-scroll&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/guillaumervls&quot;&gt;Guillaume Rivals&lt;/a&gt; implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;InfiniteScroll&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;pageStart&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;loadFunc&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;hasMore&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;||&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loader&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;loader&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Loading&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;}&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// &amp;lt;-- This is the &amp;quot;stuff&amp;quot; you want to load&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/InfiniteScroll&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/guillaumervls/react-infinite-scroll&quot;&gt;Try it out on GitHub!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;web-components-style&quot;&gt;&lt;/a&gt;Web Components Style &lt;a class=&quot;hash-link&quot; href=&quot;#web-components-style&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://subtlegradient.com/&quot;&gt;Thomas Aylott&lt;/a&gt; implemented an API that looks like Web Components but using React underneath.&lt;/p&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-vs-angular&quot;&gt;&lt;/a&gt;React vs Angular &lt;a class=&quot;hash-link&quot; href=&quot;#react-vs-angular&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React is often compared with Angular. &lt;a href=&quot;http://skulbuny.com/2013/10/31/react-vs-angular/&quot;&gt;Pete Hunt&lt;/a&gt; wrote an opinionated post on the subject.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.&lt;/p&gt;
&lt;p&gt;I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://skulbuny.com/2013/10/31/react-vs-angular/&quot;&gt;Read the full post...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweet&quot;&gt;&lt;/a&gt;Random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Really intrigued by React.js. I&amp;#39;ve looked at all JS frameworks, and excepting &lt;a href=&quot;https://twitter.com/serenadejs&quot;&gt;@serenadejs&lt;/a&gt; this is the first one which makes sense to me.&lt;/p&gt;&amp;mdash; Jonas Nicklas (@jonicklas) &lt;a href=&quot;https://twitter.com/jonicklas/statuses/412640708755869696&quot;&gt;December 16, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;
</description>
<pubDate>2014-01-06T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/01/06/community-roundup-14.html</guid>
</item>
<item>
<title>React Chrome Developer Tools</title>
<description>&lt;p&gt;With the new year, we thought you&amp;#39;d enjoy some new tools for debugging React code. Today we&amp;#39;re releasing the &lt;a href=&quot;https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi&quot;&gt;React Developer Tools&lt;/a&gt;, an extension to the Chrome Developer Tools. &lt;a href=&quot;https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi&quot;&gt;Download them from the Chrome Web Store&lt;/a&gt;.&lt;/p&gt;
&lt;figure&gt;&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/Cey7BS6dE0M&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;p&gt;You will get a new tab titled &amp;quot;React&amp;quot; in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.&lt;/p&gt;
&lt;p&gt;Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.&lt;/p&gt;
&lt;p&gt;When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
&lt;figure&gt;&lt;a href=&quot;https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi&quot;&gt;&lt;img src=&quot;/react/img/blog/react-dev-tools.jpg&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;We hope these tools will help your team better understand your component hierarchy and track down bugs. We&amp;#39;re very excited about this initial launch and appreciate any feedback you may have. As always, we also accept &lt;a href=&quot;https://github.com/facebook/react-devtools&quot;&gt;pull requests on GitHub&lt;/a&gt;.&lt;/p&gt;
</description>
<pubDate>2014-01-02T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html</guid>
</item>
<item>
<title>Community Round-up #13</title>
<description>&lt;p&gt;Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-touch&quot;&gt;&lt;/a&gt;React Touch &lt;a class=&quot;hash-link&quot; href=&quot;#react-touch&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.petehunt.net/&quot;&gt;Pete Hunt&lt;/a&gt; wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.&lt;/p&gt;
&lt;figure&gt;&lt;iframe src=&quot;//player.vimeo.com/video/79659941&quot; width=&quot;220&quot; height=&quot;400&quot; frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;p&gt;&lt;a href=&quot;http://petehunt.github.io/react-touch/&quot;&gt;Try out the demos!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;introduction-to-react&quot;&gt;&lt;/a&gt;Introduction to React &lt;a class=&quot;hash-link&quot; href=&quot;#introduction-to-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.phpied.com/&quot;&gt;Stoyan Stefanov&lt;/a&gt; talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.&lt;/p&gt;
&lt;figure&gt;&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/SMMRJif5QW0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-e4x-the-good-parts&quot;&gt;&lt;/a&gt;JSX: E4X The Good Parts &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-e4x-the-good-parts&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;JSX is often compared to the now defunct E4X, &lt;a href=&quot;http://blog.vjeux.com/&quot;&gt;Vjeux&lt;/a&gt; went over all the E4X features and explained how JSX is different and hopefully doesn&amp;#39;t repeat the same mistakes.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I&amp;#39;m going to go over all the features of E4X and explain the design decisions behind JSX.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Historical Context&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html&quot;&gt;Continue reading ...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react--socket.io&quot;&gt;&lt;/a&gt;React + Socket.io &lt;a class=&quot;hash-link&quot; href=&quot;#react--socket.io&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://enome.be/nl&quot;&gt;Geert Pasteels&lt;/a&gt; made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;changeHandler&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;data&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;nx&quot;&gt;_&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;isEqual&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;data&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;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;o&quot;&gt;&amp;amp;&amp;amp;&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;path&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;data&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;path&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;data&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;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;componentDidMount&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;root&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;path&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;utils&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;nodePath&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;root&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;on&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&amp;#39;&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;changeHandler&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;componentWillUpdate&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;props&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;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;emit&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&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;path&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;path&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;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;componentWillUnmount&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;nx&quot;&gt;socket&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;removeListener&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;component-change&amp;#39;&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;change&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Enome/react.io&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;cssobjectify&quot;&gt;&lt;/a&gt;cssobjectify &lt;a class=&quot;hash-link&quot; href=&quot;#cssobjectify&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://andreypopp.com/&quot;&gt;Andrey Popp&lt;/a&gt; implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;cm&quot;&gt;/* style.css */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;font&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;size&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;12&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;px&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;-&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;red&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;cm&quot;&gt;/* myapp.js */&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&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;react-tools/build/modules/React&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;Styles&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;./styles.css&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;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;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;nx&quot;&gt;style&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;Styles&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&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;nx&quot;&gt;Hello&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;world&lt;/span&gt;&lt;span class=&quot;o&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;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/andreypopp/cssobjectify&quot;&gt;Check it out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ngreact&quot;&gt;&lt;/a&gt;ngReact &lt;a class=&quot;hash-link&quot; href=&quot;#ngreact&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://davidandsuzi.com/&quot;&gt;David Chang&lt;/a&gt; working at &lt;a href=&quot;http://www.hasoffers.com/&quot;&gt;HasOffer&lt;/a&gt; wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular&amp;#39;s transclusion it is 450% slower.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that&amp;#39;s 67% faster). You&amp;#39;ll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it&amp;#39;s 433ms, which is more than half of the total time!
&lt;figure&gt;&lt;a href=&quot;http://davidandsuzi.com/ngreact-react-components-in-angular/&quot;&gt;&lt;img src=&quot;/react/img/blog/ngreact.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://davidandsuzi.com/ngreact-react-components-in-angular/&quot;&gt;Read the full article...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;vim-jsx&quot;&gt;&lt;/a&gt;vim-jsx &lt;a class=&quot;hash-link&quot; href=&quot;#vim-jsx&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mxw&quot;&gt;Max Wang&lt;/a&gt; made a vim syntax highlighting and indentation plugin for vim.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.&lt;/p&gt;
&lt;p&gt;This bundle requires pangloss&amp;#39;s &lt;a href=&quot;https://github.com/pangloss/vim-javascript&quot;&gt;vim-javascript&lt;/a&gt; syntax highlighting.&lt;/p&gt;
&lt;p&gt;Vim support for inline XML in JS is remarkably similar to the same for PHP.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mxw/vim-jsx&quot;&gt;View on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;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;p&gt;&lt;center&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.&lt;/p&gt;&amp;mdash; Eric Florenzano (@ericflo) &lt;a href=&quot;https://twitter.com/ericflo/statuses/413842834974732288&quot;&gt;December 20, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/center&gt;&lt;/p&gt;
</description>
<pubDate>2013-12-30T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/12/30/community-roundup-13.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/12/30/community-roundup-13.html</guid>
</item>
<item>
<title>Community Round-up #12</title>
<description>&lt;p&gt;React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the &lt;a href=&quot;/react/docs/getting-started.html&quot;&gt;docs&lt;/a&gt; and do not hesitate to ask questions on the &lt;a href=&quot;http://groups.google.com/group/reactjs&quot;&gt;Google Group&lt;/a&gt;, &lt;a href=&quot;irc://chat.freenode.net/reactjs&quot;&gt;IRC&lt;/a&gt; or &lt;a href=&quot;http://stackoverflow.com/questions/tagged/reactjs&quot;&gt;Stack Overflow&lt;/a&gt;. We are trying our best to help you out!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-future-of-javascript-mvc&quot;&gt;&lt;/a&gt;The Future of Javascript MVC &lt;a class=&quot;hash-link&quot; href=&quot;#the-future-of-javascript-mvc&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://swannodette.github.io/&quot;&gt;David Nolen&lt;/a&gt; announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient &lt;a href=&quot;http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate&quot;&gt;shouldComponentUpdate&lt;/a&gt; and get huge performance improvements on some tasks.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We&amp;#39;ve known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it&amp;#39;s no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.&lt;/p&gt;
&lt;p&gt;Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?&lt;/p&gt;
&lt;p&gt;A whole lot.
&lt;figure&gt;&lt;a href=&quot;http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/&quot;&gt;&lt;img src=&quot;/react/img/blog/om-backbone.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/&quot;&gt;Read the full article...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;scroll-position-with-react&quot;&gt;&lt;/a&gt;Scroll Position with React &lt;a class=&quot;hash-link&quot; href=&quot;#scroll-position-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Managing the scroll position when new content is inserted is usually very tricky to get right. &lt;a href=&quot;http://blog.vjeux.com/&quot;&gt;Vjeux&lt;/a&gt; discovered that &lt;a href=&quot;http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate&quot;&gt;componentWillUpdate&lt;/a&gt; and &lt;a href=&quot;http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate&quot;&gt;componentDidUpdate&lt;/a&gt; were triggered exactly at the right time to manage the scroll position.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;componentWillUpdate: function() {
var node = this.getDOMNode();
this.shouldScrollBottom =
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
},
componentDidUpdate: function() {
if (this.shouldScrollBottom) {
var node = this.getDOMNode();
node.scrollTop = node.scrollHeight
}
},
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html&quot;&gt;Check out the blog article...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;lights-out&quot;&gt;&lt;/a&gt;Lights Out &lt;a class=&quot;hash-link&quot; href=&quot;#lights-out&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;React declarative approach is well suited to write games. &lt;a href=&quot;https://github.com/chenglou&quot;&gt;Cheng Lou&lt;/a&gt; wrote the famous Lights Out game in React. It&amp;#39;s a good example of use of &lt;a href=&quot;http://facebook.github.io/react/docs/animation.html&quot;&gt;TransitionGroup&lt;/a&gt; to implement animations.
&lt;figure&gt;&lt;a href=&quot;http://chenglou.github.io/react-lights-out/&quot;&gt;&lt;img src=&quot;/react/img/blog/lights-out.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://chenglou.github.io/react-lights-out/&quot;&gt;Try it out!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactive-table-bookmarklet&quot;&gt;&lt;/a&gt;Reactive Table Bookmarklet &lt;a class=&quot;hash-link&quot; href=&quot;#reactive-table-bookmarklet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.phpied.com/&quot;&gt;Stoyan Stefanov&lt;/a&gt; wrote a bookmarklet to process tables on the internet. It adds a little &amp;quot;pop&amp;quot; button that expands to a full-screen view with sorting, editing and export to csv and json.
&lt;figure&gt;&lt;a href=&quot;http://www.phpied.com/reactivetable-bookmarklet/&quot;&gt;&lt;img src=&quot;/react/img/blog/reactive-bookmarklet.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.phpied.com/reactivetable-bookmarklet/&quot;&gt;Check out the blog post...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;montagejs-tutorial-in-react&quot;&gt;&lt;/a&gt;MontageJS Tutorial in React &lt;a class=&quot;hash-link&quot; href=&quot;#montagejs-tutorial-in-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/ssorallen&quot;&gt;Ross Allen&lt;/a&gt; implemented &lt;a href=&quot;http://montagejs.org/&quot;&gt;MontageJS&lt;/a&gt;&amp;#39;s &lt;a href=&quot;http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html&quot;&gt;Reddit tutorial&lt;/a&gt; in React. This is a good opportunity to compare the philosophies of the two libraries.&lt;/p&gt;
&lt;iframe width=&quot;100%&quot; height=&quot;300&quot; src=&quot;http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js&quot; allowfullscreen=&quot;allowfullscreen&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
&lt;p&gt;&lt;a href=&quot;http://jsfiddle.net/ssorallen/fEsYt/&quot;&gt;View the source on JSFiddle...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;writing-good-react-components&quot;&gt;&lt;/a&gt;Writing Good React Components &lt;a class=&quot;hash-link&quot; href=&quot;#writing-good-react-components&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.whn.se/&quot;&gt;William Högman Rudenmalm&lt;/a&gt; wrote an article on how to write good React components. This is full of good advice.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.&lt;/p&gt;
&lt;p&gt;The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.&lt;/p&gt;
&lt;p&gt;You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.whn.se/post/69621609605/writing-good-react-components&quot;&gt;Read the full article ...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;hoodie-react-todomvc&quot;&gt;&lt;/a&gt;Hoodie React TodoMVC &lt;a class=&quot;hash-link&quot; href=&quot;#hoodie-react-todomvc&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://svenlito.com/&quot;&gt;Sven Lito&lt;/a&gt; integrated the React TodoMVC example within an &lt;a href=&quot;http://hood.ie/&quot;&gt;Hoodie&lt;/a&gt; web app environment. This should let you get started using Hoodie and React.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;text language-text&quot; data-lang=&quot;text&quot;&gt;hoodie new todomvc -t &amp;quot;hoodiehq/hoodie-react-todomvc&amp;quot;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/hoodiehq/hoodie-react-todomvc&quot;&gt;Check out on GitHub...&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-compiler&quot;&gt;&lt;/a&gt;JSX Compiler &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-compiler&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ever wanted to have a quick way to see what a JSX tag would be converted to? &lt;a href=&quot;http://www.yungsters.com/&quot;&gt;Tim Yung&lt;/a&gt; made a page for it.
&lt;figure&gt;&lt;a href=&quot;http://facebook.github.io/react/jsx-compiler.html&quot;&gt;&lt;img src=&quot;/react/img/blog/jsx-compiler.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://facebook.github.io/react/jsx-compiler.html&quot;&gt;Try it out!&lt;/a&gt;&lt;/p&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;p&gt;&lt;center&gt;&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;.&lt;a href=&quot;https://twitter.com/jordwalke&quot;&gt;@jordwalke&lt;/a&gt; lays down some truth &lt;a href=&quot;http://t.co/AXAn0UlUe3&quot;&gt;http://t.co/AXAn0UlUe3&lt;/a&gt;, optimizing your JS application shouldn&amp;#39;t force you to rewrite so much code &lt;a href=&quot;https://twitter.com/search?q=%23reactjs&amp;amp;src=hash&quot;&gt;#reactjs&lt;/a&gt;&lt;/p&gt;&amp;mdash; David Nolen (@swannodette) &lt;a href=&quot;https://twitter.com/swannodette/statuses/413780079249215488&quot;&gt;December 19, 2013&lt;/a&gt;&lt;/blockquote&gt;&lt;/center&gt;&lt;/p&gt;
</description>
<pubDate>2013-12-23T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/12/23/community-roundup-12.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/12/23/community-roundup-12.html</guid>
</item>
<item>
<title>React v0.8</title>
<description>&lt;p&gt;I&amp;#39;ll start by answering the obvious question:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;What happened to 0.6 and 0.7?&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;It&amp;#39;s become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that&amp;#39;s a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our &lt;code&gt;react-tools&lt;/code&gt; module which includes React, but when browserifying that ends up packaging all of &lt;code&gt;esprima&lt;/code&gt; and some other dependencies that aren&amp;#39;t needed on the client. So we wanted to make this whole experience better.&lt;/p&gt;
&lt;p&gt;We talked with &lt;a href=&quot;https://github.com/jeffbski&quot;&gt;Jeff Barczewski&lt;/a&gt; who was the owner of the &lt;code&gt;react&lt;/code&gt; module on npm. He was kind enough to transition ownership to us and release his package under a different name: &lt;code&gt;autoflow&lt;/code&gt;. I encourage you to &lt;a href=&quot;https://github.com/jeffbski/autoflow&quot;&gt;check it out&lt;/a&gt; if you&amp;#39;re writing a lot of asynchronous code. In order to not break all of &lt;code&gt;react&lt;/code&gt;&amp;#39;s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We&amp;#39;re also including a warning if you use our &lt;code&gt;react&lt;/code&gt; module like you would use the previous package.&lt;/p&gt;
&lt;p&gt;In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven&amp;#39;t added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.&lt;/p&gt;
&lt;p&gt;We hope that by releasing &lt;code&gt;react&lt;/code&gt; on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!&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&quot;&gt;&lt;/a&gt;React &lt;a class=&quot;hash-link&quot; href=&quot;#react&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Added support for more attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;rows&lt;/code&gt; &amp;amp; &lt;code&gt;cols&lt;/code&gt; for &lt;code&gt;&amp;lt;textarea&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;defer&lt;/code&gt; &amp;amp; &lt;code&gt;async&lt;/code&gt; for &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;loop&lt;/code&gt; for &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; &amp;amp; &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;autoCorrect&lt;/code&gt; for form fields (a non-standard attribute only supported by mobile WebKit)&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Improved error messages&lt;/li&gt;
&lt;li&gt;Fixed Selection events in IE11&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;onContextMenu&lt;/code&gt; events&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;Fixed bugs with TransitionGroup when children were undefined&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;onTransition&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-tools&quot;&gt;&lt;/a&gt;react-tools &lt;a class=&quot;hash-link&quot; href=&quot;#react-tools&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Upgraded &lt;code&gt;jstransform&lt;/code&gt; and &lt;code&gt;esprima-fb&lt;/code&gt;&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;Added support for use in IE8&lt;/li&gt;
&lt;li&gt;Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2013-12-19T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2013/12/19/react-v0.8.0.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/12/19/react-v0.8.0.html</guid>
</item>
</channel>
</rss>
Reference in New Issue View Git Blame Copy Permalink