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
ffa032b1464592c358d5146600dedbb0bcbdf23b
react/feed.xml
T
Paul O’Shannessy 654b347d58 v0.12.0
2014-10-28 11:36:52 -07:00

1044 lines
174 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>React v0.12</title>
<description>&lt;p&gt;We&amp;#39;re happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!&lt;/p&gt;
&lt;p&gt;We have talked a lot about some of the bigger changes in this release. &lt;a href=&quot;/react/blog/2014/10/14/introducing-react-elements.html&quot;&gt;We introduced new terminology&lt;/a&gt; and changed APIs to clean up and simplify some of the concepts of React. &lt;a href=&quot;/react/blog/2014/10/16/react-v0.12-rc1.html&quot;&gt;We also made several changes to JSX&lt;/a&gt; and deprecated a few functions. We won&amp;#39;t go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We&amp;#39;ll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.&lt;/p&gt;
&lt;p&gt;The release is available for download:&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.12.0.js&quot;&gt;http://fb.me/react-0.12.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.12.0.min.js&quot;&gt;http://fb.me/react-0.12.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.12.0.js&quot;&gt;http://fb.me/react-with-addons-0.12.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.12.0.min.js&quot;&gt;http://fb.me/react-with-addons-0.12.0.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.12.0.js&quot;&gt;http://fb.me/JSXTransformer-0.12.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.12.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;new-terminology-amp-updated-apis&quot;&gt;&lt;/a&gt;New Terminology &amp;amp; Updated APIs &lt;a class=&quot;hash-link&quot; href=&quot;#new-terminology-amp-updated-apis&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;v0.12 is bringing about some new terminology. &lt;a href=&quot;/react/blog/2014/10/14/introducing-react-elements.html&quot;&gt;We introduced&lt;/a&gt; this 2 weeks ago and we&amp;#39;ve also documented it in &lt;a href=&quot;/react/docs/glossary.html&quot;&gt;a new section of the documentation&lt;/a&gt;. As a part of this, we also corrected many of our top-level APIs to align with the terminology. &lt;code&gt;Component&lt;/code&gt; has been removed from all of our &lt;code&gt;React.render*&lt;/code&gt; methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with &lt;code&gt;render&lt;/code&gt; methods in your component classes, we decided to keep the top-level functions short and sweet. &lt;code&gt;React.renderComponent&lt;/code&gt; is now &lt;code&gt;React.render&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;We also corrected some other misnomers. &lt;code&gt;React.isValidComponent&lt;/code&gt; actually determines if the argument is a ReactElement, so it has been renamed to &lt;code&gt;React.isValidElement&lt;/code&gt;. In the same vein, &lt;code&gt;React.PropTypes.component&lt;/code&gt; is now &lt;code&gt;React.PropTypes.element&lt;/code&gt; and &lt;code&gt;React.PropTypes.renderable&lt;/code&gt; is now &lt;code&gt;React.PropTypes.node&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;The old methods will still work but will warn upon first use. They will be removed in v0.13.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-changes&quot;&gt;&lt;/a&gt;JSX Changes &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-changes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;/react/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes&quot;&gt;We talked more in depth about these before&lt;/a&gt;, so here are the highlights.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;No more &lt;code&gt;/** @jsx React.DOM */&lt;/code&gt;!&lt;/li&gt;
&lt;li&gt;We no longer transform to a straight function call. &lt;code&gt;&amp;lt;Component/&amp;gt;&lt;/code&gt; now becomes &lt;code&gt;React.createElement(Component)&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;DOM components don&amp;#39;t make use of &lt;code&gt;React.DOM&lt;/code&gt;, instead we pass the tag name directly. &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; becomes &lt;code&gt;React.createElement(&amp;#39;div&amp;#39;)&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;We introduced spread attributes as a quick way to transfer props.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;devtools-improvements-no-more-__internals&quot;&gt;&lt;/a&gt;DevTools Improvements, No More &lt;code&gt;__internals&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#devtools-improvements-no-more-__internals&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;For months we&amp;#39;ve gotten complaints about the React DevTools message. It shouldn&amp;#39;t have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!&lt;/p&gt;
&lt;p&gt;As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. &lt;code&gt;React.__internals&lt;/code&gt; is no more.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;license-change---bsd&quot;&gt;&lt;/a&gt;License Change - BSD &lt;a class=&quot;hash-link&quot; href=&quot;#license-change---bsd&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.&lt;/p&gt;
&lt;p&gt;You can read the full text of the &lt;a href=&quot;https://github.com/facebook/react/blob/master/LICENSE&quot;&gt;LICENSE&lt;/a&gt; and &lt;a href=&quot;https://github.com/facebook/react/blob/master/PATENTS&quot;&gt;&lt;code&gt;PATENTS&lt;/code&gt;&lt;/a&gt; files on GitHub.&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-changes&quot;&gt;&lt;/a&gt;Breaking Changes &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-changes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;key&lt;/code&gt; and &lt;code&gt;ref&lt;/code&gt; moved off props object, now accessible on the element directly&lt;/li&gt;
&lt;li&gt;React is now BSD licensed with accompanying Patents grant&lt;/li&gt;
&lt;li&gt;Default prop resolution has moved to Element creation time instead of mount time, making them effectively static&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.__internals&lt;/code&gt; is removed - it was exposed for DevTools which no longer needs access&lt;/li&gt;
&lt;li&gt;Composite Component functions can no longer be called directly - they must be wrapped with &lt;code&gt;React.createFactory&lt;/code&gt; first. This is handled for you when using JSX.&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;Spread operator (&lt;code&gt;{...}&lt;/code&gt;) introduced to deprecate &lt;code&gt;this.transferPropsTo&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added support for more HTML attributes: &lt;code&gt;acceptCharset&lt;/code&gt;, &lt;code&gt;classID&lt;/code&gt;, &lt;code&gt;manifest&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;deprecations&quot;&gt;&lt;/a&gt;Deprecations &lt;a class=&quot;hash-link&quot; href=&quot;#deprecations&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;React.renderComponent&lt;/code&gt; --&amp;gt; &lt;code&gt;React.render&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToString&lt;/code&gt; --&amp;gt; &lt;code&gt;React.renderToString&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToStaticMarkup&lt;/code&gt; --&amp;gt; &lt;code&gt;React.renderToStaticMarkup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.isValidComponent&lt;/code&gt; --&amp;gt; &lt;code&gt;React.isValidElement&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.PropTypes.component&lt;/code&gt; --&amp;gt; &lt;code&gt;React.PropTypes.element&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.PropTypes.renderable&lt;/code&gt; --&amp;gt; &lt;code&gt;React.PropTypes.node&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DEPRECATED&lt;/strong&gt; &lt;code&gt;React.isValidClass&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DEPRECATED&lt;/strong&gt; &lt;code&gt;instance.transferPropsTo&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DEPRECATED&lt;/strong&gt; Returning &lt;code&gt;false&lt;/code&gt; from event handlers to preventDefault&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DEPRECATED&lt;/strong&gt; Convenience Constructor usage as function, instead wrap with &lt;code&gt;React.createFactory&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;DEPRECATED&lt;/strong&gt; use of &lt;code&gt;key={null}&lt;/code&gt; to assign implicit keys&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;Better handling of events and updates in nested results, fixing value restoration in &amp;quot;layered&amp;quot; controlled components&lt;/li&gt;
&lt;li&gt;Correctly treat &lt;code&gt;event.getModifierState&lt;/code&gt; as case sensitive&lt;/li&gt;
&lt;li&gt;Improved normalization of &lt;code&gt;event.charCode&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Better error stacks when involving autobound methods&lt;/li&gt;
&lt;li&gt;Removed DevTools message when the DevTools are installed&lt;/li&gt;
&lt;li&gt;Correctly detect required language features across browsers&lt;/li&gt;
&lt;li&gt;Fixed support for some HTML attributes:
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;list&lt;/code&gt; updates correctly now&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scrollLeft&lt;/code&gt;, &lt;code&gt;scrollTop&lt;/code&gt; removed, these should not be specified as props&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;Improved 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;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;&lt;code&gt;React.addons.batchedUpdates&lt;/code&gt; added to API for hooking into update cycle&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-changes&quot;&gt;&lt;/a&gt;Breaking Changes &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-changes&quot;&gt;#&lt;/a&gt;&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;React.addons.update&lt;/code&gt; uses &lt;code&gt;assign&lt;/code&gt; instead of &lt;code&gt;copyProperties&lt;/code&gt; which does &lt;code&gt;hasOwnProperty&lt;/code&gt; checks. Properties on prototypes will no longer be updated correctly.&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;Fixed some issues with CSS Transitions&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx&quot;&gt;&lt;/a&gt;JSX &lt;a class=&quot;hash-link&quot; href=&quot;#jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;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;Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components&lt;/li&gt;
&lt;li&gt;JSX no longer transforms to simple function calls&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;&lt;code&gt;@jsx React.DOM&lt;/code&gt; no longer required&lt;/li&gt;
&lt;li&gt;spread (&lt;code&gt;{...}&lt;/code&gt;) operator introduced to allow easier use of props&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;JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-10-28T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html</guid>
</item>
<item>
<title>React.js Conf</title>
<description>&lt;p&gt;Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been &amp;quot;some day&amp;quot;. In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;We&amp;#39;re happy to announce &lt;a href=&quot;http://conf.reactjs.com/&quot;&gt;React.js Conf&lt;/a&gt;! It will take place January 28-29, 2015 on Facebook&amp;#39;s campus in Menlo Park, California.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Before we open registration, &lt;a href=&quot;http://conf.reactjs.com/call-for-presenters.html&quot;&gt;we&amp;#39;re looking for great talks&lt;/a&gt;. We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!&lt;/p&gt;
&lt;p&gt;Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...&lt;/p&gt;
&lt;p&gt;We look forward to seeing many of you in person in just a few short months!&lt;/p&gt;
</description>
<pubDate>2014-10-27T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html</guid>
</item>
<item>
<title>Community Round-up #23</title>
<description>&lt;p&gt;This round-up is a special edition on &lt;a href=&quot;http://facebook.github.io/flux/&quot;&gt;Flux&lt;/a&gt;. If you expect to see diagrams showing arrows that all point in the same direction, you won&amp;#39;t be disappointed!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-flux-at-forwardjs&quot;&gt;&lt;/a&gt;React And Flux at ForwardJS &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-flux-at-forwardjs&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Facebook engineers &lt;a href=&quot;https://github.com/jingc&quot;&gt;Jing Chen&lt;/a&gt; and &lt;a href=&quot;https://github.com/fisherwebdev&quot;&gt;Bill Fisher&lt;/a&gt; gave a talk about Flux and React at &lt;a href=&quot;http://forwardjs.com/&quot;&gt;ForwardJS&lt;/a&gt;, and how using an application architecture with a unidirectional data flow helped solve recurring bugs.&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/i__969noyAM&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h1&gt;&lt;a class=&quot;anchor&quot; name=&quot;yahoo&quot;&gt;&lt;/a&gt;Yahoo &lt;a class=&quot;hash-link&quot; href=&quot;#yahoo&quot;&gt;#&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/yahoo/flux-router-component&quot;&gt;Flux Router Component&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/yahoo/dispatchr&quot;&gt;Dispatchr&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/yahoo/fetchr&quot;&gt;Fetchr&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/yahoo/flux-examples&quot;&gt;Flux Examples&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reflux&quot;&gt;&lt;/a&gt;Reflux &lt;a class=&quot;hash-link&quot; href=&quot;#reflux&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://spoike.ghost.io/&quot;&gt;Mikael Brassman&lt;/a&gt; wrote &lt;a href=&quot;https://github.com/spoike/refluxjs&quot;&gt;Reflux&lt;/a&gt;, a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains &lt;a href=&quot;http://spoike.ghost.io/deconstructing-reactjss-flux/&quot;&gt;the reasons why in a blog post&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;center&gt;
&lt;a href=&quot;http://spoike.ghost.io/deconstructing-reactjss-flux/&quot;&gt;&lt;img src=&quot;/react/img/blog/reflux-flux.png&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;
&lt;/center&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-and-flux-interview&quot;&gt;&lt;/a&gt;React and Flux Interview &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-flux-interview&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://ianobermiller.com/&quot;&gt;Ian Obermiller&lt;/a&gt;, engineer at Facebook, &lt;a href=&quot;http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/&quot;&gt;made a lengthy interview&lt;/a&gt; on the experience of using React and Flux in order to build probably the biggest React application ever written so far.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.&lt;/p&gt;
&lt;p&gt;Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/&quot;&gt;Read the full interview...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;adobes-brackets-project-tree&quot;&gt;&lt;/a&gt;Adobe&amp;#39;s Brackets Project Tree &lt;a class=&quot;hash-link&quot; href=&quot;#adobes-brackets-project-tree&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.kevindangoor.com/&quot;&gt;Kevin Dangoor&lt;/a&gt; is converting the project tree of &lt;a href=&quot;http://brackets.io/&quot;&gt;Adobe&amp;#39;s Bracket text editor&lt;/a&gt; to React and Flux. He wrote about his experience &lt;a href=&quot;http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/&quot;&gt;using Flux&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;center&gt;
&lt;a href=&quot;http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/&quot;&gt;&lt;img src=&quot;/react/img/blog/flux-diagram.png&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;
&lt;/center&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;async-requests-with-flux-revisited&quot;&gt;&lt;/a&gt;Async Requests with Flux Revisited &lt;a class=&quot;hash-link&quot; href=&quot;#async-requests-with-flux-revisited&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.code-experience.com/the-code-experience/&quot;&gt;Reto Schläpfer&lt;/a&gt; came back to a Flux project he hasn&amp;#39;t worked on for a month and &lt;a href=&quot;http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/&quot;&gt;saw many ways to improve the way he implemented Flux&lt;/a&gt;. He summarized his learnings in a blog post.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.&lt;/p&gt;
&lt;p&gt;Before I show some updated code snippets, let me explain why this is superior:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Asynchronously executed callbacks should not leak into Stores. The consequences of it are just to hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/&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;undo-redo-with-immutable-data-structures&quot;&gt;&lt;/a&gt;Undo-Redo with Immutable Data Structures &lt;a class=&quot;hash-link&quot; href=&quot;#undo-redo-with-immutable-data-structures&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/ameyakarve&quot;&gt;Ameya Karve&lt;/a&gt; explained how to use &lt;a href=&quot;https://github.com/swannodette/mori&quot;&gt;Mori&lt;/a&gt;, a library that provides immutable data structures, in order to &lt;a href=&quot;http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html&quot;&gt;implement undo-redo&lt;/a&gt;. This usually very challenging feature only takes a few lines of code with Flux!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;undo&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;redoStates&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;conj&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;redoStates&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&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;undoStates&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;undoStates&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;drop&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&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;undoStates&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;todosState&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&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;undoStates&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;canUndo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&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;undoStates&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;mi&quot;&gt;1&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;canRedo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Mori&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&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;undoStates&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;mi&quot;&gt;1&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;todos&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;JSON&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;parse&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;todosState&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;else&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;todos&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;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;emit&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;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;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;flux-in-practice&quot;&gt;&lt;/a&gt;Flux in practice &lt;a class=&quot;hash-link&quot; href=&quot;#flux-in-practice&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/garychambers108&quot;&gt;Gary Chambers&lt;/a&gt; wrote a &lt;a href=&quot;https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a&quot;&gt;guide to get started with Flux&lt;/a&gt;. This is a very practical introduction to Flux.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a&quot;&gt;Read the full guide...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;components-react-and-flux&quot;&gt;&lt;/a&gt;Components, React and Flux &lt;a class=&quot;hash-link&quot; href=&quot;#components-react-and-flux&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/dan_abramov&quot;&gt;Dan Abramov&lt;/a&gt; working at Stampsy made a talk about React and Flux. It&amp;#39;s a very good overview of the concepts at play.&lt;/p&gt;
&lt;iframe src=&quot;//slides.com/danabramov/components-react-flux-wip/embed&quot; width=&quot;650&quot; height=&quot;315&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;react-and-flux&quot;&gt;&lt;/a&gt;React and Flux &lt;a class=&quot;hash-link&quot; href=&quot;#react-and-flux&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/christianalfoni&quot;&gt;Christian Alfoni&lt;/a&gt; wrote an article where &lt;a href=&quot;http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html&quot;&gt;he compares Backbone, Angular and Flux&lt;/a&gt; on a simple example that&amp;#39;s representative of a real project he worked on.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.&lt;/p&gt;
&lt;p&gt;Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current &amp;quot;parent controller or models&amp;quot;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html&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;flux-step-by-step-approach&quot;&gt;&lt;/a&gt;Flux: Step by Step approach &lt;a class=&quot;hash-link&quot; href=&quot;#flux-step-by-step-approach&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/durdn&quot;&gt;Nicola Paolucci&lt;/a&gt; from Atlassian wrote a great guide to help your getting understand &lt;a href=&quot;http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/&quot;&gt;Flux step by step&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;center&gt;
&lt;a href=&quot;http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/&quot;&gt;&lt;img src=&quot;/react/img/blog/flux-chart.png&quot; width=&quot;400&quot; /&gt;&lt;/a&gt;
&lt;/center&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;delorean-back-to-the-future&quot;&gt;&lt;/a&gt;DeLorean: Back to the future! &lt;a class=&quot;hash-link&quot; href=&quot;#delorean-back-to-the-future&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/deloreanjs/delorean&quot;&gt;DeLorean&lt;/a&gt; is a tiny Flux pattern implementation developed by &lt;a href=&quot;https://github.com/f&quot;&gt;Fatih Kadir Akin&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;ul&gt;
&lt;li&gt;Unidirectional data flow, it makes your app logic simpler than MVC&lt;/li&gt;
&lt;li&gt;Automatically listens to data changes and keeps your data updated&lt;/li&gt;
&lt;li&gt;Makes data more consistent across your whole application&lt;/li&gt;
&lt;li&gt;It&amp;#39;s framework agnostic, completely. There&amp;#39;s no view framework dependency&lt;/li&gt;
&lt;li&gt;Very small, just 4K gzipped&lt;/li&gt;
&lt;li&gt;Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others&lt;/li&gt;
&lt;li&gt;Improve your UI/data consistency using rollbacks&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;facebooks-ios-infrastructure&quot;&gt;&lt;/a&gt;Facebook&amp;#39;s iOS Infrastructure &lt;a class=&quot;hash-link&quot; href=&quot;#facebooks-ios-infrastructure&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/XhXC4SKOGfQ&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweet&quot;&gt;&lt;/a&gt;Random Tweet &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweet&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)&lt;/p&gt;&amp;mdash; Ryan Florence (@ryanflorence) &lt;a href=&quot;https://twitter.com/ryanflorence/status/507309645372076034&quot;&gt;September 3, 2014&lt;/a&gt;&lt;/blockquote&gt;
</description>
<pubDate>2014-10-17T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/10/17/community-roundup-23.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/17/community-roundup-23.html</guid>
</item>
<item>
<title>React v0.12 RC</title>
<description>&lt;p&gt;We are finally ready to share the work we&amp;#39;ve been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we&amp;#39;re shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we&amp;#39;ve highlighted the interesting and breaking changes below.&lt;/p&gt;
&lt;p&gt;The release candidate is available for download:&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.12.0-rc1.js&quot;&gt;http://fb.me/react-0.12.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.12.0-rc1.min.js&quot;&gt;http://fb.me/react-0.12.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.12.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.12.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.12.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.12.0-rc1.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.12.0-rc1.js&quot;&gt;http://fb.me/JSXTransformer-0.12.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.12.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;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-elements&quot;&gt;&lt;/a&gt;React Elements &lt;a class=&quot;hash-link&quot; href=&quot;#react-elements&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The biggest conceptual change we made in v0.12 is the move to React Elements. &lt;a href=&quot;/react/blog/2014/10/14/introducting-react-elements.html&quot;&gt;We talked about this topic in depth earlier this week&lt;/a&gt;. If you haven&amp;#39;t already, you should read up on the exciting changes in there!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-changes&quot;&gt;&lt;/a&gt;JSX Changes &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-changes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Earlier this year we decided to write &lt;a href=&quot;http://facebook.github.io/jsx/&quot;&gt;a specification for JSX&lt;/a&gt;. This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-jsx-pragma-is-gone&quot;&gt;&lt;/a&gt;The &lt;code&gt;@jsx&lt;/code&gt; Pragma is Gone! &lt;a class=&quot;hash-link&quot; href=&quot;#the-jsx-pragma-is-gone&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We have wanted to do this since before we even open sourced React. No more &lt;code&gt;/** @jsx React.DOM */&lt;/code&gt;!. The React specific JSX transform assumes you have &lt;code&gt;React&lt;/code&gt; in scope (which had to be true before anyway).&lt;/p&gt;
&lt;p&gt;&lt;code&gt;JSXTransformer&lt;/code&gt; and &lt;code&gt;react-tools&lt;/code&gt; have both been updated to account for this.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-for-function-calls-is-no-longer-supported&quot;&gt;&lt;/a&gt;JSX for Function Calls is No Longer Supported &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-for-function-calls-is-no-longer-supported&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The React specific JSX transform no longer transforms to function calls. Instead we use &lt;code&gt;React.createElement&lt;/code&gt; and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the &lt;a href=&quot;/react/blog/2014/10/14/introducting-react-elements.html&quot;&gt;React Elements introduction&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-lower-case-convention&quot;&gt;&lt;/a&gt;JSX Lower-case Convention &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-lower-case-convention&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;component&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Is &lt;code&gt;component&lt;/code&gt; an existing HTML tag? What if it becomes one?&lt;/p&gt;
&lt;p&gt;To address this, we decided on a convention: &lt;strong&gt;All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.&lt;/p&gt;
&lt;p&gt;Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.&lt;/p&gt;
&lt;p&gt;In addition, the HTML tags are converted to strings instead of using &lt;code&gt;React.DOM&lt;/code&gt; directly. &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; becomes &lt;code&gt;React.createElement(&amp;#39;div&amp;#39;)&lt;/code&gt; instead of &lt;code&gt;React.DOM.div()&lt;/code&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-spread-attributes&quot;&gt;&lt;/a&gt;JSX Spread Attributes &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-spread-attributes&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Previously there wasn&amp;#39;t a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread &lt;code&gt;...&lt;/code&gt; operator.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;myProps&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;a&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;2&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;myProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This merges the properties of the object onto the props of &lt;code&gt;MyComponent&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81&quot;&gt;Read More About Spread Attributes&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;If you used to use plain function calls to pass arbitrary props objects...&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;return&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;myProps&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;You can now switch to using Spread Attributes instead:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;myProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-change-key-and-ref-removed-from-this.props&quot;&gt;&lt;/a&gt;Breaking Change: &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;ref&lt;/code&gt; Removed From &lt;code&gt;this.props&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-change-key-and-ref-removed-from-this.props&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The props &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;ref&lt;/code&gt; were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.&lt;/p&gt;
&lt;p&gt;These are concepts that React manages from outside the Component before it even gets created so it shouldn&amp;#39;t be part of the props.&lt;/p&gt;
&lt;p&gt;We made this distinction clearer by moving them off the props object and onto the &lt;code&gt;ReactElement&lt;/code&gt; itself. This means that you need to rename:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;someElement.props.key&lt;/code&gt; -&amp;gt; &lt;code&gt;someElement.key&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;You can no longer access &lt;code&gt;this.props.ref&lt;/code&gt; and &lt;code&gt;this.props.key&lt;/code&gt; from inside the Component instance itself. So you need to use a different name for those props.&lt;/p&gt;
&lt;p&gt;You do NOT need to change the way to define &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;ref&lt;/code&gt;, only if you need to read it. E.g. &lt;code&gt;&amp;lt;div key=&amp;quot;my-key&amp;quot; /&amp;gt;&lt;/code&gt; and &lt;code&gt;div({ key: &amp;#39;my-key&amp;#39; })&lt;/code&gt; still works.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;breaking-change-default-props-resolution&quot;&gt;&lt;/a&gt;Breaking Change: Default Props Resolution &lt;a class=&quot;hash-link&quot; href=&quot;#breaking-change-default-props-resolution&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This is a subtle difference but &lt;code&gt;defaultProps&lt;/code&gt; are now resolved at &lt;code&gt;ReactElement&lt;/code&gt; creation time instead of when it&amp;#39;s mounted. This is means that we can avoid allocating an extra object for the resolved props.&lt;/p&gt;
&lt;p&gt;You will primarily see this breaking if you&amp;#39;re also using &lt;code&gt;transferPropsTo&lt;/code&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;deprecated-transferpropsto&quot;&gt;&lt;/a&gt;Deprecated: transferPropsTo &lt;a class=&quot;hash-link&quot; href=&quot;#deprecated-transferpropsto&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;transferPropsTo&lt;/code&gt; is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can&amp;#39;t catch typos on props.&lt;/p&gt;
&lt;p&gt;Our suggested solution is to use the Spread Attributes.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{...&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Or, just if you&amp;#39;re not using JSX:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;return&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Although to avoid passing too many props down, you&amp;#39;ll probably want to use something like ES7 rest properties. &lt;a href=&quot;https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7&quot;&gt;Read more about upgrading from transferPropsTo&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;deprecated-returning-false-in-event-handlers&quot;&gt;&lt;/a&gt;Deprecated: Returning &lt;code&gt;false&lt;/code&gt; in Event Handlers &lt;a class=&quot;hash-link&quot; href=&quot;#deprecated-returning-false-in-event-handlers&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;It used to be possible to return &lt;code&gt;false&lt;/code&gt; from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use &lt;code&gt;event.preventDefault()&lt;/code&gt; instead.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;renamed-apis&quot;&gt;&lt;/a&gt;Renamed APIs &lt;a class=&quot;hash-link&quot; href=&quot;#renamed-apis&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As part of the &lt;a href=&quot;https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589&quot;&gt;new React terminology&lt;/a&gt; we aliased some existing APIs to use the new naming convention:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;React.renderComponent&lt;/code&gt; -&amp;gt; &lt;code&gt;React.render&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToString&lt;/code&gt; -&amp;gt; &lt;code&gt;React.renderToString&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.renderComponentToStaticMarkup&lt;/code&gt; -&amp;gt; &lt;code&gt;React.renderToStaticMarkup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.isValidComponent&lt;/code&gt; -&amp;gt; &lt;code&gt;React.isValidElement&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.PropTypes.component&lt;/code&gt; -&amp;gt; &lt;code&gt;React.PropTypes.element&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;React.PropTypes.renderable&lt;/code&gt; -&amp;gt; &lt;code&gt;React.PropTypes.node&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The older APIs will log a warning but work the same. They will be removed in v0.13.&lt;/p&gt;
</description>
<pubDate>2014-10-16T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html</guid>
</item>
<item>
<title>Introducing React Elements</title>
<description>&lt;p&gt;The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the &lt;code&gt;ReactElement&lt;/code&gt; type really FAST, &lt;a href=&quot;http://facebook.github.io/jest/&quot;&gt;jest unit testing&lt;/a&gt; easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!&lt;/p&gt;
&lt;p&gt;If you currently use JSX everywhere, you don&amp;#39;t really have to do anything to get these benefits! The updated transformer will do it for you.&lt;/p&gt;
&lt;p&gt;If you can&amp;#39;t or don&amp;#39;t want to use JSX, then please insert some hints for us. Add a &lt;code&gt;React.createFactory&lt;/code&gt; call around your imported class when you require it:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createFactory&lt;/span&gt;&lt;span class=&quot;p&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;MyComponent&amp;#39;&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;Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;ReactElement&lt;/code&gt; is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.&lt;/p&gt;
&lt;p&gt;Continue reading if you want all the nitty gritty details...&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;new-terminology&quot;&gt;&lt;/a&gt;New Terminology &lt;a class=&quot;hash-link&quot; href=&quot;#new-terminology&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term &lt;code&gt;ReactElement&lt;/code&gt; instead of &lt;em&gt;descriptor&lt;/em&gt;. Likewise, we use the term &lt;code&gt;ReactNode&lt;/code&gt; instead of &lt;em&gt;renderable&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589&quot;&gt;See the full React terminology guide.&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;creating-a-reactelement&quot;&gt;&lt;/a&gt;Creating a ReactElement &lt;a class=&quot;hash-link&quot; href=&quot;#creating-a-reactelement&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We now expose an external API for programmatically creating a &lt;code&gt;ReactElement&lt;/code&gt; object.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;reactElement&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;createElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The &lt;code&gt;type&lt;/code&gt; argument is either a string (HTML tag) or a class. It&amp;#39;s a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;div&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;createFactory&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;div&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;reactDivElement&lt;/span&gt; &lt;span class=&quot;o&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;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;deprecated-auto-generated-factories&quot;&gt;&lt;/a&gt;Deprecated: Auto-generated Factories &lt;a class=&quot;hash-link&quot; href=&quot;#deprecated-auto-generated-factories&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Imagine if &lt;code&gt;React.createClass&lt;/code&gt; was just a plain JavaScript class. If you call a class as a plain function you would call the component&amp;#39;s constructor to create a Component instance, not a &lt;code&gt;ReactElement&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;k&quot;&gt;new&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;c1&quot;&gt;// Component, not ReactElement&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;React 0.11 gave you a factory function for free when you called &lt;code&gt;React.createClass&lt;/code&gt;. This wrapped your internal class and then returned a &lt;code&gt;ReactElement&lt;/code&gt; factory function for you.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createFactory&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&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;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;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;In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we&amp;#39;re &lt;a href=&quot;https://gist.github.com/sebmarkbage/d7bce729f38730399d28&quot;&gt;deprecating the auto-generated factory&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This is the biggest change to 0.12. Don&amp;#39;t worry though. This functionality continues to work the same for this release, it just warns you if you&amp;#39;re using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;upgrading-to-0.12&quot;&gt;&lt;/a&gt;Upgrading to 0.12 &lt;a class=&quot;hash-link&quot; href=&quot;#upgrading-to-0.12&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-jsx&quot;&gt;&lt;/a&gt;React With JSX &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you use the React specific &lt;a href=&quot;http://facebook.github.io/jsx/&quot;&gt;JSX&lt;/a&gt; transform, the upgrade path is simple. Just make sure you have React in scope.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// If you use node/browserify modules make sure&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// that you require React into scope.&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&amp;#39;&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;React&amp;#39;s JSX will create the &lt;code&gt;ReactElement&lt;/code&gt; for you. You can continue to use JSX with regular classes:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(...);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyOtherComponent&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;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;value&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;em&gt;NOTE: React&amp;#39;s JSX will not call arbitrary functions in future releases. This restriction is introduced so that it&amp;#39;s easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use &lt;a href=&quot;http://facebook.github.io/jsx/&quot;&gt;the JSX spec&lt;/a&gt; with a different transpiler for custom purposes.&lt;/em&gt;&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-without-jsx&quot;&gt;&lt;/a&gt;React Without JSX &lt;a class=&quot;hash-link&quot; href=&quot;#react-without-jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you don&amp;#39;t use JSX and just call components as functions, you will need to explicitly create a factory before calling it:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponentClass&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;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;createFactory&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;MyComponentClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// New step&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyOtherComponent&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;nx&quot;&gt;MyComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;value&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;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;If you&amp;#39;re using a module system, the recommended solution is to export the class and create the factory on the requiring side.&lt;/p&gt;
&lt;p&gt;Your class creation is done just like before:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// MyComponent.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&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;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The other side uses &lt;code&gt;React.createFactory&lt;/code&gt; after &lt;code&gt;require&lt;/code&gt;ing the component class:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// MyOtherComponent.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&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// All you have to do to upgrade is wrap your requires like this:&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;createFactory&lt;/span&gt;&lt;span class=&quot;p&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;MyComponent&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;MyOtherComponent&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;nx&quot;&gt;MyComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;prop&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;value&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;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyOtherComponent&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;You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyDOMComponent&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;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;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&amp;#39;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// still ok&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;We realize that this is noisy. At least it&amp;#39;s on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get &lt;a href=&quot;https://gist.github.com/sebmarkbage/d7bce729f38730399d28&quot;&gt;the other benefits&lt;/a&gt; that this model unlocks.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;anti-pattern-exporting-factories&quot;&gt;&lt;/a&gt;Anti-Pattern: Exporting Factories &lt;a class=&quot;hash-link&quot; href=&quot;#anti-pattern-exporting-factories&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Anti-pattern - Please, don&amp;#39;t use&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;function&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;spec&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createFactory&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;spec&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;This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized &lt;code&gt;ReactElement&lt;/code&gt; creation, etc.&lt;/p&gt;
&lt;p&gt;It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn&amp;#39;t reason about.&lt;/p&gt;
&lt;p&gt;To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating &lt;code&gt;ReactElement&lt;/code&gt;s.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;third-party-languages&quot;&gt;&lt;/a&gt;Third-party Languages &lt;a class=&quot;hash-link&quot; href=&quot;#third-party-languages&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The signature of a &lt;code&gt;ReactElement&lt;/code&gt; is something like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&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;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;etc&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;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;boolean&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;|&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;number&lt;/span&gt; &lt;span class=&quot;o&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;nx&quot;&gt;ref&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;string&lt;/span&gt; &lt;span class=&quot;o&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Languages with static typing that don&amp;#39;t need validation (e.g. &lt;a href=&quot;https://github.com/swannodette/om&quot;&gt;Om in ClojureScript&lt;/a&gt;), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;your-thoughts-and-ideas&quot;&gt;&lt;/a&gt;Your Thoughts and Ideas &lt;a class=&quot;hash-link&quot; href=&quot;#your-thoughts-and-ideas&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We&amp;#39;d love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// MyOtherComponent.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&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;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;MyComponent&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;MyOtherComponent&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;nx&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&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;nx&quot;&gt;props&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;prop&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;value&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;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyOtherComponent&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;This moves the noise down into the render method though. It also doesn&amp;#39;t provide a hook for dynamic validation/type checking so you&amp;#39;ll need some other way to verify that it&amp;#39;s safe.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;NOTE: This won&amp;#39;t work in this version of React because it&amp;#39;s conflicting with other legacy APIs that we&amp;#39;re deprecating. (We temporarily add a &lt;code&gt;element._isReactElement = true&lt;/code&gt; marker on the object.)&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-next-step-es6-classes&quot;&gt;&lt;/a&gt;The Next Step: ES6 Classes &lt;a class=&quot;hash-link&quot; href=&quot;#the-next-step-es6-classes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;After 0.12 we&amp;#39;ll begin work on moving to ES6 classes. We will still support &lt;code&gt;React.createClass&lt;/code&gt; as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kr&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;class&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;render&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;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;This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.&lt;/p&gt;
</description>
<pubDate>2014-10-14T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html</guid>
</item>
<item>
<title>Testing Flux Applications</title>
<description>&lt;p&gt;&lt;a href=&quot;http://facebook.github.io/flux/&quot;&gt;Flux&lt;/a&gt; is the application architecture that Facebook uses to build web applications with &lt;a href=&quot;http://facebook.github.io/react/&quot;&gt;React&lt;/a&gt;. It&amp;#39;s based on a unidirectional data flow. In previous blog posts and documentation articles, we&amp;#39;ve shown the &lt;a href=&quot;http://facebook.github.io/flux/docs/overview.html&quot;&gt;basic structure and data flow&lt;/a&gt;, more closely examined the &lt;a href=&quot;http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html&quot;&gt;dispatcher and action creators&lt;/a&gt;, and shown how to put it all together with a &lt;a href=&quot;http://facebook.github.io/flux/docs/todo-list.html&quot;&gt;tutorial&lt;/a&gt;. Now let&amp;#39;s look at how to do formal unit testing of Flux applications with &lt;a href=&quot;http://facebook.github.io/jest/&quot;&gt;Jest&lt;/a&gt;, Facebook&amp;#39;s auto-mocking testing framework.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;testing-with-jest&quot;&gt;&lt;/a&gt;Testing with Jest &lt;a class=&quot;hash-link&quot; href=&quot;#testing-with-jest&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;For a unit test to operate on a truly isolated &lt;em&gt;unit&lt;/em&gt; of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we&amp;#39;ll return to our &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-todomvc&quot;&gt;example TodoMVC application&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The first steps toward working with Jest are as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Get the module dependencies for the application installed by running &lt;code&gt;npm install&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Create a directory &lt;code&gt;__tests__/&lt;/code&gt; with a test file, in this case TodoStore-test.js&lt;/li&gt;
&lt;li&gt;Run &lt;code&gt;npm install jest-cli —save-dev&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Add the following to your package.json&lt;/li&gt;
&lt;/ol&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;s2&quot;&gt;&amp;quot;scripts&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;s2&quot;&gt;&amp;quot;test&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;jest&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now you&amp;#39;re ready to run your tests from the command line with &lt;code&gt;npm test&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest&amp;#39;s &lt;code&gt;dontMock()&lt;/code&gt; method.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;jest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;dontMock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;TodoStore&amp;#39;&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;This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;testing-stores&quot;&gt;&lt;/a&gt;Testing Stores &lt;a class=&quot;hash-link&quot; href=&quot;#testing-stores&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it&amp;#39;s not entirely obvious how to test them.&lt;/p&gt;
&lt;p&gt;By design, stores can&amp;#39;t be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.&lt;/p&gt;
&lt;p&gt;We therefore need to simulate the Flux data flow with this &lt;em&gt;one weird trick&lt;/em&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mockRegister&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyDispatcher&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;register&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;mockRegisterInfo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mockRegister&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mock&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;callsToRegister&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;mockRegisterInfo&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;calls&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;firstCall&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;callsToRegister&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;firstArgument&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;firstCall&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;firstArgument&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 now have the store&amp;#39;s registered callback, the sole mechanism by which data can enter the store.&lt;/p&gt;
&lt;p&gt;For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let&amp;#39;s look at each part of it a bit more closely. We start out by looking at the &lt;code&gt;register()&lt;/code&gt; method of our application&amp;#39;s dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the &lt;code&gt;register()&lt;/code&gt; method just as we would normally refer to that method in our production code. But we can get additional information about that method with the &lt;code&gt;mock&lt;/code&gt; &lt;em&gt;property&lt;/em&gt; of that method. We don&amp;#39;t often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to &lt;code&gt;register()&lt;/code&gt; is available with the &lt;code&gt;calls&lt;/code&gt; property of &lt;code&gt;mock&lt;/code&gt;, and each of these calls has a list of the arguments that were used in each method call.&lt;/p&gt;
&lt;p&gt;So in this code, we are really saying, &amp;quot;Give me a reference to the first argument of the first call to MyDispatcher&amp;#39;s &lt;code&gt;register()&lt;/code&gt; method.&amp;quot; That first argument is the store&amp;#39;s callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyDispatcher&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;register&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;calls&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;mi&quot;&gt;0&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 can invoke that callback whenever we like, independent of our application&amp;#39;s dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we&amp;#39;ll create directly in our test.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;payload&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;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;VIEW_ACTION&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;action&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;actionType&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TODO_CREATE&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&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;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;payload&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;all&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&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;keys&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&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;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&amp;#39;&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;putting-it-all-together&quot;&gt;&lt;/a&gt;Putting it All Together &lt;a class=&quot;hash-link&quot; href=&quot;#putting-it-all-together&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let&amp;#39;s look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store&amp;#39;s registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;jest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;dontMock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;../TodoStore&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;jest&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;dontMock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;react/lib/merge&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;describe&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;TodoStore&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&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;../../constants/TodoConstants&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// mock actions inside dispatch payloads&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;actionTodoCreate&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;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;VIEW_ACTION&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;action&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;actionType&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TODO_CREATE&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;actionTodoDestroy&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;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;VIEW_ACTION&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;action&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;actionType&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TODO_DESTROY&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;replace me in test&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;AppDispatcher&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;TodoStore&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;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;beforeEach&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;AppDispatcher&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;../../dispatcher/AppDispatcher&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;TodoStore&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;../TodoStore&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;AppDispatcher&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;register&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;calls&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;mi&quot;&gt;0&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;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;registers a callback with the dispatcher&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;AppDispatcher&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;register&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mock&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;calls&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&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;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;initializes with no to-do items&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toEqual&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;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;creates a to-do item&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;actionTodoCreate&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;all&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&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;keys&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&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;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toEqual&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&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;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;destroys a to-do item&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;actionTodoCreate&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;all&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&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;keys&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;Object&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;length&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;1&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;actionTodoDestroy&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;action&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;keys&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;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;actionTodoDestroy&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;keys&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;toBeUndefined&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;You can take a look at all this code in the &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js&quot;&gt;TodoStore&amp;#39;s tests on GitHub&lt;/a&gt; as well. &lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;mocking-data-derived-from-other-stores&quot;&gt;&lt;/a&gt;Mocking Data Derived from Other Stores &lt;a class=&quot;hash-link&quot; href=&quot;#mocking-data-derived-from-other-stores&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we&amp;#39;ll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyOtherStore&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;../MyOtherStore&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;MyOtherStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mockReturnValue&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;123&amp;#39;&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;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;123&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&amp;#39;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;456&amp;#39;&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;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;456&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;bar&amp;#39;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store&amp;#39;s registered callback.&lt;/p&gt;
&lt;p&gt;A brief example of this technique is up on GitHub within the Flux Chat example&amp;#39;s &lt;a href=&quot;https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js&quot;&gt;UnreadThreadStore-test.js&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;For more information about the &lt;code&gt;mock&lt;/code&gt; property of mocked methods or Jest&amp;#39;s ability to provide custom mock values, see Jest&amp;#39;s documentation on &lt;a href=&quot;http://facebook.github.io/jest/docs/mock-functions.html&quot;&gt;mock functions&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;moving-logic-from-react-to-stores&quot;&gt;&lt;/a&gt;Moving Logic from React to Stores &lt;a class=&quot;hash-link&quot; href=&quot;#moving-logic-from-react-to-stores&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application&amp;#39;s behavior, and when application logic slips into our view layer, this becomes more difficult.&lt;/p&gt;
&lt;p&gt;For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the &amp;quot;Mark all as complete&amp;quot; checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection&amp;#39;s &lt;code&gt;render()&lt;/code&gt; method:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;allTodos&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;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;allTodos&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;allChecked&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;for&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;id&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;allTodos&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;allTodos&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;].&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;complete&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;allChecked&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;k&quot;&gt;break&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;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;section&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;toggle-all&amp;quot;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;checked&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;allChecked&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;checked&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/section&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can&amp;#39;t be described in our spec-style TodoStore test. Let&amp;#39;s take that logic and move it to the store. First, we&amp;#39;ll create a public method on the store that will encapsulate that logic:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&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;for&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;id&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;_todos&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;_todos&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;].&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;complete&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now we have the application logic where it belongs, and we can write the following test:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;it&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;determines whether all to-do items are complete&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&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;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;i&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;3&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;i&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;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;mockTodoCreate&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;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;p&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;all&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;();&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;for&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;in&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;all&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;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;VIEW_ACTION&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;action&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;actionType&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TODO_COMPLETE&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&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;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&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;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;callback&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;source&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;VIEW_ACTION&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;action&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;actionType&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoConstants&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TODO_UNDO_COMPLETE&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&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;expect&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()).&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;toBe&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Finally, we revise our view layer. We&amp;#39;ll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;getTodoState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;allTodos&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getAll&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(),&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoStore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TodoApp&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;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt;/**&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt; * @return {object}&lt;/span&gt;
&lt;span class=&quot;cm&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;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;MainSection&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;allTodos&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;allTodos&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;areAllComplete&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt;/**&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt; * Event handler for &amp;#39;change&amp;#39; events coming from the TodoStore&lt;/span&gt;
&lt;span class=&quot;cm&quot;&gt; */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;_onChange&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getTodoState&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;And then we&amp;#39;ll utilize that property for the rendering of the checkbox.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;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;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;section&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;main&amp;quot;&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;toggle-all&amp;quot;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;checkbox&amp;quot;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;checked&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;areAllComplete&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;checked&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;...&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/section&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;To learn how to test React components themselves, check out the &lt;a href=&quot;http://facebook.github.io/jest/docs/tutorial-react.html&quot;&gt;Jest tutorial for React&lt;/a&gt; and the &lt;a href=&quot;http://facebook.github.io/react/docs/test-utils.html&quot;&gt;ReactTestUtils documentation&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;further-reading&quot;&gt;&lt;/a&gt;Further Reading &lt;a class=&quot;hash-link&quot; href=&quot;#further-reading&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://martinfowler.com/articles/mocksArentStubs.html&quot;&gt;Mocks Aren&amp;#39;t Stubs&lt;/a&gt; by Martin Fowler&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://facebook.github.io/jest/docs/api.html&quot;&gt;Jest API Reference&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-09-24T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/09/24/testing-flux-applications.html</guid>
</item>
<item>
<title>React v0.11.2</title>
<description>&lt;p&gt;Today we&amp;#39;re releasing React v0.11.2 to add a few small features.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re adding support for two more DOM elements, &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt;, as well as the associated attributes needed to use these elements: &lt;code&gt;open&lt;/code&gt;, &lt;code&gt;media&lt;/code&gt;, and &lt;code&gt;sizes&lt;/code&gt;. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we&amp;#39;re making them available to everybody.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing &lt;code&gt;React.createDescriptor&lt;/code&gt; with &lt;code&gt;React.createElement&lt;/code&gt;. &lt;code&gt;createDescriptor&lt;/code&gt; will continue to work with a warning and will be gone in v0.12. Chances are that this won&amp;#39;t affect anybody.&lt;/p&gt;
&lt;p&gt;And lastly, on the heels of announcing Flow at &lt;a href=&quot;http://atscaleconference.com/&quot;&gt;@Scale&lt;/a&gt; yesterday, we&amp;#39;re adding the ability to strip TypeScript-like type annotations as part of the &lt;code&gt;jsx&lt;/code&gt; transform. To use, simply use the &lt;code&gt;--strip-types&lt;/code&gt; flag on the command line, or set &lt;code&gt;stripTypes&lt;/code&gt; in the &lt;code&gt;options&lt;/code&gt; object when calling the API. We&amp;#39;ll be talking about Flow more in the coming months. But for now, it&amp;#39;s helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.&lt;/p&gt;
&lt;p&gt;The release is available for download from the CDN:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;React&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-0.11.2.js&quot;&gt;http://fb.me/react-0.11.2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.11.2.min.js&quot;&gt;http://fb.me/react-0.11.2.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;React with Add-Ons&lt;/strong&gt;&lt;br&gt;
Dev build with warnings: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.2.js&quot;&gt;http://fb.me/react-with-addons-0.11.2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.11.2.min.js&quot;&gt;http://fb.me/react-with-addons-0.11.2.min.js&lt;/a&gt;&lt;br&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;In-Browser JSX transformer&lt;/strong&gt;&lt;br&gt;
&lt;a href=&quot;http://fb.me/JSXTransformer-0.11.2.js&quot;&gt;http://fb.me/JSXTransformer-0.11.2.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.11.2&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;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;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;Added support for &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt; element and associated &lt;code&gt;open&lt;/code&gt; attribute&lt;/li&gt;
&lt;li&gt;Added support for &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; element and associated &lt;code&gt;media&lt;/code&gt; and &lt;code&gt;sizes&lt;/code&gt; attributes&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;React.createElement&lt;/code&gt; API in preparation for React v0.12
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;React.createDescriptor&lt;/code&gt; has been deprecated as a result&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx&quot;&gt;&lt;/a&gt;JSX &lt;a class=&quot;hash-link&quot; href=&quot;#jsx&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; is now parsed into &lt;code&gt;React.DOM.picture&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;Update &lt;code&gt;esprima&lt;/code&gt; and &lt;code&gt;jstransform&lt;/code&gt; for correctness fixes&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;jsx&lt;/code&gt; executable now exposes a &lt;code&gt;--strip-types&lt;/code&gt; flag which can be used to remove TypeScript-like type annotations
&lt;ul&gt;
&lt;li&gt;This option is also exposed to &lt;code&gt;require(&amp;#39;react-tools&amp;#39;).transform&lt;/code&gt; as &lt;code&gt;stripTypes&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-09-16T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/09/16/react-v0.11.2.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/09/16/react-v0.11.2.html</guid>
</item>
<item>
<title>Community Round-up #22</title>
<description>&lt;p&gt;This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!&lt;/p&gt;
&lt;table&gt;&lt;tr&gt;&lt;td&gt;
&lt;blockquote width=&quot;300&quot; class=&quot;twitter-tweet&quot; data-cards=&quot;hidden&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Our friends at &lt;a href=&quot;https://twitter.com/Yahoo&quot;&gt;@yahoo&lt;/a&gt; talk about migrating Yahoo! Mail from YUI to ReactJS at the next &lt;a href=&quot;https://twitter.com/hashtag/ReactJS?src=hash&quot;&gt;#ReactJS&lt;/a&gt; meetup! &lt;a href=&quot;http://t.co/Cu2AaE0sVE&quot;&gt;http://t.co/Cu2AaE0sVE&lt;/a&gt;&lt;/p&gt;&amp;mdash; Facebook Open Source (@fbOpenSource) &lt;a href=&quot;https://twitter.com/fbOpenSource/status/510258065900572672&quot;&gt;September 12, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;td valign=&quot;top&quot;&gt;
&lt;blockquote width=&quot;300&quot; class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;I guess &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; is getting into Firefox :-) Thanks &lt;a href=&quot;https://twitter.com/n1k0&quot;&gt;@n1k0&lt;/a&gt; ! &lt;a href=&quot;https://t.co/kipfUS0hu4&quot;&gt;https://t.co/kipfUS0hu4&lt;/a&gt;&lt;/p&gt;&amp;mdash; David Bruant (@DavidBruant) &lt;a href=&quot;https://twitter.com/DavidBruant/status/484956929933213696&quot;&gt;July 4, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
&lt;blockquote width=&quot;300&quot; class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;.&lt;a href=&quot;https://twitter.com/AirbnbNerds&quot;&gt;@AirbnbNerds&lt;/a&gt; just launched our first user-facing React.js feature to production! We love it so far. &lt;a href=&quot;https://t.co/KtyudemcIW&quot;&gt;https://t.co/KtyudemcIW&lt;/a&gt; /&lt;a href=&quot;https://twitter.com/floydophone&quot;&gt;@floydophone&lt;/a&gt;&lt;/p&gt;&amp;mdash; spikebrehm (@spikebrehm) &lt;a href=&quot;https://twitter.com/spikebrehm/statuses/491645223643013121&quot;&gt;July 22, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;td&gt;
&lt;blockquote width=&quot;300&quot; class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;We shipped reddit&amp;#39;s first production &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; code last week, our checkout process.&amp;#10;&amp;#10;&lt;a href=&quot;https://t.co/KUInwsCmAF&quot;&gt;https://t.co/KUInwsCmAF&lt;/a&gt;&lt;/p&gt;&amp;mdash; Brian Holt (@holtbt) &lt;a href=&quot;https://twitter.com/holtbt/statuses/493852312604254208&quot;&gt;July 28, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reacts-architecture&quot;&gt;&lt;/a&gt;React&amp;#39;s Architecture &lt;a class=&quot;hash-link&quot; href=&quot;#reacts-architecture&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://blog.vjeux.com/&quot;&gt;Vjeux&lt;/a&gt;, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the &lt;a href=&quot;https://speakerdeck.com/vjeux/oscon-react-architecture&quot;&gt;annotated slides&lt;/a&gt; or &lt;a href=&quot;http://thenewstack.io/author/chrisdawson/&quot;&gt;Chris Dawson&lt;/a&gt;&amp;#39;s notes titled &lt;a href=&quot;http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/&quot;&gt;JavaScript’s History and How it Led To React&lt;/a&gt;.&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/eCf5CquV_Bw&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;v8-optimizations&quot;&gt;&lt;/a&gt;v8 optimizations &lt;a class=&quot;hash-link&quot; href=&quot;#v8-optimizations&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Jakob Kummerow landed &lt;a href=&quot;http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18&quot;&gt;two optimizations to V8&lt;/a&gt; specifically targeted at optimizing React. That&amp;#39;s really exciting to see browser vendors helping out on performance!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reusable-components-by-khan-academy&quot;&gt;&lt;/a&gt;Reusable Components by Khan Academy &lt;a class=&quot;hash-link&quot; href=&quot;#reusable-components-by-khan-academy&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.khanacademy.org/&quot;&gt;Khan Academy&lt;/a&gt; released &lt;a href=&quot;http://khan.github.io/react-components/&quot;&gt;many high quality standalone components&lt;/a&gt; they are using. This is a good opportunity to see what React code used in production look like.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;TeX&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-components/js/tex.jsx&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;TeX&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;nabla&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cdot&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;E&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;pi&lt;/span&gt; &lt;span class=&quot;err&quot;&gt;\&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;rho&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/TeX&amp;gt;, domNode);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;translated&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;$_&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Motoko&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;last&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;Kusanagi&amp;quot;&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;o&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;first&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;s&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;last&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;s&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;/$_&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react--browserify--gulp&quot;&gt;&lt;/a&gt;React + Browserify + Gulp &lt;a class=&quot;hash-link&quot; href=&quot;#react--browserify--gulp&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://truongtx.me/&quot;&gt;Trường&lt;/a&gt; wrote a little guide to help your &lt;a href=&quot;http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/&quot;&gt;getting started using React, Browserify and Gulp&lt;/a&gt;.&lt;/p&gt;
&lt;figure&gt;&lt;a href=&quot;http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-browserify-gulp.jpg&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-style&quot;&gt;&lt;/a&gt;React Style &lt;a class=&quot;hash-link&quot; href=&quot;#react-style&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: &lt;a href=&quot;https://github.com/SanderSpies/react-style&quot;&gt;IntegratedCSS&lt;/a&gt;. It seems weird at first but this is the direction where React is heading.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Button&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;normalStyle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;backgroundColor&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;vars&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;orange&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;activeStyle&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;ReactStyle&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;active&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;yellow&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;padding&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;10px&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;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;styles&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;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;normalStyle&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;activeStyle&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;I&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;#39;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;m&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;styled&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;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;virtual-dom-in-elm&quot;&gt;&lt;/a&gt;Virtual DOM in Elm &lt;a class=&quot;hash-link&quot; href=&quot;#virtual-dom-in-elm&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://evan.czaplicki.us&quot;&gt;Evan Czaplicki&lt;/a&gt; explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://elm-lang.org/blog/Blazing-Fast-Html.elm&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;components-tutorial&quot;&gt;&lt;/a&gt;Components Tutorial &lt;a class=&quot;hash-link&quot; href=&quot;#components-tutorial&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you are getting started with React, &lt;a href=&quot;http://www.joemaddalone.com/&quot;&gt;Joe Maddalone&lt;/a&gt; made a good tutorial on how to build your first component.&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;200&quot; src=&quot;//www.youtube.com/embed/rFvZydtmsxM&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;saving-time-amp-staying-sane&quot;&gt;&lt;/a&gt;Saving time &amp;amp; staying sane? &lt;a class=&quot;hash-link&quot; href=&quot;#saving-time-amp-staying-sane&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When &lt;a href=&quot;http://http://kentwilliam.com/&quot;&gt;Kent William Innholt&lt;/a&gt; who works at &lt;a href=&quot;http://mpath.com/&quot;&gt;M&amp;gt;Path&lt;/a&gt; summed up his experience using React in an &lt;a href=&quot;http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js&quot;&gt;article&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;We&amp;#39;re building an ambitious new web app, where the UI complexity represents most of the app&amp;#39;s complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Big win&lt;/strong&gt;: Tighter coupling of markup and behavior&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Jury&amp;#39;s still out&lt;/strong&gt;: CSS lives outside React.js&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Big win&lt;/strong&gt;: Cascading updates and functional thinking&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Jury&amp;#39;s still out&lt;/strong&gt;: Verbose propagation&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href=&quot;http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js&quot;&gt;Read the article...&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;weather&quot;&gt;&lt;/a&gt;Weather &lt;a class=&quot;hash-link&quot; href=&quot;#weather&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To finish this round-up, Andrew Gleave made a page that displays the &lt;a href=&quot;https://github.com/andrewgleave/react-weather&quot;&gt;Weather&lt;/a&gt;. It&amp;#39;s great to see that React is also used for small prototypes.&lt;/p&gt;
&lt;figure&gt;&lt;a href=&quot;https://github.com/andrewgleave/react-weather&quot;&gt;&lt;img src=&quot;/react/img/blog/weather.png&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
</description>
<pubDate>2014-09-12T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/09/12/community-round-up-22.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/09/12/community-round-up-22.html</guid>
</item>
<item>
<title>Introducing the JSX Specification</title>
<description>&lt;p&gt;At Facebook we&amp;#39;ve been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We&amp;#39;ve also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.&lt;/p&gt;
&lt;p&gt;In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we&amp;#39;re now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It&amp;#39;s completely stand-alone from React itself.&lt;/p&gt;
&lt;p&gt;Read the spec now at &lt;a href=&quot;http://facebook.github.io/jsx/&quot;&gt;http://facebook.github.io/jsx/&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This is not a proposal to be standardized in ECMAScript. It&amp;#39;s just a reference document that transpiler writers and syntax highlighters can agree on. It&amp;#39;s currently in a draft stage and will probably continue to be a living document.&lt;/p&gt;
&lt;p&gt;Feel free to &lt;a href=&quot;https://github.com/facebook/jsx/issues/new&quot;&gt;open an Issue&lt;/a&gt; or Pull Request if you find something wrong.&lt;/p&gt;
</description>
<pubDate>2014-09-03T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/09/03/introducing-the-jsx-specification.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/09/03/introducing-the-jsx-specification.html</guid>
</item>
<item>
<title>Community Round-up #21</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-router&quot;&gt;&lt;/a&gt;React Router &lt;a class=&quot;hash-link&quot; href=&quot;#react-router&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://ryanflorence.com/&quot;&gt;Ryan Florence&lt;/a&gt; and &lt;a href=&quot;http://twitter.com/mjackson&quot;&gt;Michael Jackson&lt;/a&gt; ported Ember&amp;#39;s router to React in a project called &lt;a href=&quot;https://github.com/rackt/react-router&quot;&gt;React Router&lt;/a&gt;. This is a very good example of both communities working together to make the web better!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;((&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Routes&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;about&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;About&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;users&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Users&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;user&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;path&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;/user/:userId&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;User&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Route&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Route&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Routes&amp;gt;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;),&lt;/span&gt; &lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;body&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;going-big-with-react&quot;&gt;&lt;/a&gt;Going Big with React &lt;a class=&quot;hash-link&quot; href=&quot;#going-big-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Areeb Malik, from Facebook, talks about his experience using React. &amp;quot;On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we&amp;#39;ll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale&amp;quot;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://skillsmatter.com/skillscasts/5429-going-big-with-react&quot;&gt;&lt;img src=&quot;/react/img/blog/skills-matter.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;!--
&lt;iframe allowfullscreen=&quot;&quot; data-progress=&quot;true&quot; frameborder=&quot;0&quot; height=&quot;390&quot; id=&quot;vimeo-player&quot; mozallowfullscreen=&quot;&quot; src=&quot;//player.vimeo.com/video/100245392?api=1&amp;amp;title=0&quot; webkitallowfullscreen=&quot;&quot; width=&quot;640&quot;&gt;&lt;/iframe&gt;
--&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;what-is-react&quot;&gt;&lt;/a&gt;What is React? &lt;a class=&quot;hash-link&quot; href=&quot;#what-is-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://www.funnyant.com/author/admin/&quot;&gt;Craig McKeachie&lt;/a&gt; author of &lt;a href=&quot;http://www.funnyant.com/javascript-framework-guide/&quot;&gt;Javascript Framework Guide&lt;/a&gt; wrote an excellent news named &lt;a href=&quot;http://www.funnyant.com/reactjs-what-is-it/&quot;&gt;&amp;quot;What is React.js? Another Template Library?&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Is React a template library?&lt;/li&gt;
&lt;li&gt;Is React similar to Web Components?&lt;/li&gt;
&lt;li&gt;Are the Virtual DOM and Shadow DOM the same?&lt;/li&gt;
&lt;li&gt;Can React be used with other JavaScript MVC frameworks?&lt;/li&gt;
&lt;li&gt;Who uses React?&lt;/li&gt;
&lt;li&gt;Is React a premature optimization if you aren’t Facebook or Instagram?&lt;/li&gt;
&lt;li&gt;Can I work with designers?&lt;/li&gt;
&lt;li&gt;Will React hurt my search engine optimizations (SEO)?&lt;/li&gt;
&lt;li&gt;Is React a framework for building applications or a library with one feature?&lt;/li&gt;
&lt;li&gt;Are components a better way to build an application?&lt;/li&gt;
&lt;li&gt;Can I build something complex with React?&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;referencing-dynamic-children&quot;&gt;&lt;/a&gt;Referencing Dynamic Children &lt;a class=&quot;hash-link&quot; href=&quot;#referencing-dynamic-children&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While Matt Zabriskie was working on &lt;a href=&quot;https://www.npmjs.org/package/react-tabs&quot;&gt;react-tabs&lt;/a&gt; he discovered how to use React.Children.map and React.addons.cloneWithProps in order to &lt;a href=&quot;http://www.mattzabriskie.com/blog/react-referencing-dynamic-children&quot;&gt;reference dynamic children&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;addons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneWithProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;ref&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;child-&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;index&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-with-sweet.js-using-readtables&quot;&gt;&lt;/a&gt;JSX with Sweet.js using Readtables &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-with-sweet.js-using-readtables&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to &lt;a href=&quot;http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables&quot;&gt;compile JSX with Sweet.js using Readtables&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables&quot;&gt;&lt;img src=&quot;/react/img/blog/sweet-jsx.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;first-look-getting-started-with-react&quot;&gt;&lt;/a&gt;First Look: Getting Started with React &lt;a class=&quot;hash-link&quot; href=&quot;#first-look-getting-started-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://modernweb.com/authors/kirill-buga/&quot;&gt;Kirill Buga&lt;/a&gt; wrote an article on Modern Web explaining how &lt;a href=&quot;http://modernweb.com/2014/07/23/getting-started-reactjs/&quot;&gt;React is different from traditional MVC&lt;/a&gt; used by most JavaScript applications&lt;/p&gt;
&lt;figure&gt;&lt;a href=&quot;http://modernweb.com/2014/07/23/getting-started-reactjs&quot;&gt;&lt;img src=&quot;/react/img/blog/first-look.png&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-draggable&quot;&gt;&lt;/a&gt;React Draggable &lt;a class=&quot;hash-link&quot; href=&quot;#react-draggable&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/mzabriskie&quot;&gt;Matt Zabriskie&lt;/a&gt; released a &lt;a href=&quot;https://github.com/mzabriskie/react-draggable&quot;&gt;project&lt;/a&gt; to make your react components draggable.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://mzabriskie.github.io/react-draggable/example/&quot;&gt;&lt;img src=&quot;/react/img/blog/react-draggable.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;html-parser2-react&quot;&gt;&lt;/a&gt;HTML Parser2 React &lt;a class=&quot;hash-link&quot; href=&quot;#html-parser2-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://browniefed.github.io/&quot;&gt;Jason Brown&lt;/a&gt; adapted htmlparser2 to React: &lt;a href=&quot;https://www.npmjs.org/package/htmlparser2-react&quot;&gt;htmlparser2-react&lt;/a&gt;. That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;div data-id=&amp;quot;1&amp;quot; class=&amp;quot;hey this is a class&amp;quot; &amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;style=&amp;quot;width:100%;height: 100%;&amp;quot;&amp;gt;&amp;lt;article id=&amp;quot;this-article&amp;quot;&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;p&amp;gt;hey this is a paragraph&amp;lt;/p&amp;gt;&amp;lt;div&amp;gt;&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;2&amp;lt;/li&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;li&amp;gt;3&amp;lt;/li&amp;gt;&amp;lt;/ul&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/article&amp;gt;&amp;lt;/div&amp;gt;&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;parsedComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;reactParser&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;html&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;building-uis-with-react&quot;&gt;&lt;/a&gt;Building UIs with React &lt;a class=&quot;hash-link&quot; href=&quot;#building-uis-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you haven&amp;#39;t yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/lAn7GVoGlKU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;random-tweets&quot;&gt;&lt;/a&gt;Random Tweets &lt;a class=&quot;hash-link&quot; href=&quot;#random-tweets&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;We shipped reddit&amp;#39;s first production &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; code last week, our checkout process.&amp;#10;&amp;#10;&lt;a href=&quot;https://t.co/KUInwsCmAF&quot;&gt;https://t.co/KUInwsCmAF&lt;/a&gt;&lt;/p&gt;&amp;mdash; Brian Holt (@holtbt) &lt;a href=&quot;https://twitter.com/holtbt/statuses/493852312604254208&quot;&gt;July 28, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;.&lt;a href=&quot;https://twitter.com/AirbnbNerds&quot;&gt;@AirbnbNerds&lt;/a&gt; just launched our first user-facing React.js feature to production! We love it so far. &lt;a href=&quot;https://t.co/KtyudemcIW&quot;&gt;https://t.co/KtyudemcIW&lt;/a&gt; /&lt;a href=&quot;https://twitter.com/floydophone&quot;&gt;@floydophone&lt;/a&gt;&lt;/p&gt;&amp;mdash; spikebrehm (@spikebrehm) &lt;a href=&quot;https://twitter.com/spikebrehm/statuses/491645223643013121&quot;&gt;July 22, 2014&lt;/a&gt;&lt;/blockquote&gt;
</description>
<pubDate>2014-08-03T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/08/03/community-roundup-21.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/08/03/community-roundup-21.html</guid>
</item>
</channel>
</rss>
Reference in New Issue View Git Blame Copy Permalink