react/blog/page8/index.html at gh-pages · jakedahm/react

794 lines (609 loc) · 54.7 KB
<!DOCTYPE html>
<!--[if IE]><![endif]-->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Blog | React</title>
  <meta name="viewport" content="width=device-width">
  <meta property="og:title" content="Blog | React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/blog/page8/index.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">
  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">
  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>
  <!--[if lte IE 8]>
  <script src="/react/js/html5shiv.min.js"></script>
  <script src="/react/js/es5-shim.min.js"></script>
  <script src="/react/js/es5-sham.min.js"></script>
  <![endif]-->
  <script src="/react/js/codemirror.js"></script>
  <script src="/react/js/javascript.js"></script>
  <script src="/react/js/react.js"></script>
  <script src="/react/js/react-dom.js"></script>
  <script src="/react/js/babel-browser.min.js"></script>
  <script src="/react/js/live_editor.js"></script>
  <div class="container">
    <div class="nav-main">
      <div class="wrap">
        <a class="nav-home" href="/react/index.html">
          <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
          React
        </a>
        <ul class="nav-site nav-site-internal">
          <li><a href="/react/docs/getting-started.html">Docs</a></li>
          <li><a href="/react/support.html">Support</a></li>
          <li><a href="/react/downloads.html">Download</a></li>
          <li><a href="/react/blog/" class="active">Blog</a></li>
        </ul>
        <ul class="nav-site nav-site-external">
          <li><a href="https://github.com/facebook/react">GitHub</a></li>
          <li><a href="https://facebook.github.io/react-native/">React Native</a></li>
        </ul>
      </div>
    <section class="content wrap blogContent">
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
        <li><a href="/react/blog/2016/02/19/new-versioning-scheme.html">New Versioning Scheme</a></li>
        <li><a href="/react/blog/2016/01/12/discontinuing-ie8-support.html">Discontinuing IE 8 Support in React DOM</a></li>
        <li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
        <li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
        <li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
        <li><a href="/react/blog/2015/12/16/ismounted-antipattern.html">isMounted is an Antipattern</a></li>
        <li><a href="/react/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html">React.js Conf 2016 Diversity Scholarship</a></li>
        <li><a href="/react/blog/2015/11/18/react-v0.14.3.html">React v0.14.3</a></li>
        <li><a href="/react/blog/2015/11/02/react-v0.14.2.html">React v0.14.2</a></li>
        <li><a href="/react/blog/2015/10/28/react-v0.14.1.html">React v0.14.1</a></li>
      <li><a href="/react/blog/all.html">All posts ...</a></li>
  <div class="inner-content">
      <div class="post-list-item">
  <a href="/react/blog/2015/02/20/introducing-relay-and-graphql.html">Introducing Relay and GraphQL</a>
<p class="meta">
  February 20, 2015
      <a href="https://twitter.com/wincent">Greg Hurrell</a>
<div class="post">
  <h2><a class="anchor" name="data-fetching-for-react-applications"></a>Data fetching for React applications <a class="hash-link" href="#data-fetching-for-react-applications">#</a></h2>
<p>There&#39;s more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At <a href="http://conf.reactjs.com/">React.js Conf</a> we announced two projects we&#39;ve created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
<p>The two projects &mdash; Relay and GraphQL &mdash; have been in use in production at Facebook for some time, and we&#39;re excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.</p>
<script async class="speakerdeck-embed" data-id="7af7c2f33bf9451a892dcd91de55b7c2" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
<h2><a class="anchor" name="what-is-relay"></a>What is Relay? <a class="hash-link" href="#what-is-relay">#</a></h2>
<p>Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).</p>
<p>Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on <code>this.props</code>.</p>
<p>Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.</p>
<h2><a class="anchor" name="what-is-graphql"></a>What is GraphQL? <a class="hash-link" href="#what-is-graphql">#</a></h2>
<p>GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It&#39;s been in production use in Facebook&#39;s native apps for several years.</p>
<p>On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.</p>
<h2><a class="anchor" name="the-value-proposition"></a>The value proposition <a class="hash-link" href="#the-value-proposition">#</a></h2>
<p>Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.</p>
<p>By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it&#39;s not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.</p>
<p>Co-location leads developers to fall into the &quot;pit of success&quot;, because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won&#39;t try to render missing data and blow up at runtime).</p>
<p>Relay provides a predictable environment for developers by maintaining an invariant: a component won&#39;t be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.</p>
<p>Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.</p>
<p>By handling all data-fetching via a single abstraction, we&#39;re able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:</p>
<li><strong>Performance:</strong> All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently &quot;in flight&quot;, so queries can be automatically de-duplicated and the minimal queries can be produced.</li>
<li><strong>Subscriptions:</strong> All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions.</li>
<li><strong>Common patterns:</strong> We can make common patterns easy. Pagination is the example that <a href="https://twitter.com/jingc">Jing</a> gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available.</li>
<li><strong>Simplified server implementation:</strong> Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.</li>
<li><strong>Uniform mutations:</strong> There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you&#39;ll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate &quot;optimistic&quot; update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.</li>
<h2><a class="anchor" name="how-does-it-relate-to-flux"></a>How does it relate to Flux? <a class="hash-link" href="#how-does-it-relate-to-flux">#</a></h2>
<p>In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.</p>
<p>At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.</p>
<h2><a class="anchor" name="open-source-plans"></a>Open source plans <a class="hash-link" href="#open-source-plans">#</a></h2>
<p>We&#39;re working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).</p>
<p>In the meantime, we&#39;ll be providing more and more information in the form of blog posts (and in <a href="https://gist.github.com/wincent/598fa75e22bdfa44cf47">other channels</a>). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.</p>
<p>Watch this space!</p>
      </div>
      <div class="post-list-item">
  <a href="/react/blog/2015/02/18/react-conf-roundup-2015.html">React.js Conf Round-up 2015</a>
<p class="meta">
  February 18, 2015
      <a href="https://twitter.com/steveluscher">Steven Luscher</a>
<div class="post">
  <p>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 able to unveil three new technologies that we&#39;ve been using internally at Facebook for some time: GraphQL, Relay, and React Native.</p>
<h2><a class="anchor" name="the-talks"></a>The talks <a class="hash-link" href="#the-talks">#</a></h2>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
      <strong>Tom Occhino</strong> 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?
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
      <strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using Webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
      <strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
      <strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
      <strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
      <strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
      <strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
      <strong>Jason Bonta</strong> 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 <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
      <strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
      <strong>Ryan Florence</strong> 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.”
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
      <strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
      <strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
      <strong>Lee Byron</strong> 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.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
      <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
      <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
      <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
      <strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
      <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
      <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
<div class="skinny-row">
  <div class="skinny-col">
    <h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&amp;A <a class="hash-link" href="#talk-qa">#</a></h3>
      <strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&amp;A session.
  <div class="skinny-col">
    <iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="reactions"></a>Reactions <a class="hash-link" href="#reactions">#</a></h2>
<p>The conference is over, but the conversation has just begun.</p>
<p><strong>Mihai Parparita</strong> detailed his efforts to <a href="http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html">hack his way to a React.js Conf ticket</a>; <strong>James Long</strong> blogged about <a href="http://jlongster.com/First-Impressions-using-React-Native">his first encounter with React Native</a>; <strong>Eric Florenzano</strong> talked about how he perceives the <a href="https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2">impact of Relay, GraphQL, and React Native</a> on software development; <strong>Margaret Staples</strong> blogged about her experience of <a href="http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html">being on-campus at Facebook HQ</a>; <strong>Jeff Barczewski</strong> tied his experience of attending the conference up with a bow in this <a href="http://codewinds.com/blog/2015-02-04-reactjs-conf.html">blog post filled with photos, videos, and links</a>; <strong>Kevin Old</strong> left us with <a href="http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html">his takeaways</a>; <strong>Paul Wittmann</strong> found React Native <a href="http://www.railslove.com/stories/fresh-on-our-radar-react-native">freshly on his radar</a>; and finally, undeterred by not being able to attend the conference in person, <strong>Justin Ball</strong> <a href="http://www.justinball.com/2015/02/03/i-didn&#x27;t-attend-react.js-conf/">summarized it from afar</a>.</p>
<p>And, in case you missed a session, you can borrow <strong>Michael Chan’s</strong> <a href="http://chantastic.io/2015-reactjs-conf/">drawings</a>, <strong>Mihai Parparita’s</strong> <a href="https://quip.com/uJQeABv7nkFN">summary</a>, or <strong>Shaohua Zhou’s</strong> <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day1/">day 1</a> / <a href="http://getshao.com/2015/01/29/react-js-conf-notes-day-2/">day 2</a> notes.</p>
<div class="skinny-row">
  <div class="skinny-col">
    <blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>&#39;s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk &quot;Data fetching for React applications at Facebook&quot; <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>&mdash; Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
    <blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
    <blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>&mdash; Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
  <div class="skinny-col">
    <blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>&mdash; xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
    <blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: React&#39;s model for the UI layer is vastly better than UIKit&#39;s. React Native is a *huge* deal.</p>&mdash; Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>
    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
    <blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>&mdash; Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p><strong>All proceeds from React.js Conf 2015 were donated to the wonderful programs at <a href="http://code.org">code.org</a></strong>. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.</p>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="post-list-item">
  <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a>
<p class="meta">
  January 27, 2015
      <a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
<div class="post">
  <p>React 0.13 has a lot of nice features but there is one particular feature that I&#39;m really excited about. I couldn&#39;t wait for React.js Conf to start tomorrow morning.</p>
<p>Maybe you&#39;re like me and staying up late excited about the conference, or maybe you weren&#39;t one of the lucky ones to get a ticket. Either way I figured I&#39;d give you all something to play with until then.</p>
<p>We just published a beta version of React v0.13.0 to <a href="https://www.npmjs.com/package/react">npm</a>! You can install it with <code>npm install react@0.13.0-beta.1</code>. Since this is a pre-release, we don&#39;t have proper release notes ready.</p>
<p>So what is that one feature I&#39;m so excited about that I just couldn&#39;t wait to share?</p>
<h2><a class="anchor" name="plain-javascript-classes"></a>Plain JavaScript Classes!! <a class="hash-link" href="#plain-javascript-classes">#</a></h2>
<p>JavaScript originally didn&#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.</p>
<p>We figured that we&#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.</p>
<p>In React 0.13.0 you no longer need to use <code>React.createClass</code> to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with <code>react-tools</code> by making use of the harmony option: <code>jsx --harmony</code>.</p>
<h3><a class="anchor" name="es6-classes"></a>ES6 Classes <a class="hash-link" href="#es6-classes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">HelloMessage</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;Sebastian&quot;</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>The API is mostly what you would expect, with the exception of <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
    <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
  <span class="p">}</span>
  <span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
  <span class="p">}</span>
  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
        <span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
<span class="nx">Counter</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
<span class="nx">Counter</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
</code></pre></div><h3><a class="anchor" name="es7-property-initializers"></a>ES7+ Property Initializers <a class="hash-link" href="#es7-property-initializers">#</a></h3>
<p>Wait, assigning to properties seems like a very imperative way of defining classes! You&#39;re right, however, we designed it this way because it&#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:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Future Version</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="kr">static</span> <span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
  <span class="kr">static</span> <span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
  <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span> <span class="p">};</span>
  <span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span> <span class="p">});</span>
  <span class="p">}</span>
  <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
        <span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>This was inspired by TypeScript&#39;s property initializers.</p>
<h3><a class="anchor" name="autobinding"></a>Autobinding <a class="hash-link" href="#autobinding">#</a></h3>
<p><code>React.createClass</code> has a built-in magic feature that bound all methods to <code>this</code> 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.</p>
<p>Therefore we decided not to have this built-in into React&#39;s class model. You can still explicitly prebind methods in your constructor if you want.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
    <span class="kr">super</span><span class="p">();</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">tick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
  <span class="p">}</span>
  <span class="p">...</span>
<span class="p">}</span>
</code></pre></div>
<p>However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
  <span class="nx">tick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="p">...</span>
  <span class="p">}</span>
  <span class="p">...</span>
<span class="p">}</span>
</code></pre></div><h3><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h3>
<p>Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.</p>
<p>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&#39;t help that effort.</p>
<p>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.</p>
<p>Luckily, if you want to keep using mixins, you can just keep using <code>React.createClass</code>.</p>
<blockquote>
<p><strong>Note:</strong></p>
<p>The classic <code>React.createClass</code> style of creating classes will continue to work just fine.</p>
</blockquote>
<h2><a class="anchor" name="other-languages"></a>Other Languages! <a class="hash-link" href="#other-languages">#</a></h2>
<p>Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.</p>
<p>You can also use CoffeeScript classes:</p>
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">div = </span><span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span> <span class="s">&#39;div&#39;</span>
<span class="k">class</span> <span class="nx">Counter</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span>
  <span class="vi">@propTypes = </span><span class="nv">initialCount: </span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
  <span class="vi">@defaultProps = </span><span class="nv">initialCount: </span><span class="mi">0</span>
  <span class="nv">constructor: </span><span class="nf">(props) -&gt;</span>
    <span class="k">super</span> <span class="nx">props</span>
    <span class="vi">@state = </span><span class="nv">count: </span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span>
  <span class="nv">tick: </span><span class="nf">=&gt;</span>
    <span class="nx">@setState</span> <span class="nv">count: </span><span class="nx">@state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span>
  <span class="nv">render: </span><span class="nf">-&gt;</span>
    <span class="nx">div</span> <span class="nv">onClick: </span><span class="nx">@tick</span><span class="p">,</span>
      <span class="s">&#39;Clicks: &#39;</span>
      <span class="nx">@state</span><span class="p">.</span><span class="nx">count</span>
</code></pre></div>
<p>You can even use the old ES3 module pattern if you want:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">(</span><span class="nx">initialProps</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">{</span>
    <span class="nx">state</span><span class="o">:</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">initialProps</span><span class="p">.</span><span class="nx">initialValue</span> <span class="p">},</span>
    <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span> <span class="o">/&gt;</span>
    <span class="p">}</span>
  <span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
      </div>
      <div class="post-list-item">
  <a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a>
<p class="meta">
  December 19, 2014
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
<div class="post">
  <p>Today I&#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.</p>
<p>I&#39;m really excited about this and I hope you are too! The full announcement is below:</p>
<p>The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!</p>
<p>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; 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 <a href="http://conf.reactjs.com/">website</a> and <a href="/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="/react/blog/2014/11/24/react-js-conf-updates.html">updates</a> on our blog.</p>
<p>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.</p>
<p>To apply for the scholarship, please visit the Application Page: <a href="https://www.surveymonkey.com/s/XVJGK6R">https://www.surveymonkey.com/s/XVJGK6R</a></p>
<h2><a class="anchor" name="award-includes"></a>Award Includes <a class="hash-link" href="#award-includes">#</a></h2>
<li>Paid registration fee for the React.js Conf January 28 &amp; 29th at Facebook’s Headquarters in Menlo Park, CA</li>
<li>Paid travel and lodging expenses</li>
<li>Additional $200 meal stipend</li>
<h2><a class="anchor" name="important-dates"></a>Important Dates <a class="hash-link" href="#important-dates">#</a></h2>
<li>Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full</li>
<li>Friday, January 9, 2015: Award recipients will be notified by email of their acceptance</li>
<li>Wednesday &amp; Thursday, January 28 &amp; 29, 2015: React.js Conf</li>
<h2><a class="anchor" name="eligibility"></a>Eligibility <a class="hash-link" href="#eligibility">#</a></h2>
<li>Must currently be studying or working in Computer Science or a related field</li>
<li>International applicants are welcome, but you will be responsible for securing your own visa to attend the conference</li>
<li>You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park</li>
      </div>
      <div class="post-list-item">
  <a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a>
<p class="meta">
  December 18, 2014
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
<div class="post">
  <p>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.</p>
<p>You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of <a href="http://flowtype.org/">Flow</a>, with only transform-related changes. Namely we added a flag to the <code>jsx</code> executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn&#39;t update for that release, you can safely skip it and move directly to v0.12.2.</p>
<p>The release is available for download from the CDN:</p>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.12.2.js">https://fb.me/react-0.12.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.12.2.min.js">https://fb.me/react-0.12.2.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.12.2.js">https://fb.me/react-with-addons-0.12.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.12.2.min.js">https://fb.me/react-with-addons-0.12.2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.12.2.js">https://fb.me/JSXTransformer-0.12.2.js</a></li>
<p>We&#39;ve also published version <code>0.12.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower. <code>0.12.1</code> is also available in the same locations if need those.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3>
<li>Added support for more HTML attributes: <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code>, <code>marginHeight</code>, <code>marginWidth</code></li>
<li>Added <code>strokeOpacity</code> to the list of unitless CSS properties</li>
<li>Removed trailing commas (allows npm module to be bundled and used in IE8)</li>
<li>Fixed bug resulting in error when passing <code>undefined</code> to <code>React.createElement</code> - now there is a useful warning</li>
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
<li>JSX-related transforms now always use double quotes for props and <code>displayName</code></li>
      </div>
    <div class="pagination">
        <a href="/react/blog/page7/" class="previous">
          &laquo; Previous Page
        </a>
        <a href="/react/blog/page9/" class="next">
          Next Page &raquo;
        </a>
    <footer class="wrap">
      <div class="left">
        A Facebook &amp; Instagram collaboration.<br>
        <a href="/react/acknowledgements.html">Acknowledgements</a>
      </div>
      <div class="right">
        &copy; 2013&ndash;2016 Facebook Inc.<br>
        Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
      </div>
    </footer>
  <div id="fb-root"></div>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>
FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
