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
6cfdfa8636166cc079cdbed690e6e312aebeb557
react/blog/index.html
T

631 lines
61 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>React | Blog</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="React | Blog" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://facebook.github.io/react/blog/index.html" />
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
<meta property="og:description" content="A JavaScript library for building user interfaces" />
<meta property="fb:app_id" content="623268441017527" />
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.min.js"></script>
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html">docs</a></li>
<li><a href="/react/support.html">support</a></li>
<li><a href="/react/downloads.html">download</a></li>
<li><a href="/react/blog/" class="active">blog</a></li>
<li><a href="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></li>
<li><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></li>
<li><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></li>
<li><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></li>
<li><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></li>
<li><a href="/react/blog/2014/01/06/community-roundup-14.html">Community Round-up #14</a></li>
<li><a href="/react/blog/2014/01/02/react-chrome-developer-tools.html">React Chrome Developer Tools</a></li>
<li><a href="/react/blog/2013/12/30/community-roundup-13.html">Community Round-up #13</a></li>
<li><a href="/react/blog/2013/12/23/community-roundup-12.html">Community Round-up #12</a></li>
<li><a href="/react/blog/2013/12/19/react-v0.8.0.html">React v0.8</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/24/community-roundup-17.html">Community Round-up #17</a></h1>
<p class="meta">February 24, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>It&#39;s exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.</p>
<h2><a class="anchor" name="react-in-the-real-world"></a>React in the Real World <a class="hash-link" href="#react-in-the-real-world">#</a></h2><h3><a class="anchor" name="facebook-lookback-video-editor"></a>Facebook Lookback video editor <a class="hash-link" href="#facebook-lookback-video-editor">#</a></h3>
<p>Large parts of Facebook&#39;s web frontend are already powered by React. The recently released Facebook <a href="https://www.facebook.com/lookback/edit/">Lookback video and its corresponding editor</a> are great examples of a complex, real-world React app.</p>
<h3><a class="anchor" name="russias-largest-bank-is-now-powered-by-react"></a>Russia&#39;s largest bank is now powered by React <a class="hash-link" href="#russias-largest-bank-is-now-powered-by-react">#</a></h3>
<p>Sberbank, Russia&#39;s largest bank, recently switched large parts of their site to use React, as detailed in <a href="https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg">this post by Vyacheslav Slinko</a>.</p>
<h3><a class="anchor" name="relato"></a>Relato <a class="hash-link" href="#relato">#</a></h3>
<p><a href="http://bripkens.github.io/relato/">Relato</a> by <a href="https://github.com/bripkens">Ben Ripkens</a> shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it&#39;s super fast!</p>
<h3><a class="anchor" name="makona-editor"></a>Makona Editor <a class="hash-link" href="#makona-editor">#</a></h3>
<p>John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
<figure><a href="http://johnthethird.github.io/makona-editor/"><img src="/react/img/blog/makona-editor.png" alt=""></a></figure></p>
<h3><a class="anchor" name="create-chrome-extensions-using-react"></a>Create Chrome extensions using React <a class="hash-link" href="#create-chrome-extensions-using-react">#</a></h3>
<p>React is in no way limited to just web pages. Brandon Tilley (<a href="https://twitter.com/BinaryMuse">@BinaryMuse</a>) just released a detailed walk-through of <a href="http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html">how he built his Chrome extension &quot;Fast Tab Switcher&quot; using React</a>.</p>
<h3><a class="anchor" name="twitter-streaming-client"></a>Twitter Streaming Client <a class="hash-link" href="#twitter-streaming-client">#</a></h3>
<p>Javier Aguirre (<a href="https://twitter.com/javaguirre">@javaguirre</a>) put together a simple <a href="http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/">twitter streaming client using node, socket.io and React</a>.</p>
<h3><a class="anchor" name="sproutsheet"></a>Sproutsheet <a class="hash-link" href="#sproutsheet">#</a></h3>
<p><a href="http://sproutsheet.com/">Sproutsheet</a> is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It&#39;s currently in beta and supports localStorage, and data/image import and export.</p>
<h3><a class="anchor" name="instant-domain-search"></a>Instant Domain Search <a class="hash-link" href="#instant-domain-search">#</a></h3>
<p><a href="https://instantdomainsearch.com/">Instant Domain Search</a> also uses React. It sure is instant!</p>
<h3><a class="anchor" name="svg-based-graphical-node-editor"></a>SVG-based graphical node editor <a class="hash-link" href="#svg-based-graphical-node-editor">#</a></h3>
<p><a href="http://noflojs.org/">NoFlo</a> and <a href="http://meemoo.org/">Meemoo</a> developer <a href="http://www.forresto.com/">Forresto Oliphant</a> built an awesome SVG-based <a href="http://forresto.github.io/prototyping/react/">node editor</a> in React.
<figure><a href="http://forresto.github.io/prototyping/react/"><img src="/react/img/blog/react-svg-fbp.png" alt=""></a></figure></p>
<h3><a class="anchor" name="ultimate-tic-tac-toe-game-in-react"></a>Ultimate Tic-Tac-Toe Game in React <a class="hash-link" href="#ultimate-tic-tac-toe-game-in-react">#</a></h3>
<p>Rafał Cieślak (<a href="https://twitter.com/Ravicious">@Ravicious</a>) wrote a <a href="http://ravicious.github.io/ultimate-ttt/">React version</a> of <a href="http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/">Ultimate Tic Tac Toe</a>. Find the source <a href="https://github.com/ravicious/ultimate-ttt">here</a>.</p>
<h3><a class="anchor" name="reactjs-gallery"></a>ReactJS Gallery <a class="hash-link" href="#reactjs-gallery">#</a></h3>
<p><a href="https://github.com/lele85">Emanuele Rampichini</a>&#39;s <a href="https://github.com/lele85/ReactGallery">ReactJS Gallery</a> is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.</p>
<p>Emanuele shared this awesome demo video with us:</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="react-components"></a>React Components <a class="hash-link" href="#react-components">#</a></h2><h3><a class="anchor" name="table-sorter"></a>Table Sorter <a class="hash-link" href="#table-sorter">#</a></h3>
<p><a href="http://bgerm.github.io/react-table-sorter-demo/">Table Sorter</a> by <a href="https://github.com/bgerm">bgerm</a> [<a href="https://github.com/bgerm/react-table-sorter-demo">source</a>] is another helpful React component.</p>
<h3><a class="anchor" name="static-search"></a>Static-search <a class="hash-link" href="#static-search">#</a></h3>
<p>Dmitry Chestnykh <a href="https://twitter.com/dchest">@dchest</a> wrote a <a href="https://github.com/dchest/static-search">static search indexer</a> in Go, along with a <a href="http://www.codingrobots.com/search/">React-based web front-end</a> that consumes search result via JSON.</p>
<h3><a class="anchor" name="lorem-ipsum-component"></a>Lorem Ipsum component <a class="hash-link" href="#lorem-ipsum-component">#</a></h3>
<p><a href="https://github.com/martinandert">Martin Andert</a> created <a href="https://github.com/martinandert/react-lorem-component">react-lorem-component</a>, a simple component for all your placeholding needs.</p>
<h3><a class="anchor" name="input-with-placeholder-shim"></a>Input with placeholder shim <a class="hash-link" href="#input-with-placeholder-shim">#</a></h3>
<p><a href="https://github.com/enigma-io/react-input-placeholder">react-input=placeholder</a> by <a href="https://github.com/enigma-io">enigma-io</a> is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don&#39;t natively support it.</p>
<h3><a class="anchor" name="dicontainer"></a>diContainer <a class="hash-link" href="#dicontainer">#</a></h3>
<p><a href="https://github.com/SpektrumFM/dicontainer">dicontainer</a> provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.</p>
<h2><a class="anchor" name="react-server-rendering"></a>React server rendering <a class="hash-link" href="#react-server-rendering">#</a></h2>
<p>Ever wonder how to pre-render React components on the server? <a href="https://github.com/mhart/react-server-example">react-server-example</a> by Michael Hart (<a href="http://twitter.com/hichaelmart">@hichaelmart</a>) walks through the necessary steps.</p>
<p>Similarly, Alan deLevie (<a href="https://twitter.com/adelevie">@adelevie</a>) created <a href="https://github.com/adelevie/react-client-server-starter">react-client-server-starter</a>, another detailed walk-through of how to server-render your app.</p>
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>&mdash; Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/20/react-v0.9.html">React v0.9</a></h1>
<p class="meta">February 20, 2014 by Ben Alpert</p>
<hr />
<div class="post">
<p>I&#39;m excited to announce that today we&#39;re releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!</p>
<p>Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.</p>
<p>As always, the release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.9.0.js">http://fb.me/react-0.9.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.9.0.min.js">http://fb.me/react-0.9.0.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0.js">http://fb.me/react-with-addons-0.9.0.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min.js">http://fb.me/react-with-addons-0.9.0.min.js</a></li>
<li><strong>In-Browser JSX Transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.9.0.js">http://fb.me/JSXTransformer-0.9.0.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.9.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<h2><a class="anchor" name="whats-new"></a>What’s New? <a class="hash-link" href="#whats-new">#</a></h2>
<p>This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We&#39;ve also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly.</p>
<p>We&#39;ve also added to the add-ons build <a href="/react/docs/test-utils.html">React.addons.TestUtils</a>, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.</p>
<p>We&#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
<p>In cases where you want to preserve the space adjacent to a newline, you can write <code>{&#39;Monkeys: &#39;}</code> or <code>Monkeys:{&#39; &#39;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:
<ul>
<li><code>crossOrigin</code> for CORS requests</li>
<li><code>download</code> and <code>hrefLang</code> for <code>&lt;a&gt;</code> tags</li>
<li><code>mediaGroup</code> and <code>muted</code> for <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> tags</li>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li>Boolean attributes such as <code>disabled</code> are rendered without a value (previously <code>disabled=&quot;true&quot;</code>, now simply <code>disabled</code>)</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li><code>React.addons.TestUtils</code> was added to help write unit tests</li>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/16/react-v0.9-rc1.html">React v0.9 RC</a></h1>
<p class="meta">February 16, 2014 by Ben Alpert</p>
<hr />
<div class="post">
<p>We&#39;re almost ready to release React v0.9! We&#39;re posting a release candidate so that you can test your apps on it; we&#39;d much prefer to find show-stopping bugs now rather than after we release.</p>
<p>The release candidate is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="http://fb.me/react-0.9.0-rc1.js">http://fb.me/react-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-0.9.0-rc1.min.js">http://fb.me/react-0.9.0-rc1.min.js</a></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.9.0-rc1.js">http://fb.me/react-with-addons-0.9.0-rc1.js</a><br>
Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1.min.js">http://fb.me/react-with-addons-0.9.0-rc1.min.js</a></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="http://fb.me/JSXTransformer-0.9.0-rc1.js">http://fb.me/JSXTransformer-0.9.0-rc1.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.9.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
</code></pre></div>
<p>We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.</p>
<p>In cases where you want to preserve the space adjacent to a newline, you can write a JS string like <code>{&quot;Monkeys: &quot;}</code> in your JSX source. We&#39;ve included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can <a href="https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md">install jsx_whitespace_transformer from npm</a> and run it over your source tree to modify files in place. The transformed JSX files will preserve your code&#39;s existing whitespace behavior.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
<ul>
<li>The lifecycle methods <code>componentDidMount</code> and <code>componentDidUpdate</code> no longer receive the root node as a parameter; use <code>this.getDOMNode()</code> instead</li>
<li>Whenever a prop is equal to <code>undefined</code>, the default value returned by <code>getDefaultProps</code> will now be used instead</li>
<li><code>React.unmountAndReleaseReactRootNode</code> was previously deprecated and has now been removed</li>
<li><code>React.renderComponentToString</code> is now synchronous and returns the generated HTML string</li>
<li>Full-page rendering (that is, rendering the <code>&lt;html&gt;</code> tag using React) is now supported only when starting with server-rendered markup</li>
<li>On mouse wheel events, <code>deltaY</code> is no longer negated</li>
<li>When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)</li>
<li>On <code>input</code>, <code>select</code>, and <code>textarea</code> elements, <code>.getValue()</code> is no longer supported; use <code>.getDOMNode().value</code> instead</li>
<li><code>this.context</code> on components is now reserved for internal use by React</li>
</ul>
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
<ul>
<li>React now never rethrows errors, so stack traces are more accurate and Chrome&#39;s purple break-on-error stop sign now works properly</li>
<li>Added a new tool for profiling React components and identifying places where defining <code>shouldComponentUpdate</code> can give performance improvements</li>
<li>Added support for SVG tags <code>defs</code>, <code>linearGradient</code>, <code>polygon</code>, <code>radialGradient</code>, <code>stop</code></li>
<li>Added support for more attributes:
<ul>
<li><code>noValidate</code> and <code>formNoValidate</code> for forms</li>
<li><code>property</code> for Open Graph <code>&lt;meta&gt;</code> tags</li>
<li><code>sandbox</code>, <code>seamless</code>, and <code>srcDoc</code> for <code>&lt;iframe&gt;</code> tags</li>
<li><code>scope</code> for screen readers</li>
<li><code>span</code> for <code>&lt;colgroup&gt;</code> tags</li>
</ul></li>
<li>Added support for defining <code>propTypes</code> in mixins</li>
<li>Added <code>any</code>, <code>arrayOf</code>, <code>component</code>, <code>oneOfType</code>, <code>renderable</code>, <code>shape</code> to <code>React.PropTypes</code></li>
<li>Added support for <code>statics</code> on component spec for static component methods</li>
<li>On all events, <code>.currentTarget</code> is now properly set</li>
<li>On keyboard events, <code>.key</code> is now polyfilled in all browsers for special (non-printable) keys</li>
<li>On clipboard events, <code>.clipboardData</code> is now polyfilled in IE</li>
<li>On drag events, <code>.dataTransfer</code> is now present</li>
<li>Added support for <code>onMouseOver</code> and <code>onMouseOut</code> in addition to the existing <code>onMouseEnter</code> and <code>onMouseLeave</code> events</li>
<li>Added support for <code>onLoad</code> and <code>onError</code> on <code>&lt;img&gt;</code> elements</li>
<li>Added support for <code>onReset</code> on <code>&lt;form&gt;</code> elements</li>
<li>The <code>autoFocus</code> attribute is now polyfilled consistently on <code>input</code>, <code>select</code>, and <code>textarea</code></li>
</ul>
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
<ul>
<li>React no longer adds an <code>__owner__</code> property to each component&#39;s <code>props</code> object; passed-in props are now never mutated</li>
<li>When nesting top-level components (e.g., calling <code>React.renderComponent</code> within <code>componentDidMount</code>), events now properly bubble to the parent component</li>
<li>Fixed a case where nesting top-level components would throw an error when updating</li>
<li>Passing an invalid or misspelled propTypes type now throws an error</li>
<li>On mouse enter/leave events, <code>.target</code>, <code>.relatedTarget</code>, and <code>.type</code> are now set properly</li>
<li>On composition events, <code>.data</code> is now properly normalized in IE9 and IE10</li>
<li>CSS property values no longer have <code>px</code> appended for the unitless properties <code>columnCount</code>, <code>flex</code>, <code>flexGrow</code>, <code>flexShrink</code>, <code>lineClamp</code>, <code>order</code>, <code>widows</code></li>
<li>Fixed a memory leak when unmounting children with a <code>componentWillUnmount</code> handler</li>
<li>Fixed a memory leak when <code>renderComponentToString</code> would store event handlers</li>
<li>Fixed an error that could be thrown when removing form elements during a click handler</li>
<li><code>key</code> values containing <code>.</code> are now supported</li>
<li>Shortened <code>data-reactid</code> values for performance</li>
<li>Components now always remount when the <code>key</code> property changes</li>
<li>Event handlers are attached to <code>document</code> only when necessary, improving performance in some cases</li>
<li>Events no longer use <code>.returnValue</code> in modern browsers, eliminating a warning in Chrome</li>
<li><code>scrollLeft</code> and <code>scrollTop</code> are no longer accessed on document.body, eliminating a warning in Chrome</li>
<li>General performance fixes, memory optimizations, improvements to warnings and error messages</li>
</ul>
<h3><a class="anchor" name="react-with-addons"></a>React with Addons <a class="hash-link" href="#react-with-addons">#</a></h3>
<ul>
<li><code>React.addons.TransitionGroup</code> was renamed to <code>React.addons.CSSTransitionGroup</code></li>
<li><code>React.addons.TransitionGroup</code> was added as a more general animation wrapper</li>
<li><code>React.addons.cloneWithProps</code> was added for cloning components and modifying their props</li>
<li>Bug fix for adding back nodes during an exit transition for CSSTransitionGroup</li>
<li>Bug fix for changing <code>transitionLeave</code> in CSSTransitionGroup</li>
<li>Performance optimizations for CSSTransitionGroup</li>
<li>On checkbox <code>&lt;input&gt;</code> elements, <code>checkedLink</code> is now supported for two-way binding</li>
</ul>
<h3><a class="anchor" name="jsx-compiler-and-react-tools-package"></a>JSX Compiler and react-tools Package <a class="hash-link" href="#jsx-compiler-and-react-tools-package">#</a></h3>
<ul>
<li>Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed</li>
<li>The <code>react-tools</code> npm package no longer includes the React core libraries; use the <code>react</code> package instead.</li>
<li><code>displayName</code> is now added in more cases, improving error messages and names in the React Dev Tools</li>
<li>Fixed an issue where an invalid token error was thrown after a JSX closing tag</li>
<li><code>JSXTransformer</code> now uses source maps automatically in modern browsers</li>
<li><code>JSXTransformer</code> error messages now include the filename and problematic line contents when a file fails to parse</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/15/community-roundup-16.html">Community Round-up #16</a></h1>
<p class="meta">February 15, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week&#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.</p>
<h2><a class="anchor" name="react-in-a-nutshell"></a>React in a nutshell <a class="hash-link" href="#react-in-a-nutshell">#</a></h2>
<p>Got five minutes to pitch React to your coworkers? John Lynch (<a href="https://twitter.com/johnrlynch">@johnrlynch</a>) put together <a href="http://slid.es/johnlynch/reactjs">this excellent and refreshing slideshow</a>:</p>
<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2><a class="anchor" name="reacts-diff-algorithm"></a>React&#39;s diff algorithm <a class="hash-link" href="#reacts-diff-algorithm">#</a></h2>
<p>React core team member Christopher Chedeau (<a href="https://twitter.com/vjeux">@vjeux</a>) explores the innards of React&#39;s tree diffing algorithm in this <a href="http://calendar.perfplanet.com/2013/diff/">extensive and well-illustrated post</a>. <figure><a href="http://calendar.perfplanet.com/2013/diff/"><img src="/react/img/blog/react-diff-tree.png" alt=""></a></figure></p>
<p>While we&#39;re talking about tree diffing: Matt Esch (<a href="https://twitter.com/MatthewEsch">@MatthewEsch</a>) created <a href="https://github.com/Matt-Esch/virtual-dom">this project</a>, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.</p>
<h2><a class="anchor" name="many-many-new-introductions-to-react"></a>Many, many new introductions to React! <a class="hash-link" href="#many-many-new-introductions-to-react">#</a></h2>
<p>James Padosley wrote a short post on the basics (and merits) of React: <a href="http://james.padolsey.com/javascript/what-is-react/">What is React?</a></p>
<blockquote>
<p>What I like most about React is that it doesn&#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.</p>
<p><a href="http://james.padolsey.com/javascript/what-is-react/">Read the full post...</a></p>
</blockquote>
<p>Taylor Lapeyre (<a href="https://twitter.com/taylorlapeyre">@taylorlapeyre</a>) wrote another nice <a href="http://words.taylorlapeyre.me/an-introduction-to-react">introduction to React</a>.</p>
<blockquote>
<p>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.</p>
<p><a href="http://words.taylorlapeyre.me/an-introduction-to-react">Read the full post...</a></p>
</blockquote>
<p><a href="http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&amp;utm_medium=post&amp;utm_campaign=echojs">This &quot;Deep explanation for newbies&quot;</a> by <a href="https://twitter.com/ProJavaScript">@ProJavaScript</a> explains how to get started building a React game without using the optional JSX syntax.</p>
<h3><a class="anchor" name="react-around-the-world"></a>React around the world <a class="hash-link" href="#react-around-the-world">#</a></h3>
<p>It&#39;s great to see the React community expand internationally. <a href="http://habrahabr.ru/post/189230/">This site</a> features a React introduction in Russian.</p>
<h3><a class="anchor" name="react-tutorial-series"></a>React tutorial series <a class="hash-link" href="#react-tutorial-series">#</a></h3>
<p><a href="https://medium.com/@followchrisp">Christopher Pitt</a> explains <a href="https://medium.com/react-tutorials/828c397e3dc8">React Components</a> and <a href="https://medium.com/react-tutorials/ef11cd55caa0">React Properties</a>. 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 <a href="https://medium.com/react-tutorials">other posts in his React Tutorial series</a>, e.g. on using <a href="https://medium.com/react-tutorials/8aaec65a546c">React + Backbone Model</a> and <a href="https://medium.com/react-tutorials/c00be0cf1592">React + Backbone Router</a>.</p>
<h3><a class="anchor" name="beginner-tutorial-implementing-the-board-game-go"></a>Beginner tutorial: Implementing the board game Go <a class="hash-link" href="#beginner-tutorial-implementing-the-board-game-go">#</a></h3>
<p><a href="http://cjlarose.com/">Chris LaRose</a> walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his <a href="http://cjlarose.com/2014/01/09/react-board-game-tutorial.html">tutorial</a> or go straight to the <a href="https://github.com/cjlarose/react-go">code</a>.</p>
<h3><a class="anchor" name="egghead.io-video-tutorials"></a>Egghead.io video tutorials <a class="hash-link" href="#egghead.io-video-tutorials">#</a></h3>
<p>Joe Maddalone (<a href="https://twitter.com/joemaddalone">@joemaddalone</a>) of <a href="https://egghead.io/">egghead.io</a> created a series of React video tutorials, such as <a href="http://www.youtube.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">this</a> introduction to React Components. [<a href="http://www.youtube.com/watch?v=rFvZydtmsxM&amp;feature=youtu.be&amp;a">part 1</a>], [<a href="http://www.youtube.com/watch?v=5yvFLrt7N8M">part 2</a>]</p>
<h3><a class="anchor" name="react-finally-a-great-serverclient-web-stack"></a>&quot;React: Finally, a great server/client web stack&quot; <a class="hash-link" href="#react-finally-a-great-serverclient-web-stack">#</a></h3>
<p>Eric Florenzano (<a href="https://twitter.com/ericflo">@ericflo</a>) sheds some light on what makes React perfect for server rendering:</p>
<blockquote>
<p>[...] 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. [...]</p>
<p>What I&#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.</p>
<p><a href="http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="building-a-complex-react-component"></a>Building a complex React component <a class="hash-link" href="#building-a-complex-react-component">#</a></h2>
<p><a href="http://matt-harrison.com/">Matt Harrison</a> walks through the process of <a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/">creating an SVG-based Resistance Calculator</a> using React. <figure><a href="http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/"><img src="/react/img/blog/resistance-calculator.png" alt=""></a></figure></p>
<h2><a class="anchor" name="random-tweets"></a>Random Tweets <a class="hash-link" href="#random-tweets">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>&mdash; Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>&mdash; Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>&mdash; andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>&mdash; julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
</p>&mdash; Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
</div>
</div>
<div class="post-list-item">
<h1><a href="/react/blog/2014/02/05/community-roundup-15.html">Community Round-up #15</a></h1>
<p class="meta">February 5, 2014 by Jonas Gebhardt</p>
<hr />
<div class="post">
<p>Interest in React seems to have surged ever since David Nolen (<a href="https://twitter.com/swannodette">@swannodette</a>)&#39;s introduction of <a href="https://github.com/swannodette/om">Om</a> in his post <a href="http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/">&quot;The Future of Javascript MVC Frameworks&quot;</a>.</p>
<p>In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.</p>
<h2><a class="anchor" name="react-another-level-of-indirection"></a>&quot;React: Another Level of Indirection&quot; <a class="hash-link" href="#react-another-level-of-indirection">#</a></h2>
<p>To start things off, Eric Normand (<a href="https://twitter.com/ericnormand">@ericnormand</a>) of <a href="http://lispcast.com">LispCast</a> makes the case for <a href="http://www.lispcast.com/react-another-level-of-indirection">React from a general functional programming standpoint</a> and explains how React&#39;s &quot;Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript&quot;.</p>
<blockquote>
<p>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.</p>
<p><a href="http://www.lispcast.com/react-another-level-of-indirection">Read the full post...</a></p>
</blockquote>
<h2><a class="anchor" name="reagent-minimalistic-react-for-clojurescript"></a>Reagent: Minimalistic React for ClojureScript <a class="hash-link" href="#reagent-minimalistic-react-for-clojurescript">#</a></h2>
<p>Dan Holmsand (<a href="https://twitter.com/holmsand">@holmsand</a>) created <a href="http://holmsand.github.io/reagent/">Reagent</a>, a simplistic ClojureScript API to React.</p>
<blockquote>
<p>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.</p>
<p>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.</p>
<p><a href="http://holmsand.github.io/reagent/">Check it out on Github...</a></p>
</blockquote>
<h2><a class="anchor" name="functional-dom-programming"></a>Functional DOM programming <a class="hash-link" href="#functional-dom-programming">#</a></h2>
<p>React&#39;s one-way data-binding naturally lends itself to a functional programming approach. Facebook&#39;s Pete Hunt (<a href="https://twitter.com/floydophone">@floydophone</a>) explores how one would go about <a href="https://medium.com/p/67d81637d43">writing web apps in a functional manner</a>. Spoiler alert:</p>
<blockquote>
<p>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.</p>
<p><a href="https://medium.com/p/67d81637d43">Read the full post...</a></p>
</blockquote>
<p>Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):</p>
<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="kioo-separating-markup-and-logic"></a>Kioo: Separating markup and logic <a class="hash-link" href="#kioo-separating-markup-and-logic">#</a></h2>
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, 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.</p>
<p>A basic example from github:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header&gt;</span>
<span class="nt">&lt;h1&gt;</span>Header placeholder<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;navigation&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;nav-item&quot;</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>Placeholder<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/header&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:a</span><span class="p">]</span> <span class="p">(</span><span class="nf">do-&gt;</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">caption</span><span class="p">)</span>
<span class="p">(</span><span class="nf">set-attr</span> <span class="ss">:onClick</span> <span class="nv">func</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-header</span> <span class="p">[</span><span class="nv">heading</span> <span class="nv">nav-elms</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:header</span><span class="p">]</span>
<span class="p">{[</span><span class="ss">:h1</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="nv">heading</span><span class="p">)</span>
<span class="p">[</span><span class="ss">:ul</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="nb">map </span><span class="nv">my-nav-item</span> <span class="nv">nav-elms</span><span class="p">))}))</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-page</span> <span class="p">[</span><span class="nv">data</span><span class="p">]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span>
<span class="p">{[</span><span class="ss">:header</span><span class="p">]</span> <span class="p">(</span><span class="nf">substitute</span> <span class="p">(</span><span class="nf">my-header</span> <span class="p">(</span><span class="ss">:heading</span> <span class="nv">data</span><span class="p">)</span>
<span class="p">(</span><span class="ss">:navigation</span> <span class="nv">data</span><span class="p">)))</span>
<span class="p">[</span><span class="ss">:.content</span><span class="p">]</span> <span class="p">(</span><span class="nf">content</span> <span class="p">(</span><span class="ss">:content</span> <span class="nv">data</span><span class="p">))}))</span>
<span class="p">(</span><span class="k">def </span><span class="nv">app-state</span> <span class="p">(</span><span class="nf">atom</span> <span class="p">{</span><span class="ss">:heading</span> <span class="s">&quot;main&quot;</span>
<span class="ss">:content</span> <span class="s">&quot;Hello World&quot;</span>
<span class="ss">:navigation</span> <span class="p">[[</span><span class="s">&quot;home&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]</span>
<span class="p">[</span><span class="s">&quot;next&quot;</span> <span class="o">#</span><span class="p">(</span><span class="nf">js/alert</span> <span class="nv">%</span><span class="p">)]]}))</span>
<span class="p">(</span><span class="nf">om/root</span> <span class="nv">app-state</span> <span class="nv">my-page</span> <span class="p">(</span><span class="nf">.-body</span> <span class="nv">js/document</span><span class="p">))</span>
</code></pre></div><h2><a class="anchor" name="om"></a>Om <a class="hash-link" href="#om">#</a></h2>
<p>In an interview with David Nolen, Tom Coupland (<a href="https://twitter.com/tcoupland">@tcoupland</a>) of InfoQ provides a nice summary of recent developments around Om (&quot;<a href="http://www.infoq.com/news/2014/01/om-react">Om: Enhancing Facebook&#39;s React with Immutability</a>&quot;).</p>
<blockquote>
<p>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.</p>
<p><a href="http://www.infoq.com/news/2014/01/om-react">Read the full interview...</a></p>
</blockquote>
<h3><a class="anchor" name="a-slice-of-react-clojurescript-and-om"></a>A slice of React, ClojureScript and Om <a class="hash-link" href="#a-slice-of-react-clojurescript-and-om">#</a></h3>
<p>Fredrik Dyrkell (<a href="https://twitter.com/lexicallyscoped">@lexicallyscoped</a>) rewrote part of the <a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">React tutorial in both ClojureScript and Om</a>, along with short, helpful explanations.</p>
<blockquote>
<p>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.</p>
<p><a href="http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html">Read the full post...</a></p>
</blockquote>
<p>In a separate post, Dyrkell breaks down <a href="http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html">how to build a binary clock component</a> in Om.</p>
<p>[<a href="http://www.lexicallyscoped.com/demo/binclock/">Demo</a>] [<a href="https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs">Code</a>]</p>
<h3><a class="anchor" name="time-travel-implementing-undo-in-om"></a>Time Travel: Implementing undo in Om <a class="hash-link" href="#time-travel-implementing-undo-in-om">#</a></h3>
<p>David Nolen shows how to leverage immutable data structures to <a href="http://swannodette.github.io/2013/12/31/time-travel/">add global undo</a> functionality to an app – using just 13 lines of ClojureScript.</p>
<h3><a class="anchor" name="a-step-by-step-om-walkthrough"></a>A Step-by-Step Om Walkthrough <a class="hash-link" href="#a-step-by-step-om-walkthrough">#</a></h3>
<p><a href="http://www.joshlehman.me">Josh Lehman</a> took the time to create an extensive <a href="http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/">step-by-step walkthrough</a> of the React tutorial in Om. The well-documented source is on <a href="https://github.com/jalehman/omtut-starter">github</a>.</p>
<h3><a class="anchor" name="omkara"></a>Omkara <a class="hash-link" href="#omkara">#</a></h3>
<p><a href="https://github.com/brendanyounger">brendanyounger</a> created <a href="https://github.com/brendanyounger/omkara">omkara</a>, 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.</p>
<h3><a class="anchor" name="om-experience-report"></a>Om Experience Report <a class="hash-link" href="#om-experience-report">#</a></h3>
<p>Adam Solove (<a href="https://twitter.com/asolove/">@asolove</a>) <a href="http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html">dives a little deeper into Om, React and ClojureScript</a>. He shares some helpful tips he gathered while building his <a href="https://github.com/asolove/carto-crayon">CartoCrayon</a> prototype.</p>
<h2><a class="anchor" name="not-so-random-tweet"></a>Not-so-random Tweet <a class="hash-link" href="#not-so-random-tweet">#</a></h2>
<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>&mdash; Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
</div>
</div>
<div class="pagination">
<a href="/react/blog/page2/" class="next">
Next Page &raquo;
</a>
</div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">&copy; 2014 Facebook Inc.</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink