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
cfb998a906b3cfaaddc24db599804564d9e9b3b9
react/feed.xml
T
Paul O’Shannessy cfb998a906 Add #3190
2015-02-18 21:42:56 -08:00

978 lines
126 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.js Conf Round-up 2015</title>
<description>&lt;p&gt;It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we&amp;#39;ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-talks&quot;&gt;&lt;/a&gt;The talks &lt;a class=&quot;hash-link&quot; href=&quot;#the-talks&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-keynote&quot;&gt;&lt;/a&gt;Keynote &lt;a class=&quot;hash-link&quot; href=&quot;#talk-keynote&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Tom Occhino&lt;/strong&gt; opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/KVZ-P-ZI6W4&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-tweak&quot;&gt;&lt;/a&gt;Tweaking in real time &lt;a class=&quot;hash-link&quot; href=&quot;#talk-tweak&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Brenton Simpson&lt;/strong&gt; showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and &lt;a href=&quot;https://github.com/appsforartists/ambidex&quot;&gt;Ambidex&lt;/a&gt;.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/yaymfLj5tjA&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-ast&quot;&gt;&lt;/a&gt;Abstract Syntax Trees &lt;a class=&quot;hash-link&quot; href=&quot;#talk-ast&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Gurdas Nijor&lt;/strong&gt; showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/OZGgVxFxSIs&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-relay-graphql&quot;&gt;&lt;/a&gt;Relay and GraphQL &lt;a class=&quot;hash-link&quot; href=&quot;#talk-relay-graphql&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Daniel Schafer&lt;/strong&gt; and &lt;strong&gt;Jing Chen&lt;/strong&gt; showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/9sc8Pyc51uU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-channels&quot;&gt;&lt;/a&gt;Channels &lt;a class=&quot;hash-link&quot; href=&quot;#talk-channels&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;James Long&lt;/strong&gt; explores what might happen if we introduce channels, a new style of coordinating actions, to React.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/W2DgDNQZOwo&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-router&quot;&gt;&lt;/a&gt;React Router &lt;a class=&quot;hash-link&quot; href=&quot;#talk-router&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Michael Jackson&lt;/strong&gt; reminded us that URLs should be part of our design process, and showed us how &lt;a href=&quot;https://github.com/rackt/react-router&quot;&gt;react-router&lt;/a&gt; can help to manage the transitions between them.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/XZfvW1a8Xac&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-full-stack-flux&quot;&gt;&lt;/a&gt;Full-stack Flux &lt;a class=&quot;hash-link&quot; href=&quot;#talk-full-stack-flux&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Pete Hunt&lt;/strong&gt; showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/KtmjkCuV-EU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-performance&quot;&gt;&lt;/a&gt;High-performance &lt;a class=&quot;hash-link&quot; href=&quot;#talk-performance&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Jason Bonta&lt;/strong&gt; showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on &lt;a href=&quot;http://facebook.github.io/fixed-data-table/&quot;&gt;FixedDataTable&lt;/a&gt;.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/KYzlpRvWZ6c&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-intl&quot;&gt;&lt;/a&gt;FormatJS and react-intl &lt;a class=&quot;hash-link&quot; href=&quot;#talk-intl&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Eric Ferraiuolo&lt;/strong&gt; showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/Sla-DkvmIHY&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-hype&quot;&gt;&lt;/a&gt;Hype! &lt;a class=&quot;hash-link&quot; href=&quot;#talk-hype&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Ryan Florence&lt;/strong&gt; showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/z5e7kWSHWTg&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-native&quot;&gt;&lt;/a&gt;React Native &lt;a class=&quot;hash-link&quot; href=&quot;#talk-native&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Christopher Chedeau&lt;/strong&gt; showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/7rDsRXj9-cU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-components&quot;&gt;&lt;/a&gt;Components &lt;a class=&quot;hash-link&quot; href=&quot;#talk-components&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Andrew Rota&lt;/strong&gt; explained how React and Web Components can work together, and how to avoid some common pitfalls.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/g0TD0efcwVg&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-immutable&quot;&gt;&lt;/a&gt;Immutability &lt;a class=&quot;hash-link&quot; href=&quot;#talk-immutable&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Lee Byron&lt;/strong&gt; led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps Javascript in general.
&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/I7IdS-PbEgI&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-gibbon&quot;&gt;&lt;/a&gt;Beyond the DOM &lt;a class=&quot;hash-link&quot; href=&quot;#talk-gibbon&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Jafar Husain&lt;/strong&gt; told us a story about how Netflix was able to push React into places where the DOM could not go.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/eNC0mRYGWgc&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-visualization&quot;&gt;&lt;/a&gt;Data Visualization &lt;a class=&quot;hash-link&quot; href=&quot;#talk-visualization&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Zach Nation&lt;/strong&gt; showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/2ii1lEkIv1s&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-refracted&quot;&gt;&lt;/a&gt;React Refracted &lt;a class=&quot;hash-link&quot; href=&quot;#talk-refracted&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;David Nolen&lt;/strong&gt; gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/5hGHdETNteE&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-flux-panel&quot;&gt;&lt;/a&gt;Flux Panel &lt;a class=&quot;hash-link&quot; href=&quot;#talk-flux-panel&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Bill Fisher&lt;/strong&gt; coordinated a Flux panel together with &lt;strong&gt;Michael Ridgway&lt;/strong&gt;, &lt;strong&gt;Spike Brehm&lt;/strong&gt;, &lt;strong&gt;Andres Suarez&lt;/strong&gt;, &lt;strong&gt;Jing Chen&lt;/strong&gt;, &lt;strong&gt;Ian Obermiller&lt;/strong&gt;, and &lt;strong&gt;Kyle Davis&lt;/strong&gt;.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/LTj4O7WJJ98&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-communication&quot;&gt;&lt;/a&gt;Component communication &lt;a class=&quot;hash-link&quot; href=&quot;#talk-communication&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Bonnie Eisenman&lt;/strong&gt; led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/ZM6wXoFTY3o&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-typescript&quot;&gt;&lt;/a&gt;Flow and TypeScript &lt;a class=&quot;hash-link&quot; href=&quot;#talk-typescript&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;James Brantly&lt;/strong&gt; demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/9PTa9-PPVAc&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;h3 style=&quot;margin-top:0&quot;&gt;&lt;a class=&quot;anchor&quot; name=&quot;talk-qa&quot;&gt;&lt;/a&gt;Core Team Q&amp;amp;A &lt;a class=&quot;hash-link&quot; href=&quot;#talk-qa&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;
&lt;strong&gt;Tom Occhino&lt;/strong&gt;, &lt;strong&gt;Ben Alpert&lt;/strong&gt;, &lt;strong&gt;Lee Byron&lt;/strong&gt;, &lt;strong&gt;Christopher Chedeau&lt;/strong&gt;, &lt;strong&gt;Sebastian Markbåge&lt;/strong&gt;, &lt;strong&gt;Jing Chen&lt;/strong&gt;, and &lt;strong&gt;Dan Schafer&lt;/strong&gt; closed the conference with a Q&amp;amp;A session.
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/EPpkboSKvPI&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactions&quot;&gt;&lt;/a&gt;Reactions &lt;a class=&quot;hash-link&quot; href=&quot;#reactions&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The conference is over, but the conversation has just begun.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Mihai Parparita&lt;/strong&gt; detailed his efforts to &lt;a href=&quot;http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html&quot;&gt;hack his way to a React.js Conf ticket&lt;/a&gt;; &lt;strong&gt;James Long&lt;/strong&gt; blogged about &lt;a href=&quot;http://jlongster.com/First-Impressions-using-React-Native&quot;&gt;his first encounter with React Native&lt;/a&gt;; &lt;strong&gt;Eric Florenzano&lt;/strong&gt; talked about how he perceives the &lt;a href=&quot;https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2&quot;&gt;impact of Relay, GraphQL, and React Native&lt;/a&gt; on software development; &lt;strong&gt;Margaret Staples&lt;/strong&gt; blogged about her experience of &lt;a href=&quot;http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html&quot;&gt;being on-campus at Facebook HQ&lt;/a&gt;; &lt;strong&gt;Jeff Barczewski&lt;/strong&gt; tied his experience of attending the conference up with a bow in this &lt;a href=&quot;http://codewinds.com/blog/2015-02-04-reactjs-conf.html&quot;&gt;blog post filled with photos, videos, and links&lt;/a&gt;; &lt;strong&gt;Kevin Old&lt;/strong&gt; left us with &lt;a href=&quot;http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html&quot;&gt;his takeaways&lt;/a&gt;; &lt;strong&gt;Paul Wittmann&lt;/strong&gt; found React Native &lt;a href=&quot;http://www.railslove.com/stories/fresh-on-our-radar-react-native&quot;&gt;freshly on his radar&lt;/a&gt;; and finally, undeterred by not being able to attend the conference in person, &lt;strong&gt;Justin Ball&lt;/strong&gt; &lt;a href=&quot;http://www.justinball.com/2015/02/03/i-didn&amp;#x27;t-attend-react.js-conf/&quot;&gt;summarized it from afar&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;And, in case you missed a session, you can borrow &lt;strong&gt;Michael Chan’s&lt;/strong&gt; &lt;a href=&quot;http://chantastic.io/2015-reactjs-conf/&quot;&gt;drawings&lt;/a&gt;, &lt;strong&gt;Mihai Parparita’s&lt;/strong&gt; &lt;a href=&quot;https://quip.com/uJQeABv7nkFN&quot;&gt;summary&lt;/a&gt;, or &lt;strong&gt;Shaohua Zhou’s&lt;/strong&gt; &lt;a href=&quot;http://getshao.com/2015/01/29/react-js-conf-notes-day1/&quot;&gt;day 1&lt;/a&gt; / &lt;a href=&quot;http://getshao.com/2015/01/29/react-js-conf-notes-day-2/&quot;&gt;day 2&lt;/a&gt; notes.&lt;/p&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Notes from &lt;a href=&quot;https://twitter.com/dlschafer&quot;&gt;@dlschafer&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/jingc&quot;&gt;@jingc&lt;/a&gt;&amp;#39;s &lt;a href=&quot;https://twitter.com/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt; talk &amp;quot;Data fetching for React applications at Facebook&amp;quot; &lt;a href=&quot;http://t.co/IUZUbDCDMQ&quot;&gt;pic.twitter.com/IUZUbDCDMQ&lt;/a&gt;&lt;/p&gt;&amp;mdash; Michael Chan (@chantastic) &lt;a href=&quot;https://twitter.com/chantastic/status/560538533161472000&quot;&gt;January 28, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;This is just magical (in the good way)… GraphQL + Relay is amazing. &lt;a href=&quot;https://twitter.com/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt;&lt;/p&gt;&amp;mdash; Chris Williams (@voodootikigod) &lt;a href=&quot;https://twitter.com/voodootikigod/status/560533225395589120&quot;&gt;January 28, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;These… these are my people. :) &lt;a href=&quot;https://twitter.com/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt;&lt;/p&gt;&amp;mdash; Thomas Beirne (@Beirnet) &lt;a href=&quot;https://twitter.com/Beirnet/status/560317879501848576&quot;&gt;January 28, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Humbled by the React team and community. Found &lt;a href=&quot;https://twitter.com/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt; very mindful, practical and just real.&lt;/p&gt;&amp;mdash; xnoɹǝʃ uɐıɹq (@brianleroux) &lt;a href=&quot;https://twitter.com/brianleroux/status/560972130112655360&quot;&gt;January 30, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;I say with confidence as a former UIKit author: React&amp;#39;s model for the UI layer is vastly better than UIKit&amp;#39;s. React Native is a *huge* deal.&lt;/p&gt;&amp;mdash; Andy Matuschak (@andy_matuschak) &lt;a href=&quot;https://twitter.com/andy_matuschak/status/560511204867575808&quot;&gt;January 28, 2015&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/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt; was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.&lt;/p&gt;&amp;mdash; David Nolen (@swannodette) &lt;a href=&quot;https://twitter.com/swannodette/status/561232290273980416&quot;&gt;January 30, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;I really love the community shout outs by &lt;a href=&quot;https://twitter.com/Vjeux&quot;&gt;@vjeux&lt;/a&gt; between talks at &lt;a href=&quot;https://twitter.com/hashtag/reactjsconf?src=hash&quot;&gt;#reactjsconf&lt;/a&gt;!&lt;/p&gt;&amp;mdash; Andrew Rota (@AndrewRota) &lt;a href=&quot;https://twitter.com/AndrewRota/status/560927339522297856&quot;&gt;January 29, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script async src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
&lt;p&gt;&lt;strong&gt;All proceeds from React.js Conf 2015 were donated to the wonderful programs at &lt;a href=&quot;http://code.org&quot;&gt;code.org&lt;/a&gt;&lt;/strong&gt;. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.&lt;/p&gt;
&lt;iframe width=&quot;305&quot; height=&quot;171&quot; src=&quot;https://www.youtube.com/embed/FC5FbmsH4fw&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
</description>
<pubDate>2015-02-18T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/02/18/react-conf-roundup-2015.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/02/18/react-conf-roundup-2015.html</guid>
</item>
<item>
<title>React v0.13.0 Beta 1</title>
<description>&lt;p&gt;React 0.13 has a lot of nice features but there is one particular feature that I&amp;#39;m really excited about. I couldn&amp;#39;t wait for React.js Conf to start tomorrow morning.&lt;/p&gt;
&lt;p&gt;Maybe you&amp;#39;re like me and staying up late excited about the conference, or maybe you weren&amp;#39;t one of the lucky ones to get a ticket. Either way I figured I&amp;#39;d give you all something to play with until then.&lt;/p&gt;
&lt;p&gt;We just published a beta version of React v0.13.0 to &lt;a href=&quot;https://www.npmjs.com/package/react&quot;&gt;npm&lt;/a&gt;! You can install it with &lt;code&gt;npm install react@0.13.0-beta.1&lt;/code&gt;. Since this is a pre-release, we don&amp;#39;t have proper release notes ready.&lt;/p&gt;
&lt;p&gt;So what is that one feature I&amp;#39;m so excited about that I just couldn&amp;#39;t wait to share?&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;plain-javascript-classes&quot;&gt;&lt;/a&gt;Plain JavaScript Classes!! &lt;a class=&quot;hash-link&quot; href=&quot;#plain-javascript-classes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;JavaScript originally didn&amp;#39;t have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.&lt;/p&gt;
&lt;p&gt;We figured that we&amp;#39;re not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.&lt;/p&gt;
&lt;p&gt;In React 0.13.0 you no longer need to use &lt;code&gt;React.createClass&lt;/code&gt; to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with &lt;code&gt;react-tools&lt;/code&gt; by making use of the harmony option: &lt;code&gt;jsx --harmony&lt;/code&gt;.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;es6-classes&quot;&gt;&lt;/a&gt;ES6 Classes &lt;a class=&quot;hash-link&quot; href=&quot;#es6-classes&quot;&gt;#&lt;/a&gt;&lt;/h3&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;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;HelloMessage&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&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;Component&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;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;nx&quot;&gt;Hello&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;name&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;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;render&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;HelloMessage&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;Sebastian&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;nx&quot;&gt;mountNode&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 API is mostly what you would expect, with the exception for &lt;code&gt;getInitialState&lt;/code&gt;. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise &lt;code&gt;getDefaultProps&lt;/code&gt; and &lt;code&gt;propTypes&lt;/code&gt; are really just properties on the constructor.&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;Counter&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&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;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;constructor&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;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;super&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;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;o&quot;&gt;=&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;o&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;initialCount&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;tick&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;count&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&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;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;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;onClick&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;tick&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&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;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Clicks&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;count&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;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Counter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;propTypes&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;initialCount&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;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;number&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Counter&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;defaultProps&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;initialCount&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;es7-property-initializers&quot;&gt;&lt;/a&gt;ES7+ Property Initializers &lt;a class=&quot;hash-link&quot; href=&quot;#es7-property-initializers&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Wait, assigning to properties seems like a very imperative way of defining classes! You&amp;#39;re right, however, we designed it this way because it&amp;#39;s idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look 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;c1&quot;&gt;// Future Version&lt;/span&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;Counter&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&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;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;propTypes&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;initialCount&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;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;number&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;static&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;defaultProps&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;initialCount&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;nx&quot;&gt;state&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;count&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;initialCount&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;tick&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;count&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&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;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;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;onClick&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;tick&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&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;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Clicks&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;count&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;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;This was inspired by TypeScript&amp;#39;s property initializers.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;autobinding&quot;&gt;&lt;/a&gt;Autobinding &lt;a class=&quot;hash-link&quot; href=&quot;#autobinding&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;React.createClass&lt;/code&gt; has a built-in magic feature that bound all methods to &lt;code&gt;this&lt;/code&gt; automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.&lt;/p&gt;
&lt;p&gt;Therefore we decided not to have this built-in into React&amp;#39;s class model. You can still explicitly prebind methods in your constructor if you want.&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;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Counter&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&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;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;constructor&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;kr&quot;&gt;super&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;tick&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;tick&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;bind&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;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;tick&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;However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:&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;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Counter&lt;/span&gt; &lt;span class=&quot;kr&quot;&gt;extends&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;Component&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;tick&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;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;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;mixins&quot;&gt;&lt;/a&gt;Mixins &lt;a class=&quot;hash-link&quot; href=&quot;#mixins&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.&lt;/p&gt;
&lt;p&gt;There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn&amp;#39;t help that effort.&lt;/p&gt;
&lt;p&gt;Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.&lt;/p&gt;
&lt;p&gt;Luckily, if you want to keep using mixins, you can just keep using &lt;code&gt;React.createClass&lt;/code&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The classic &lt;code&gt;React.createClass&lt;/code&gt; style of creating classes will continue to work just fine.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;other-languages&quot;&gt;&lt;/a&gt;Other Languages! &lt;a class=&quot;hash-link&quot; href=&quot;#other-languages&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.&lt;/p&gt;
&lt;p&gt;You can also use CoffeeScript classes:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-coffeescript&quot; data-lang=&quot;coffeescript&quot;&gt;&lt;span class=&quot;nv&quot;&gt;div = &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;s&quot;&gt;&amp;#39;div&amp;#39;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Counter&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;extends&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;Component&lt;/span&gt;
&lt;span class=&quot;vi&quot;&gt;@propTypes =&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;initialCount: &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;PropTypes&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;number&lt;/span&gt;
&lt;span class=&quot;vi&quot;&gt;@defaultProps =&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;initialCount: &lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;0&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;constructor: &lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;-&amp;gt;&lt;/span&gt;
&lt;span class=&quot;vi&quot;&gt;@state =&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;count: &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;initialCount&lt;/span&gt;
&lt;span class=&quot;nv&quot;&gt;tick: &lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;=&amp;gt;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;@setState&lt;/span&gt; &lt;span class=&quot;nv&quot;&gt;count: &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;count&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;nv&quot;&gt;render: &lt;/span&gt;&lt;span class=&quot;nf&quot;&gt;-&amp;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;nv&quot;&gt;onClick: &lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;@tick&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;s&quot;&gt;&amp;#39;Clicks: &amp;#39;&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;count&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 even use the old ES3 module pattern if you want:&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;MyComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;initialProps&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;state&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;value&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;initialProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;initialValue&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;span&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;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;value&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
<pubDate>2015-01-27T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html</guid>
</item>
<item>
<title>React.js Conf Diversity Scholarship</title>
<description>&lt;p&gt;Today I&amp;#39;m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.&lt;/p&gt;
&lt;p&gt;I&amp;#39;m really excited about this and I hope you are too! The full announcement is below:&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!&lt;/p&gt;
&lt;p&gt;Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 &amp;amp; 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the &lt;a href=&quot;http://conf.reactjs.com/&quot;&gt;website&lt;/a&gt; and &lt;a href=&quot;http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html&quot;&gt;previous&lt;/a&gt; &lt;a href=&quot;http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html&quot;&gt;updates&lt;/a&gt; on our blog.&lt;/p&gt;
&lt;p&gt;At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.&lt;/p&gt;
&lt;p&gt;To apply for the scholarship, please visit the Application Page: &lt;a href=&quot;https://www.surveymonkey.com/s/XVJGK6R&quot;&gt;https://www.surveymonkey.com/s/XVJGK6R&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;award-includes&quot;&gt;&lt;/a&gt;Award Includes &lt;a class=&quot;hash-link&quot; href=&quot;#award-includes&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Paid registration fee for the React.js Conf January 28 &amp;amp; 29th at Facebook’s Headquarters in Menlo Park, CA&lt;/li&gt;
&lt;li&gt;Paid travel and lodging expenses&lt;/li&gt;
&lt;li&gt;Additional $200 meal stipend&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;important-dates&quot;&gt;&lt;/a&gt;Important Dates &lt;a class=&quot;hash-link&quot; href=&quot;#important-dates&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full&lt;/li&gt;
&lt;li&gt;Friday, January 9, 2015: Award recipients will be notified by email of their acceptance&lt;/li&gt;
&lt;li&gt;Wednesday &amp;amp; Thursday, January 28 &amp;amp; 29, 2015: React.js Conf&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;eligibility&quot;&gt;&lt;/a&gt;Eligibility &lt;a class=&quot;hash-link&quot; href=&quot;#eligibility&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Must currently be studying or working in Computer Science or a related field&lt;/li&gt;
&lt;li&gt;International applicants are welcome, but you will be responsible for securing your own visa to attend the conference&lt;/li&gt;
&lt;li&gt;You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-12-19T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html</guid>
</item>
<item>
<title>React v0.12.2</title>
<description>&lt;p&gt;We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.&lt;/p&gt;
&lt;p&gt;You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of &lt;a href=&quot;http://flowtype.org/&quot;&gt;Flow&lt;/a&gt;, with only transform-related changes. Namely we added a flag to the &lt;code&gt;jsx&lt;/code&gt; executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn&amp;#39;t update for that release, you can safely skip it and move directly to v0.12.2.&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.12.2.js&quot;&gt;http://fb.me/react-0.12.2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.12.2.min.js&quot;&gt;http://fb.me/react-0.12.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.12.2.js&quot;&gt;http://fb.me/react-with-addons-0.12.2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.12.2.min.js&quot;&gt;http://fb.me/react-with-addons-0.12.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.12.2.js&quot;&gt;http://fb.me/JSXTransformer-0.12.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.12.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;code&gt;0.12.1&lt;/code&gt; is also available in the same locations if need those.&lt;/p&gt;
&lt;p&gt;Please try these builds out and &lt;a href=&quot;https://github.com/facebook/react/issues/new&quot;&gt;file an issue on GitHub&lt;/a&gt; if you see anything awry.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;changelog&quot;&gt;&lt;/a&gt;Changelog &lt;a class=&quot;hash-link&quot; href=&quot;#changelog&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-core&quot;&gt;&lt;/a&gt;React Core &lt;a class=&quot;hash-link&quot; href=&quot;#react-core&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;Added support for more HTML attributes: &lt;code&gt;formAction&lt;/code&gt;, &lt;code&gt;formEncType&lt;/code&gt;, &lt;code&gt;formMethod&lt;/code&gt;, &lt;code&gt;formTarget&lt;/code&gt;, &lt;code&gt;marginHeight&lt;/code&gt;, &lt;code&gt;marginWidth&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Added &lt;code&gt;strokeOpacity&lt;/code&gt; to the list of unitless CSS properties&lt;/li&gt;
&lt;li&gt;Removed trailing commas (allows npm module to be bundled and used in IE8)&lt;/li&gt;
&lt;li&gt;Fixed bug resulting in error when passing &lt;code&gt;undefined&lt;/code&gt; to &lt;code&gt;React.createElement&lt;/code&gt; - now there is a useful warning&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;JSX-related transforms now always use double quotes for props and &lt;code&gt;displayName&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2014-12-18T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/12/18/react-v0.12.2.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/12/18/react-v0.12.2.html</guid>
</item>
<item>
<title>Community Round-up #24</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;keep-it-simple&quot;&gt;&lt;/a&gt;Keep it Simple &lt;a class=&quot;hash-link&quot; href=&quot;#keep-it-simple&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Pedro Nauck (&lt;a href=&quot;https://github.com/pedronauck&quot;&gt;pedronauck&lt;/a&gt;) delivered an impeccably illustrated deck at Brazil&amp;#39;s &lt;em&gt;Front in Floripa&lt;/em&gt; conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.&lt;/p&gt;
&lt;script async class=&quot;speakerdeck-embed&quot; data-id=&quot;44129b9054c901328b89221e99b278fe&quot; data-ratio=&quot;1.33333333333333&quot; src=&quot;//speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;Murilo Pereira (&lt;a href=&quot;https://github.com/mpereira&quot;&gt;mpereira&lt;/a&gt;) tussles with the topic of complexity in this blog post about &lt;a href=&quot;http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/&quot;&gt;coping with scaling up&lt;/a&gt;, where he describes how his team used React to make possible the “nearly impossible.”&lt;/p&gt;
&lt;p&gt;I (&lt;a href=&quot;https://github.com/steveluscher&quot;&gt;steveluscher&lt;/a&gt;) spoke at Manning Publications&amp;#39; “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/rI0GQc__0SM&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;James Pearce (&lt;a href=&quot;https://github.com/jamesgpearce&quot;&gt;jamesgpearce&lt;/a&gt;) carried Big-Coffee all the way to Raleigh, NC. At the &lt;em&gt;All Things Open&lt;/em&gt; conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/m2fuO2wl_3c&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;all-about-isomorphism&quot;&gt;&lt;/a&gt;All About Isomorphism &lt;a class=&quot;hash-link&quot; href=&quot;#all-about-isomorphism&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Michael Ridgway (&lt;a href=&quot;https://github.com/mridgway&quot;&gt;mridgway&lt;/a&gt;) shows us how Yahoo! (who recently &lt;a href=&quot;http://www.slideshare.net/rmsguhan/react-meetup-mailonreact&quot;&gt;moved Yahoo! Mail to React&lt;/a&gt;) renders their React+Flux application, server-side.&lt;/p&gt;
&lt;script async class=&quot;speakerdeck-embed&quot; data-id=&quot;87ecaa3048750132f42542ffc18c6fcf&quot; data-ratio=&quot;1.77777777777778&quot; src=&quot;//speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt;
&lt;p&gt;Péter Márton (&lt;a href=&quot;https://github.com/hekike&quot;&gt;hekike&lt;/a&gt;) helps us brew a cold one (literally) using an application that&amp;#39;s server-client &lt;a href=&quot;http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/&quot;&gt;isomorphic and indexable&lt;/a&gt;. Demo and sample code included – cold ones sold separately.&lt;/p&gt;
&lt;p&gt;And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (&lt;a href=&quot;https://github.com/nhunzaker&quot;&gt;nhunzaker&lt;/a&gt;) &lt;a href=&quot;http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization&quot;&gt;server renders data visualizations as SVG&lt;/a&gt; with React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-router-mows-the-lawn&quot;&gt;&lt;/a&gt;React Router Mows the Lawn &lt;a class=&quot;hash-link&quot; href=&quot;#react-router-mows-the-lawn&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ryan Florence (&lt;a href=&quot;https://github.com/rpflorence%5D&quot;&gt;rpflorence&lt;/a&gt;) and Michael Jackson (&lt;a href=&quot;https://github.com/mjackson&quot;&gt;mjackson&lt;/a&gt;) unveiled a new API for &lt;a href=&quot;https://github.com/rackt/react-router&quot;&gt;React Router&lt;/a&gt; that solves some of its user&amp;#39;s problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they&amp;#39;ve &lt;a href=&quot;https://github.com/rackt/react-router/wiki/Announcements&quot;&gt;rolled your ideas into their latest release&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-in-practice&quot;&gt;&lt;/a&gt;React in Practice &lt;a class=&quot;hash-link&quot; href=&quot;#react-in-practice&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Jonathan Beebe (&lt;a href=&quot;https://github.com/somethingkindawierd&quot;&gt;somethingkindawierd&lt;/a&gt;) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year&amp;#39;s &lt;em&gt;Nodevember&lt;/em&gt; conference in Nashville&lt;/p&gt;
&lt;iframe width=&quot;420&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/uZgAq1CZ1N8&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;If you take a peek under the covers, you&amp;#39;ll find that React powers &lt;a href=&quot;https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/&quot;&gt;Carousel&lt;/a&gt;, Dropbox&amp;#39;s new photo and video gallery app.&lt;/p&gt;
&lt;p&gt;We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “&lt;a href=&quot;https://thevanishinggame.wellstoried.com&quot;&gt;The Vanishing Game&lt;/a&gt;” and see for yourself.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;be-kind-rewind&quot;&gt;&lt;/a&gt;Be Kind, Rewind &lt;a class=&quot;hash-link&quot; href=&quot;#be-kind-rewind&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Spend the next 60 seconds watching Daniel Woelfel (&lt;a href=&quot;https://github.com/dwwoelfel&quot;&gt;dwwoelfel&lt;/a&gt;) serialize a React app&amp;#39;s state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to &lt;a href=&quot;http://blog.circleci.com/local-state-global-concerns/&quot;&gt;reproduce bugs&lt;/a&gt; reported to him by his users.&lt;/p&gt;
&lt;iframe width=&quot;420&quot; height=&quot;315&quot; src=&quot;//www.youtube.com/embed/5yHFTN-_mOo&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;community-components&quot;&gt;&lt;/a&gt;Community Components &lt;a class=&quot;hash-link&quot; href=&quot;#community-components&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Tom Chen (&lt;a href=&quot;https://github.com/tomchentw&quot;&gt;tomchentw&lt;/a&gt;) brings us a &lt;a href=&quot;http://tomchentw.github.io/react-google-maps/&quot;&gt;react-google-maps&lt;/a&gt; component, and a way to syntax highlight source code using Prism and the &lt;a href=&quot;http://tomchentw.github.io/react-prism/&quot;&gt;react-prism&lt;/a&gt; component, for good measure.&lt;/p&gt;
&lt;p&gt;Jed Watson (&lt;a href=&quot;https://github.com/JedWatson&quot;&gt;jedwatson&lt;/a&gt;) helps you manage touch, tap, and press events using the &lt;a href=&quot;https://github.com/JedWatson/react-tappable&quot;&gt;react-tappable&lt;/a&gt; component.&lt;/p&gt;
&lt;p&gt;To find these, and more community-built components, consult the &lt;a href=&quot;http://react-components.com/&quot;&gt;React Components&lt;/a&gt; and &lt;a href=&quot;http://react.rocks&quot;&gt;React Rocks&lt;/a&gt; component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword &lt;code&gt;react-component&lt;/code&gt; to your &lt;code&gt;package.json&lt;/code&gt; to get listed on React Components, and &lt;a href=&quot;https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform&quot;&gt;submit a link to React Rocks&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;waiter-theres-a-css-in-my-javascript&quot;&gt;&lt;/a&gt;Waiter, There&amp;#39;s a CSS In My JavaScript &lt;a class=&quot;hash-link&quot; href=&quot;#waiter-theres-a-css-in-my-javascript&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (&lt;a href=&quot;https://github.com/vjeux&quot;&gt;vjeux&lt;/a&gt;) talks about some of the &lt;a href=&quot;https://speakerdeck.com/vjeux/react-css-in-js&quot;&gt;fundamental style management challenges&lt;/a&gt; we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused &lt;a href=&quot;https://github.com/js-next/react-style&quot;&gt;react-style&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;test-isolation&quot;&gt;&lt;/a&gt;Test Isolation &lt;a class=&quot;hash-link&quot; href=&quot;#test-isolation&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Yahoo! shows us how they make use of &lt;code&gt;iframe&lt;/code&gt; elements to &lt;a href=&quot;http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil&quot;&gt;unit test React components in isolation&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;youve-got-the-hang-of-flux-now-lets-flow&quot;&gt;&lt;/a&gt;You&amp;#39;ve Got The Hang of Flux, Now Let&amp;#39;s Flow &lt;a class=&quot;hash-link&quot; href=&quot;#youve-got-the-hang-of-flux-now-lets-flow&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Facebook Open Source released &lt;a href=&quot;https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/&quot;&gt;Flow&lt;/a&gt; this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to &lt;a href=&quot;https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility&quot;&gt;type check React applications&lt;/a&gt;. There&amp;#39;s never been a better reason to start making use of &lt;code&gt;propTypes&lt;/code&gt; in your component specifications!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;countdown-to-react.js-conf-2014&quot;&gt;&lt;/a&gt;Countdown to React.js Conf 2014 &lt;a class=&quot;hash-link&quot; href=&quot;#countdown-to-react.js-conf-2014&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We&amp;#39;re counting down the days until &lt;a href=&quot;http://conf.reactjs.com&quot;&gt;React.js Conf&lt;/a&gt; at Facebook&amp;#39;s headquarters in Menlo Park, California, on January 28th &amp;amp; 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-meetups-around-the-world&quot;&gt;&lt;/a&gt;React Meetups Around the World &lt;a class=&quot;hash-link&quot; href=&quot;#react-meetups-around-the-world&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;React JS meetup having pretty good turn up rate today &lt;a href=&quot;https://twitter.com/hashtag/londonreact?src=hash&quot;&gt;#londonreact&lt;/a&gt; &lt;a href=&quot;http://t.co/c360dlVVAe&quot;&gt;pic.twitter.com/c360dlVVAe&lt;/a&gt;&lt;/p&gt;&amp;mdash; Alexander Savin (@karismafilms) &lt;a href=&quot;https://twitter.com/karismafilms/status/535152580377468928&quot;&gt;November 19, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;60+ attendees at the second React.js Utah meetup. &lt;a href=&quot;https://twitter.com/ryanflorence&quot;&gt;@ryanflorence&lt;/a&gt; doing a great job, even without the internet. &lt;a href=&quot;http://t.co/fV59AQTOyu&quot;&gt;pic.twitter.com/fV59AQTOyu&lt;/a&gt;&lt;/p&gt;&amp;mdash; ReactJS Utah (@reactjsutah) &lt;a href=&quot;https://twitter.com/reactjsutah/status/527259410020573184&quot;&gt;October 29, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://twitter.com/hashtag/ReactJS?src=hash&quot;&gt;#ReactJS&lt;/a&gt; meetup at &lt;a href=&quot;https://twitter.com/Yahoo&quot;&gt;@Yahoo&lt;/a&gt; ! History of &lt;a href=&quot;https://twitter.com/yahoomail&quot;&gt;@yahoomail&lt;/a&gt; and why we chose react and NodeJS &lt;a href=&quot;http://t.co/Nm4EdTv45G&quot;&gt;pic.twitter.com/Nm4EdTv45G&lt;/a&gt;&lt;/p&gt;&amp;mdash; rmsguhan (@rmsguhan) &lt;a href=&quot;https://twitter.com/rmsguhan/status/515370950427029504&quot;&gt;September 26, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-row&quot;&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; data-cards=&quot;hidden&quot; lang=&quot;en&quot;&gt;&lt;p&gt;The very first ReactJS meetup in NYC tonight, I&amp;#39;ll be speaking about the big ideas behind Om &lt;a href=&quot;http://t.co/dvPrFqE9eP&quot;&gt;http://t.co/dvPrFqE9eP&lt;/a&gt;&lt;/p&gt;&amp;mdash; David Nolen (@swannodette) &lt;a href=&quot;https://twitter.com/swannodette/status/532190993463128064&quot;&gt;November 11, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;div class=&quot;skinny-col&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;If anyone in Sydney is curious about &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt;, I&amp;#39;m presenting at &lt;a href=&quot;https://twitter.com/sydjs&quot;&gt;@sydjs&lt;/a&gt; tonight on how to use it and why it is the future. &lt;a href=&quot;https://twitter.com/hashtag/javascript?src=hash&quot;&gt;#javascript&lt;/a&gt;&lt;/p&gt;&amp;mdash; Jed Watson (@JedWatson) &lt;a href=&quot;https://twitter.com/JedWatson/status/534943557568565248&quot;&gt;November 19, 2014&lt;/a&gt;&lt;/blockquote&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script async src=&quot;//platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
</description>
<pubDate>2014-11-25T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/11/25/community-roundup-24.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/11/25/community-roundup-24.html</guid>
</item>
<item>
<title>React.js Conf Updates</title>
<description>&lt;p&gt;Yesterday was the &lt;a href=&quot;http://conf.reactjs.com/index.html&quot;&gt;React.js Conf&lt;/a&gt; call for presenters submission deadline. We were
surprised to have received a total of &lt;strong&gt;one hundred talk proposals&lt;/strong&gt; and were
amazed that 600 people requested to be notified when ticket go on sale. This is incredible!&lt;/p&gt;
&lt;p&gt;When we organized the conference, we decided to start small since this is the
first React.js conference. Also, we weren&amp;#39;t sure what level of demand to expect,
so we planned for a single-track, two-day conference on Facebook&amp;#39;s campus. The
largest room available would accomodate 18 speaking slots and 200 attendees.
The spacial configuration makes it difficult to add a second track and changing
venues only two months in advance would be too difficult, so we are deciding to
stick with the originally planned format and venue on Facebook&amp;#39;s campus.&lt;/p&gt;
&lt;p&gt;Unfortunately, this means that we can only accept a small number of the awesome
conference talk proposals. In order to make sure attendees get a fair shot at
registering, we&amp;#39;re going to to sell tickets in three separate first-come,
first-serve phases. &lt;strong&gt;Tickets will cost $200 regardless of which phase they are
purchased from and all proceeds will go to charity&lt;/strong&gt;.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Friday November 28th 2014 — Noon PST: First wave of tickets&lt;/li&gt;
&lt;li&gt;Friday December 5th 2014 — Noon PST: Second wave of tickets&lt;/li&gt;
&lt;li&gt;Friday December 12th 2014 — Noon PST: Third and last wave of tickets&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We really do wish that everyone could attend React.js Conf, but in order to
ensure a quality experience for those who attend, we feel it will be best to
limit the size of the conference to what was originally planned for. This means
that not everyone who wants to attend will be able to, and many talks that
would be excellent contributions to the conference will have to be postponed
until the next conference. All the talks will be recorded and put online shortly after.&lt;/p&gt;
&lt;p&gt;We hope to see many of you at React.js Conf this January.&lt;/p&gt;
&lt;p&gt;Sincerely,&lt;/p&gt;
&lt;p&gt;React Core Team&lt;/p&gt;
</description>
<pubDate>2014-11-24T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html</guid>
</item>
<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 too 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>
</channel>
</rss>
Reference in New Issue View Git Blame Copy Permalink