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
043584fc6c4da8e0ac3edaeb0d07c6897331fe87
react/feed.xml
T
Paul O’Shannessy 043584fc6c Update for relay blog post
2015-03-19 13:07:03 -07:00

1130 lines
168 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>Building The Facebook News Feed With Relay</title>
<description>&lt;p&gt;At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post we&amp;#39;ll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven&amp;#39;t already we recommend reading &lt;a href=&quot;http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html&quot;&gt;our introductory blog post&lt;/a&gt; or watching &lt;a href=&quot;https://www.youtube.com/watch?v=9sc8Pyc51uU&quot;&gt;the conference talk&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;We&amp;#39;re working hard to prepare GraphQL and Relay for public release. In the meantime, we&amp;#39;ll continue to provide information about what you can expect.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-relay-architecture&quot;&gt;&lt;/a&gt;The Relay Architecture &lt;a class=&quot;hash-link&quot; href=&quot;#the-relay-architecture&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The diagram below shows the main parts of the Relay architecture on the client and the server:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-architecture.png&quot; alt=&quot;Relay Architecture&quot; width=&quot;650&quot; /&gt;&lt;/p&gt;
&lt;p&gt;The main pieces are as follows:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Relay Components: React components annotated with declarative data descriptions.&lt;/li&gt;
&lt;li&gt;Actions: Descriptions of how data should change in response to user actions.&lt;/li&gt;
&lt;li&gt;Relay Store: A client-side data store that is fully managed by the framework.&lt;/li&gt;
&lt;li&gt;Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This post will focus on &lt;strong&gt;Relay components&lt;/strong&gt; that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;a-relay-application&quot;&gt;&lt;/a&gt;A Relay Application &lt;a class=&quot;hash-link&quot; href=&quot;#a-relay-application&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To see how components work and can be composed, let&amp;#39;s implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; that renders a list of &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; items. We&amp;#39;ll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/sample-newsfeed.png&quot; alt=&quot;Sample News Feed&quot; width=&quot;360&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-ltstorygt-begins&quot;&gt;&lt;/a&gt;The &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; Begins &lt;a class=&quot;hash-link&quot; href=&quot;#the-ltstorygt-begins&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;The first step is a React &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; component that accepts a &lt;code&gt;story&lt;/code&gt; prop with the story&amp;#39;s text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.&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;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;story&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;story&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;View&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Image&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;uri&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;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;author&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;profile_picture&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;uri&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Text&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;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;author&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;/Text&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Text&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;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Text&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/View&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;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;whats-the-ltstorygt&quot;&gt;&lt;/a&gt;What&amp;#39;s the &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;? &lt;a class=&quot;hash-link&quot; href=&quot;#whats-the-ltstorygt&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):&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;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&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;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&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;queries&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;story&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* TODO */&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;Before adding the GraphQL query, let&amp;#39;s look at the component hierarchy this creates:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-containers.png&quot; width=&quot;397&quot; alt=&quot;React Container Data Flow&quot; /&gt;&lt;/p&gt;
&lt;p&gt;Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we&amp;#39;ll add a GraphQL query for &lt;code&gt;story&lt;/code&gt;:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Story.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Story&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;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&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;queries&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;story&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;graphql&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;author&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;nx&quot;&gt;profile_picture&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;uri&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;text&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;err&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;Queries use ES6 template literals tagged with the &lt;code&gt;graphql&lt;/code&gt; function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query&amp;#39;s structure closely matches the object structure that we expected in &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;&amp;#39;s render function.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ltstorygts-on-demand&quot;&gt;&lt;/a&gt;&lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;s on Demand &lt;a class=&quot;hash-link&quot; href=&quot;#ltstorygts-on-demand&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We can render a Relay component by providing Relay with the component (&lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt;) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then &lt;code&gt;render()&lt;/code&gt; the component. The value of &lt;code&gt;props.story&lt;/code&gt; will be a plain JavaScript object such as the following:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;author&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;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;Greg&amp;quot;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;profile_picture&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;uri&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;https://…&amp;quot;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;text&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s2&quot;&gt;&amp;quot;The first Relay blog post is up…&amp;quot;&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;Relay guarantees that all data required to render a component will be available before it is rendered. This means that &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; does not need to handle a loading state; the &lt;code&gt;story&lt;/code&gt; is &lt;em&gt;guaranteed&lt;/em&gt; to be available before &lt;code&gt;render()&lt;/code&gt; is called. We have found that this invariant simplifies our application code &lt;em&gt;and&lt;/em&gt; improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.&lt;/p&gt;
&lt;p&gt;The diagram below shows how Relay containers make data available to our React components:&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/react/img/blog/relay-components/relay-containers-data-flow.png&quot; width=&quot;650&quot; alt=&quot;Relay Container Data Flow&quot; /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;ltnewsfeedgt-worthy&quot;&gt;&lt;/a&gt;&lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; Worthy &lt;a class=&quot;hash-link&quot; href=&quot;#ltnewsfeedgt-worthy&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Now that the &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; is over we can continue with the &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; component. Again, we&amp;#39;ll start with a React version:&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;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&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;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;stories&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;viewer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;stories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;c1&quot;&gt;// `viewer` is the active user&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;View&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;stories&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;story&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;story&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;story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&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;o&quot;&gt;=&amp;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;loadMore&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;Load&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;More&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/Button&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/View&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;loadMore&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;c1&quot;&gt;// TODO: fetch more stories&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;all-the-news-fit-to-be-relayed&quot;&gt;&lt;/a&gt;All the News Fit to be Relayed &lt;a class=&quot;hash-link&quot; href=&quot;#all-the-news-fit-to-be-relayed&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; has two new requirements: it composes &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; and requests more data at runtime.&lt;/p&gt;
&lt;p&gt;Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: &lt;code&gt;${Component.getQuery(&amp;#39;prop&amp;#39;)}&lt;/code&gt;. Pagination can be accomplished with a query parameter, specified with &lt;code&gt;&amp;lt;param&amp;gt;&lt;/code&gt; (as in &lt;code&gt;stories(first: &amp;lt;count&amp;gt;)&lt;/code&gt;):&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&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;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;module&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;exports&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Relay&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createContainer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;NewsFeed&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;queryParams&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;mi&quot;&gt;3&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* default to 3 stories */&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;queries&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;viewer&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;graphql&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;`&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;Viewer&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;stories&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;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;count&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;cm&quot;&gt;/* fetch viewer&amp;#39;s stories */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;edges&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* traverse the graph */&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;node&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;$&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Story&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getQuery&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;story&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)}&lt;/span&gt; &lt;span class=&quot;cm&quot;&gt;/* compose child query */&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;err&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;Whenever &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt; is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the &lt;code&gt;text&lt;/code&gt; and &lt;code&gt;author&lt;/code&gt; data will be fetched for each of the 3 story nodes.&lt;/p&gt;
&lt;p&gt;Query parameters are available to components as &lt;code&gt;props.queryParams&lt;/code&gt; and can be modified with &lt;code&gt;props.setQueryParams(nextParams)&lt;/code&gt;. We can use these to implement pagination:&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;// NewsFeed.react.js&lt;/span&gt;
&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;NewsFeed&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;p&quot;&gt;...&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;loadMore&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// read current params&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&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;queryParams&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;c1&quot;&gt;// update params&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;setQueryParams&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;count&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;5&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Now when &lt;code&gt;loadMore()&lt;/code&gt; is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in &lt;code&gt;props.viewer.stories&lt;/code&gt; and the updated count reflected in &lt;code&gt;props.queryParams.count&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;&lt;br/&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;in-conclusion&quot;&gt;&lt;/a&gt;In Conclusion &lt;a class=&quot;hash-link&quot; href=&quot;#in-conclusion&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we&amp;#39;ve enabled the following benefits:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.&lt;/li&gt;
&lt;li&gt;Trivial pagination with automatic optimizations to fetch only the additional items.&lt;/li&gt;
&lt;li&gt;View composition and reusability, so that &lt;code&gt;&amp;lt;Story&amp;gt;&lt;/code&gt; can be used on its own or within &lt;code&gt;&amp;lt;NewsFeed&amp;gt;&lt;/code&gt;, without any changes to either component.&lt;/li&gt;
&lt;li&gt;Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.&lt;/li&gt;
&lt;li&gt;Exactly &lt;em&gt;zero&lt;/em&gt; lines of imperative data fetching logic. Relay takes full advantage of React&amp;#39;s declarative component model.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;But Relay has many more tricks up its sleeve. For example, it&amp;#39;s built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.&lt;/p&gt;
</description>
<pubDate>2015-03-19T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/19/building-the-facebook-news-feed-with-relay.html</guid>
</item>
<item>
<title>React v0.13.1</title>
<description>&lt;p&gt;It&amp;#39;s been less than a week since we shipped v0.13.0 but it&amp;#39;s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.&lt;/p&gt;
&lt;p&gt;Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren&amp;#39;t on the core team!&lt;/p&gt;
&lt;p&gt;The release is now 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.13.1.js&quot;&gt;http://fb.me/react-0.13.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.13.1.min.js&quot;&gt;http://fb.me/react-0.13.1.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.13.1.js&quot;&gt;http://fb.me/react-with-addons-0.13.1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.13.1.min.js&quot;&gt;http://fb.me/react-with-addons-0.13.1.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.13.1.js&quot;&gt;http://fb.me/JSXTransformer-0.13.1.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.13.1&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;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;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;Don&amp;#39;t throw when rendering empty &lt;code&gt;&amp;lt;select&amp;gt;&lt;/code&gt; elements&lt;/li&gt;
&lt;li&gt;Ensure updating &lt;code&gt;style&lt;/code&gt; works when transitioning from &lt;code&gt;null&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-add-ons&quot;&gt;&lt;/a&gt;React with Add-Ons &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-add-ons&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;&lt;h3&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;/h3&gt;
&lt;ul&gt;
&lt;li&gt;TestUtils: Don&amp;#39;t warn about &lt;code&gt;getDOMNode&lt;/code&gt; for ES6 classes&lt;/li&gt;
&lt;li&gt;TestUtils: Ensure wrapped full page components (&lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt;) are treated as DOM components&lt;/li&gt;
&lt;li&gt;Perf: Stop double-counting DOM components&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;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;Fix option parsing for &lt;code&gt;--non-strict-es6module&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2015-03-16T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/03/16/react-v0.13.1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/16/react-v0.13.1.html</guid>
</item>
<item>
<title>React v0.13</title>
<description>&lt;p&gt;Today, we&amp;#39;re happy to release React v0.13!&lt;/p&gt;
&lt;p&gt;The most notable new feature is &lt;a href=&quot;/react/blog/2015/01/27/react-v0.13.0-beta-1.html&quot;&gt;support for ES6 classes&lt;/a&gt;, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace &lt;code&gt;React.createClass&lt;/code&gt; completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don&amp;#39;t plan to deprecate &lt;code&gt;React.createClass&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We&amp;#39;ve always thought that performance isn&amp;#39;t the most important reason to choose React, but we&amp;#39;re still planning more optimizations to &lt;strong&gt;make React even faster&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we&amp;#39;ve added runtime warnings that fire when props are changed or added between the time an element is created and when it&amp;#39;s rendered. When migrating your code, you may want to use new &lt;code&gt;React.cloneElement&lt;/code&gt; API (which is similar to &lt;code&gt;React.addons.cloneWithProps&lt;/code&gt; but preserves &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;ref&lt;/code&gt; and does not merge &lt;code&gt;style&lt;/code&gt; or &lt;code&gt;className&lt;/code&gt; automatically). For more information about our planned optimizations, see GitHub issues
&lt;a href=&quot;https://github.com/facebook/react/issues/3226&quot;&gt;#3226&lt;/a&gt;,
&lt;a href=&quot;https://github.com/facebook/react/issues/3227&quot;&gt;#3227&lt;/a&gt;,
&lt;a href=&quot;https://github.com/facebook/react/issues/3228&quot;&gt;#3228&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;The release is now 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.13.0.js&quot;&gt;http://fb.me/react-0.13.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.13.0.min.js&quot;&gt;http://fb.me/react-0.13.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.13.0.js&quot;&gt;http://fb.me/react-with-addons-0.13.0.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.13.0.min.js&quot;&gt;http://fb.me/react-with-addons-0.13.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.13.0.js&quot;&gt;http://fb.me/JSXTransformer-0.13.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.13.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;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;Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement&lt;/li&gt;
&lt;li&gt;Mutating &lt;code&gt;props&lt;/code&gt; after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren&amp;#39;t mutated&lt;/li&gt;
&lt;li&gt;Static methods (defined in &lt;code&gt;statics&lt;/code&gt;) are no longer autobound to the component class&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ref&lt;/code&gt; resolution order has changed slightly such that a ref to a component is available immediately after its &lt;code&gt;componentDidMount&lt;/code&gt; method is called; this change should be observable only if your component calls a parent component&amp;#39;s callback within your &lt;code&gt;componentDidMount&lt;/code&gt;, which is an anti-pattern and should be avoided regardless&lt;/li&gt;
&lt;li&gt;Calls to &lt;code&gt;setState&lt;/code&gt; in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;setState&lt;/code&gt; and &lt;code&gt;forceUpdate&lt;/code&gt; on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.&lt;/li&gt;
&lt;li&gt;Access to most internal properties has been completely removed, including &lt;code&gt;this._pendingState&lt;/code&gt; and &lt;code&gt;this._rootNodeID&lt;/code&gt;.&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;Support for using ES6 classes to build React components; see the &lt;a href=&quot;http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html&quot;&gt;v0.13.0 beta 1 notes&lt;/a&gt; for details.&lt;/li&gt;
&lt;li&gt;Added new top-level API &lt;code&gt;React.findDOMNode(component)&lt;/code&gt;, which should be used in place of &lt;code&gt;component.getDOMNode()&lt;/code&gt;. The base class for ES6-based components will not have &lt;code&gt;getDOMNode&lt;/code&gt;. This change will enable some more patterns moving forward.&lt;/li&gt;
&lt;li&gt;Added a new top-level API &lt;code&gt;React.cloneElement(el, props)&lt;/code&gt; for making copies of React elements – see the &lt;a href=&quot;/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement&quot;&gt;v0.13 RC2 notes&lt;/a&gt; for more details.&lt;/li&gt;
&lt;li&gt;New &lt;code&gt;ref&lt;/code&gt; style, allowing a callback to be used in place of a name: &lt;code&gt;&amp;lt;Photo ref={(c) =&amp;gt; this._photo = c} /&amp;gt;&lt;/code&gt; allows you to reference the component with &lt;code&gt;this._photo&lt;/code&gt; (as opposed to &lt;code&gt;ref=&amp;quot;photo&amp;quot;&lt;/code&gt; which gives &lt;code&gt;this.refs.photo&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;this.setState()&lt;/code&gt; can now take a function as the first argument for transactional state updates, such as &lt;code&gt;this.setState((state, props) =&amp;gt; ({count: state.count + 1}));&lt;/code&gt; – this means that you no longer need to use &lt;code&gt;this._pendingState&lt;/code&gt;, which is now gone.&lt;/li&gt;
&lt;li&gt;Support for iterators and immutable-js sequences as children.&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;ComponentClass.type&lt;/code&gt; is deprecated. Just use &lt;code&gt;ComponentClass&lt;/code&gt; (usually as &lt;code&gt;element.type === ComponentClass&lt;/code&gt;).&lt;/li&gt;
&lt;li&gt;Some methods that are available on &lt;code&gt;createClass&lt;/code&gt;-based components are removed or deprecated from ES6 classes (&lt;code&gt;getDOMNode&lt;/code&gt;, &lt;code&gt;replaceState&lt;/code&gt;, &lt;code&gt;isMounted&lt;/code&gt;, &lt;code&gt;setProps&lt;/code&gt;, &lt;code&gt;replaceProps&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-add-ons&quot;&gt;&lt;/a&gt;React with Add-Ons &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-add-ons&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;a href=&quot;/react/docs/create-fragment.html&quot;&gt;&lt;code&gt;React.addons.createFragment&lt;/code&gt; was added&lt;/a&gt; for adding keys to entire sets of children.&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.addons.classSet&lt;/code&gt; is now deprecated. This functionality can be replaced with several freely available modules. &lt;a href=&quot;https://www.npmjs.com/package/classnames&quot;&gt;classnames&lt;/a&gt; is one such module.&lt;/li&gt;
&lt;li&gt;Calls to &lt;code&gt;React.addons.cloneWithProps&lt;/code&gt; can be migrated to use &lt;code&gt;React.cloneElement&lt;/code&gt; instead – make sure to merge &lt;code&gt;style&lt;/code&gt; and &lt;code&gt;className&lt;/code&gt; manually if desired.&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;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;When transforming ES6 syntax, &lt;code&gt;class&lt;/code&gt; methods are no longer enumerable by default, which requires &lt;code&gt;Object.defineProperty&lt;/code&gt;; if you support browsers such as IE8, you can pass &lt;code&gt;--target es3&lt;/code&gt; to mirror the old behavior&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;--target&lt;/code&gt; option is available on the jsx command, allowing users to specify and ECMAScript version to target.
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;es5&lt;/code&gt; is the default.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;es3&lt;/code&gt; restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg &lt;code&gt;this.static&lt;/code&gt; will become &lt;code&gt;this[&amp;#39;static&amp;#39;]&lt;/code&gt; for IE8 compatibility).&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;The transform for the call spread operator has also been enabled.&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;A change was made to how some JSX was parsed, specifically around the use of &lt;code&gt;&amp;gt;&lt;/code&gt; or &lt;code&gt;}&lt;/code&gt; when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The &lt;a href=&quot;https://www.npmjs.com/package/jsx_orphaned_brackets_transformer&quot;&gt;&lt;code&gt;jsx_orphaned_brackets_transformer&lt;/code&gt;&lt;/a&gt; package on npm can be used to find and fix potential issues in your JSX code.&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2015-03-10T00:00:00-07:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/10/react-v0.13.html</guid>
</item>
<item>
<title>Community Round-up #25</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-101&quot;&gt;&lt;/a&gt;React 101 &lt;a class=&quot;hash-link&quot; href=&quot;#react-101&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Interest in React has been exploding recently, so it&amp;#39;s a good time to explore some great recent tutorials and videos that cover getting started.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/rynclark&quot;&gt;Ryan Clark&lt;/a&gt; provides a &lt;a href=&quot;http://ryanclark.me/getting-started-with-react/&quot;&gt;great overview of the basics of React&lt;/a&gt; with the goal of building a really simple dropdown nav.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/FormidableLabs&quot;&gt;Formidable Labs&lt;/a&gt; and &lt;a href=&quot;http://www.meetup.com/seattlejs/&quot;&gt;Seattle JS&lt;/a&gt; recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:&lt;/p&gt;
&lt;iframe width=&quot;650&quot; height=&quot;300&quot; src=&quot;//www.youtube.com/embed/Pd6Ub7Ju2RM&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/aearly&quot;&gt;AEFlash&lt;/a&gt; writes up &lt;a href=&quot;http://aeflash.com/2015-02/react-tips-and-best-practices.html&quot;&gt;some best practices and tips&lt;/a&gt; to help you avoid potential pitfalls when developing with React.&lt;/p&gt;
&lt;p&gt;Black Mutt Media &lt;a href=&quot;http://blackmuttmedia.com/blog/react-tmdb-api/&quot;&gt;takes us through their usage of React&lt;/a&gt; and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.&lt;/p&gt;
&lt;p&gt;Our own &lt;a href=&quot;https://github.com/sebmarkbage&quot;&gt;Sebastian Markbåge&lt;/a&gt; was on the &lt;a href=&quot;http://thewebplatform.libsyn.com/31-building-with-reactjs&quot;&gt;Web Platform Podcast&lt;/a&gt; to have a chat about all aspects of React.&lt;/p&gt;
&lt;iframe style=&quot;border: none&quot; src=&quot;//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/&quot; height=&quot;26&quot; width=&quot;650&quot; scrolling=&quot;no&quot; allowfullscreen=&quot;&quot; webkitallowfullscreen=&quot;&quot; mozallowfullscreen=&quot;&quot; oallowfullscreen=&quot;&quot; msallowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;community-additions&quot;&gt;&lt;/a&gt;Community Additions &lt;a class=&quot;hash-link&quot; href=&quot;#community-additions&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/FormidableLabs&quot;&gt;Formidable Labs&lt;/a&gt; have been busy, as they&amp;#39;ve also&lt;a href=&quot;http://projects.formidablelabs.com/radium/&quot;&gt; just launched Radium&lt;/a&gt;, a React component that provides you with the ability to use inline styles instead of CSS. They&amp;#39;re also &lt;a href=&quot;http://projects.formidablelabs.com/radium-bootstrap/&quot;&gt;looking for some help&lt;/a&gt; contributing to a Radium Bootstrap implementation.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://reactiflux.com/&quot;&gt;Reactiflux.com&lt;/a&gt; is a new Slack community based around (you guessed it!) React, and Flux.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://reactweek.com/&quot;&gt;React Week&lt;/a&gt; is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by &lt;a href=&quot;https://github.com/ryanflorence&quot;&gt;Ryan Florence&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/babel/babel-sublime&quot;&gt;Babel-sublime&lt;/a&gt; is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/reactjs/react-meteor&quot;&gt;react-meteor&lt;/a&gt;, a package that replaces the default templating system of the Meteor platform with React, recently received a big update.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rebuilding-with-react&quot;&gt;&lt;/a&gt;Rebuilding with React &lt;a class=&quot;hash-link&quot; href=&quot;#rebuilding-with-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/rmanalan&quot;&gt;Rich Manalang&lt;/a&gt; from Atlassian &lt;a href=&quot;https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/&quot;&gt;explains why&lt;/a&gt; they rebuilt their HipChat web client from scratch using React, and how they&amp;#39;re already using it to rebuild their native desktop clients.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://twitter.com/andyhillel&quot;&gt;Andrew Hillel&lt;/a&gt; of the BBC gives &lt;a href=&quot;http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d&quot;&gt;an excellent and thorough breakdown&lt;/a&gt; of the stack they used to rebuild their homepage, with React as an integral part of the front-end.&lt;/p&gt;
&lt;p&gt;A team from New Zealand called &lt;a href=&quot;https://atomic.io/&quot;&gt;Atomic&lt;/a&gt; is &lt;a href=&quot;http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/&quot;&gt;building web and mobile prototyping and design tools&lt;/a&gt; entirely in-browser, and as co-founder &lt;a href=&quot;http://twitter.com/darrylgray&quot;&gt;Darryl Gray&lt;/a&gt; says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Polarrco&quot;&gt;Polarr&lt;/a&gt; have rebuilt &lt;a href=&quot;http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here&quot;&gt;their browser-based photo editor&lt;/a&gt; with React.&lt;/p&gt;
&lt;p&gt;&lt;center&gt;&lt;a href=&quot;http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here&quot;&gt;&lt;img src=&quot;/react/img/blog/polarr.jpg&quot;&gt;&lt;/a&gt;&lt;/center&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;its-f8&quot;&gt;&lt;/a&gt;It&amp;#39;s F8! &lt;a class=&quot;hash-link&quot; href=&quot;#its-f8&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;F8 2015 is just around the corner, and you can &lt;a href=&quot;https://www.fbf8.com/stream.html&quot;&gt;sign up for the video streams&lt;/a&gt; in advance because we&amp;#39;re sure to be covering all things React.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;meetups&quot;&gt;&lt;/a&gt;Meetups &lt;a class=&quot;hash-link&quot; href=&quot;#meetups&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;table&gt;&lt;tr&gt;&lt;td width=&quot;50%&quot; valign=&quot;top&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Our &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; meetup is in full effect &lt;a href=&quot;https://twitter.com/hashtag/ReactJS?src=hash&quot;&gt;#ReactJS&lt;/a&gt; &amp;#10;&amp;#10;btw bathroom code is 6012 lol &lt;a href=&quot;http://t.co/7iUpvmm3zz&quot;&gt;pic.twitter.com/7iUpvmm3zz&lt;/a&gt;&lt;/p&gt;&amp;mdash; littleBits (@littleBits) &lt;a href=&quot;https://twitter.com/littleBits/status/570373833028472832&quot;&gt;February 25, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;td width=&quot;50%&quot; valign=&quot;top&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;&lt;a href=&quot;https://twitter.com/yrezgui&quot;&gt;@yrezgui&lt;/a&gt; captivating us with &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; at &lt;a href=&quot;https://twitter.com/DevRocketUK&quot;&gt;@DevRocketUK&lt;/a&gt;. Thanks to the amazing sponsors &lt;a href=&quot;https://twitter.com/makersacademy&quot;&gt;@makersacademy&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/couchbase&quot;&gt;@couchbase&lt;/a&gt;. &lt;a href=&quot;http://t.co/xwA773omky&quot;&gt;pic.twitter.com/xwA773omky&lt;/a&gt;&lt;/p&gt;&amp;mdash; James Nocentini (@jamiltz) &lt;a href=&quot;https://twitter.com/jamiltz/status/570306188577001473&quot;&gt;February 24, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td width=&quot;50%&quot; valign=&quot;top&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Listening to a bunch of very clever geekoids at the &lt;a href=&quot;https://twitter.com/reactjs&quot;&gt;@reactjs&lt;/a&gt; seminar. Nice! &lt;a href=&quot;http://t.co/0TeTOJOerO&quot;&gt;pic.twitter.com/0TeTOJOerO&lt;/a&gt;&lt;/p&gt;&amp;mdash; Nick Middleweek (@nmiddleweek) &lt;a href=&quot;https://twitter.com/nmiddleweek/status/568183658395394049&quot;&gt;February 18, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;td width=&quot;50%&quot; valign=&quot;top&quot;&gt;
&lt;blockquote class=&quot;twitter-tweet&quot; lang=&quot;en&quot;&gt;&lt;p&gt;Watching the &lt;a href=&quot;https://twitter.com/FrontendMasters&quot;&gt;@FrontendMasters&lt;/a&gt; ReactJS workshop! &lt;a href=&quot;http://t.co/YraYIK97Lu&quot;&gt;pic.twitter.com/YraYIK97Lu&lt;/a&gt;&lt;/p&gt;&amp;mdash; ReactJS News (@ReactJSNews) &lt;a href=&quot;https://twitter.com/ReactJSNews/status/566269552112041985&quot;&gt;February 13, 2015&lt;/a&gt;&lt;/blockquote&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</description>
<pubDate>2015-03-04T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/03/04/community-roundup-25.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/04/community-roundup-25.html</guid>
</item>
<item>
<title>React v0.13 RC2</title>
<description>&lt;p&gt;Thanks to everybody who has already been testing the release candidate. We&amp;#39;ve received some good feedback and as a result we&amp;#39;re going to do a second release candidate. The changes are minimal. We haven&amp;#39;t changed the behavior of any APIs we exposed in the previous release candidate. Here&amp;#39;s a summary of the changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Introduced a new API (&lt;code&gt;React.cloneElement&lt;/code&gt;, see below for details).&lt;/li&gt;
&lt;li&gt;Fixed a bug related to validating &lt;code&gt;propTypes&lt;/code&gt; when using the new &lt;code&gt;React.addons.createFragment&lt;/code&gt; API.&lt;/li&gt;
&lt;li&gt;Improved a couple warning messages.&lt;/li&gt;
&lt;li&gt;Upgraded jstransform and esprima.&lt;/li&gt;
&lt;/ul&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.13.0-rc2.js&quot;&gt;http://fb.me/react-0.13.0-rc2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.13.0-rc2.min.js&quot;&gt;http://fb.me/react-0.13.0-rc2.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.13.0-rc2.js&quot;&gt;http://fb.me/react-with-addons-0.13.0-rc2.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.13.0-rc2.min.js&quot;&gt;http://fb.me/react-with-addons-0.13.0-rc2.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.13.0-rc2.js&quot;&gt;http://fb.me/JSXTransformer-0.13.0-rc2.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;We&amp;#39;ve also published version &lt;code&gt;0.13.0-rc2&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;hr&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react.cloneelement&quot;&gt;&lt;/a&gt;React.cloneElement &lt;a class=&quot;hash-link&quot; href=&quot;#react.cloneelement&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In React v0.13 RC2 we will introduce a new API, similar to &lt;code&gt;React.addons.cloneWithProps&lt;/code&gt;, with this signature:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&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;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Unlike &lt;code&gt;cloneWithProps&lt;/code&gt;, this new function does not have any magic built-in behavior for merging &lt;code&gt;style&lt;/code&gt; and &lt;code&gt;className&lt;/code&gt; for the same reason we don&amp;#39;t have that feature from &lt;code&gt;transferPropsTo&lt;/code&gt;. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when &lt;code&gt;style&lt;/code&gt; has a different signature (e.g. in the upcoming React Native).&lt;/p&gt;
&lt;p&gt;&lt;code&gt;React.cloneElement&lt;/code&gt; is &lt;em&gt;almost&lt;/em&gt; equivalent to:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;type&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{...&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element&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;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;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/element.type&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;However, unlike JSX and &lt;code&gt;cloneWithProps&lt;/code&gt;, it also preserves &lt;code&gt;ref&lt;/code&gt;s. This means that if you get a child with a &lt;code&gt;ref&lt;/code&gt; on it, you won&amp;#39;t accidentally steal it from your ancestor. You will get the same &lt;code&gt;ref&lt;/code&gt; attached to your new element.&lt;/p&gt;
&lt;p&gt;One common pattern is to map over your children and add a new prop. There were many issues reported about &lt;code&gt;cloneWithProps&lt;/code&gt; losing the ref, making it harder to reason about your code. Now following the same pattern with &lt;code&gt;cloneElement&lt;/code&gt; will work as expected. For example:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;newChildren&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneElement&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;foo&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;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;blockquote&gt;
&lt;p&gt;Note: &lt;code&gt;React.cloneElement(child, { ref: &amp;#39;newRef&amp;#39; })&lt;/code&gt; &lt;em&gt;DOES&lt;/em&gt; override the &lt;code&gt;ref&lt;/code&gt; so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the &lt;code&gt;ref&lt;/code&gt;. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.&lt;/p&gt;
&lt;p&gt;We plan to eventually deprecate &lt;code&gt;React.addons.cloneWithProps&lt;/code&gt;. We&amp;#39;re not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using &lt;code&gt;React.cloneElement&lt;/code&gt; instead. We&amp;#39;ll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.&lt;/p&gt;
</description>
<pubDate>2015-03-03T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html</guid>
</item>
<item>
<title>React v0.13 RC</title>
<description>&lt;p&gt;Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!&lt;/p&gt;
&lt;p&gt;We&amp;#39;ve talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in &lt;a href=&quot;/react/blog/2015/01/27/react-v0.13.0-beta-1.html&quot;&gt;our beta announcement&lt;/a&gt;. We&amp;#39;re really excited about this! Sebastian also posted earlier this morning about &lt;a href=&quot;/react/blog/2015/02/24/streamlining-react-elements.html&quot;&gt;some of the other changes coming focused around ReactElement&lt;/a&gt;. The changes we&amp;#39;ve been working on there will hopefully enable lots of improvements to performance and developer experience.&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.13.0-rc1.js&quot;&gt;http://fb.me/react-0.13.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-0.13.0-rc1.min.js&quot;&gt;http://fb.me/react-0.13.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.13.0-rc1.js&quot;&gt;http://fb.me/react-with-addons-0.13.0-rc1.js&lt;/a&gt;&lt;br&gt;
Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0.13.0-rc1.min.js&quot;&gt;http://fb.me/react-with-addons-0.13.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.13.0-rc1.js&quot;&gt;http://fb.me/JSXTransformer-0.13.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.13.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;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;Mutating &lt;code&gt;props&lt;/code&gt; after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren&amp;#39;t mutated&lt;/li&gt;
&lt;li&gt;Static methods (defined in &lt;code&gt;statics&lt;/code&gt;) are no longer autobound to the component class&lt;/li&gt;
&lt;li&gt;&lt;code&gt;ref&lt;/code&gt; resolution order has changed slightly such that a ref to a component is available immediately after its &lt;code&gt;componentDidMount&lt;/code&gt; method is called; this change should be observable only if your component calls a parent component&amp;#39;s callback within your &lt;code&gt;componentDidMount&lt;/code&gt;, which is an anti-pattern and should be avoided regardless&lt;/li&gt;
&lt;li&gt;Calls to &lt;code&gt;setState&lt;/code&gt; in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;setState&lt;/code&gt; and &lt;code&gt;forceUpdate&lt;/code&gt; on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.&lt;/li&gt;
&lt;li&gt;Access to most internal properties has been completely removed, including &lt;code&gt;this._pendingState&lt;/code&gt; and &lt;code&gt;this._rootNodeID&lt;/code&gt;.&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;Support for using ES6 classes to build React components; see the &lt;a href=&quot;http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html&quot;&gt;v0.13.0 beta 1 notes&lt;/a&gt; for details&lt;/li&gt;
&lt;li&gt;Added new top-level API &lt;code&gt;React.findDOMNode(component)&lt;/code&gt;, which should be used in place of &lt;code&gt;component.getDOMNode()&lt;/code&gt;. The base class for ES6-based components will not have &lt;code&gt;getDOMNode&lt;/code&gt;. This change will enable some more patterns moving forward.&lt;/li&gt;
&lt;li&gt;New &lt;code&gt;ref&lt;/code&gt; style, allowing a callback to be used in place of a name: &lt;code&gt;&amp;lt;Photo ref={(c) =&amp;gt; this._photo = c} /&amp;gt;&lt;/code&gt; allows you to reference the component with &lt;code&gt;this._photo&lt;/code&gt; (as opposed to &lt;code&gt;ref=&amp;quot;photo&amp;quot;&lt;/code&gt; which gives &lt;code&gt;this.refs.photo&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;this.setState()&lt;/code&gt; can now take a function as the first argument for transactional state updates, such as &lt;code&gt;this.setState((state, props) =&amp;gt; ({count: state.count + 1}));&lt;/code&gt; -- this means that you no longer need to use &lt;code&gt;this._pendingState&lt;/code&gt;, which is now gone.&lt;/li&gt;
&lt;li&gt;Support for iterators and immutable-js sequences as children&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;ComponentClass.type&lt;/code&gt; is deprecated. Just use &lt;code&gt;ComponentClass&lt;/code&gt; (usually as &lt;code&gt;element.type === ComponentClass&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;Some methods that are available on &lt;code&gt;createClass&lt;/code&gt;-based components are removed or deprecated from ES6 classes (for example, &lt;code&gt;getDOMNode&lt;/code&gt;, &lt;code&gt;setProps&lt;/code&gt;, &lt;code&gt;replaceState&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-with-add-ons&quot;&gt;&lt;/a&gt;React with Add-Ons &lt;a class=&quot;hash-link&quot; href=&quot;#react-with-add-ons&quot;&gt;#&lt;/a&gt;&lt;/h3&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.addons.classSet&lt;/code&gt; is now deprecated. This functionality can be replaced with several freely available modules. &lt;a href=&quot;https://www.npmjs.com/package/classnames&quot;&gt;classnames&lt;/a&gt; is one such module.&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;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;When transforming ES6 syntax, &lt;code&gt;class&lt;/code&gt; methods are no longer enumerable by default, which requires &lt;code&gt;Object.defineProperty&lt;/code&gt;; if you support browsers such as IE8, you can pass &lt;code&gt;--target es3&lt;/code&gt; to mirror the old behavior&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;--target&lt;/code&gt; option is available on the jsx command, allowing users to specify and ECMAScript version to target.
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;es5&lt;/code&gt; is the default.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;es3&lt;/code&gt; restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg &lt;code&gt;this.static&lt;/code&gt; will become &lt;code&gt;this[&amp;#39;static&amp;#39;]&lt;/code&gt; for IE8 compatibility).&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;The transform for the call spread operator has also been enabled.&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;A change was made to how some JSX was parsed, specifically around the use of &lt;code&gt;&amp;gt;&lt;/code&gt; or &lt;code&gt;}&lt;/code&gt; when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.&lt;/li&gt;
&lt;/ul&gt;
</description>
<pubDate>2015-02-24T14:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/02/24/react-v0.13-rc1.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/02/24/react-v0.13-rc1.html</guid>
</item>
<item>
<title>Streamlining React Elements</title>
<description>&lt;p&gt;React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we&amp;#39;re adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.&lt;/p&gt;
&lt;p&gt;If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;immutable-props&quot;&gt;&lt;/a&gt;Immutable Props &lt;a class=&quot;hash-link&quot; href=&quot;#immutable-props&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In React 0.12, the props object was mutable. It allows you to do patterns like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Foo&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bar&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;false&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;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;shouldUseFoo&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;element&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;foo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;element&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;bar&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;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The problem is that we don’t have a convenient way to tell when you’re done mutating.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-mutating-props-you-dont-own&quot;&gt;&lt;/a&gt;Problem: Mutating Props You Don’t Own &lt;a class=&quot;hash-link&quot; href=&quot;#problem-mutating-props-you-dont-own&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element&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;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;element&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;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;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element&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 take a ReactElement through &lt;code&gt;props.child&lt;/code&gt; and mutate its property before rendering it. If this component&amp;#39;s state updates, this render function won&amp;#39;t actually get a new ReactElement in &lt;code&gt;props.child&lt;/code&gt;. It will be the same one. You&amp;#39;re mutating the same props.&lt;/p&gt;
&lt;p&gt;You could imagine that this would work. However, this disables the ability for any component to use &lt;code&gt;shouldComponentUpdate&lt;/code&gt;. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn&amp;#39;t even work in this case. The change will never propagate down to the DOM except the first time.&lt;/p&gt;
&lt;p&gt;Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.&lt;/p&gt;
&lt;p&gt;It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-too-late-validation&quot;&gt;&lt;/a&gt;Problem: Too Late Validation &lt;a class=&quot;hash-link&quot; href=&quot;#problem-too-late-validation&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.&lt;/p&gt;
&lt;p&gt;The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-immutable-props&quot;&gt;&lt;/a&gt;Solution: Immutable Props &lt;a class=&quot;hash-link&quot; href=&quot;#solution-immutable-props&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate &lt;code&gt;element.props&lt;/code&gt; after this point.&lt;/p&gt;
&lt;p&gt;You can generally refactor these pattern to simply use two different JSX calls:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&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;shouldUseFoo&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;Foo&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;foo&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;mi&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bar&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;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;k&quot;&gt;else&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;Foo&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bar&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;kc&quot;&gt;false&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;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;bar&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;};&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;shouldUseFoo&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;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;foo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;mi&quot;&gt;10&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;bar&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;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;Foo&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;It is still OK to do deep mutations of objects. E.g:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&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;Foo&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;nestedObject&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;myModel&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;In this case it&amp;#39;s still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we&amp;#39;re only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-early-proptype-warnings&quot;&gt;&lt;/a&gt;Solution: Early PropType Warnings &lt;a class=&quot;hash-link&quot; href=&quot;#solution-early-proptype-warnings&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.&lt;/p&gt;
&lt;p&gt;Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element1&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Foo&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;c1&quot;&gt;// extra prop is optional&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;element2&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;addons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneWithProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;element1&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;extra&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;prop&amp;#39;&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;owner&quot;&gt;&lt;/a&gt;Owner &lt;a class=&quot;hash-link&quot; href=&quot;#owner&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In React each child has both a &amp;quot;parent&amp;quot; and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Foo&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;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;In this example, the owner of the &lt;code&gt;span&lt;/code&gt; is &lt;code&gt;Foo&lt;/code&gt; but the parent is the &lt;code&gt;div&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;There is also an undocumented feature called &amp;quot;context&amp;quot; that also relies on the concept of an “owner” to pass hidden props down the tree.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-the-semantics-are-opaque-and-confusing&quot;&gt;&lt;/a&gt;Problem: The Semantics are Opaque and Confusing &lt;a class=&quot;hash-link&quot; href=&quot;#problem-the-semantics-are-opaque-and-confusing&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;foo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;foo&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;kr&quot;&gt;class&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;nx&quot;&gt;bar&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;input&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;className&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;bar&amp;quot;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;foo&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;These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use &lt;code&gt;React.addons.cloneWithProps&lt;/code&gt;, the owner changes.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-timing-matters&quot;&gt;&lt;/a&gt;Problem: Timing Matters &lt;a class=&quot;hash-link&quot; href=&quot;#problem-timing-matters&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;A&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;B&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;renderer&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;text&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&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;text&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;sr&quot;&gt;/span&amp;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;kr&quot;&gt;class&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;B&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;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;renderer&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;foo&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The owner of the &lt;code&gt;span&lt;/code&gt; is actually &lt;code&gt;B&lt;/code&gt;, not &lt;code&gt;A&lt;/code&gt; because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-it-couples-jsx-to-react&quot;&gt;&lt;/a&gt;Problem: It Couples JSX to React &lt;a class=&quot;hash-link&quot; href=&quot;#problem-it-couples-jsx-to-react&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have &lt;code&gt;React.createElement&lt;/code&gt; in scope is because we depend on internal state of React to capture the current &amp;quot;owner&amp;quot;. Without this, you wouldn’t need to have React in scope.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-make-context-parent-based-instead-of-owner-based&quot;&gt;&lt;/a&gt;Solution: Make Context Parent-Based Instead of Owner-Based &lt;a class=&quot;hash-link&quot; href=&quot;#solution-make-context-parent-based-instead-of-owner-based&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The first thing we’re doing is warning you if you’re using the &amp;quot;owner&amp;quot; feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-remove-the-semantic-implications-of-owner&quot;&gt;&lt;/a&gt;Solution: Remove the Semantic Implications of Owner &lt;a class=&quot;hash-link&quot; href=&quot;#solution-remove-the-semantic-implications-of-owner&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;pending-change-the-refs-semantics&quot;&gt;&lt;/a&gt;Pending: Change the refs Semantics &lt;a class=&quot;hash-link&quot; href=&quot;#pending-change-the-refs-semantics&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Refs are still based on &amp;quot;owner&amp;quot;. We haven’t fully solved this special case just yet.&lt;/p&gt;
&lt;p&gt;In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;keyed-objects-as-maps&quot;&gt;&lt;/a&gt;Keyed Objects as Maps &lt;a class=&quot;hash-link&quot; href=&quot;#keyed-objects-as-maps&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;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;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&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;b&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&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;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-relies-on-enumeration-order&quot;&gt;&lt;/a&gt;Problem: Relies on Enumeration Order &lt;a class=&quot;hash-link&quot; href=&quot;#problem-relies-on-enumeration-order&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-using-objects-as-maps-is-bad&quot;&gt;&lt;/a&gt;Problem: Using Objects as Maps is Bad &lt;a class=&quot;hash-link&quot; href=&quot;#problem-using-objects-as-maps-is-bad&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.&lt;/p&gt;
&lt;p&gt;More importantly, this can have important security implications. For example this has a potential security problem:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{};&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;forEach&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;]&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&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;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Imagine if &lt;code&gt;item.title === &amp;#39;__proto__&amp;#39;&lt;/code&gt; for example.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;problem-cant-be-differentiated-from-arbitrary-objects&quot;&gt;&lt;/a&gt;Problem: Can’t be Differentiated from Arbitrary Objects &lt;a class=&quot;hash-link&quot; href=&quot;#problem-cant-be-differentiated-from-arbitrary-objects&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.&lt;/p&gt;
&lt;p&gt;To differentiate ReactElements from one of these objects, we have to tag them with &lt;code&gt;_isReactElement&lt;/code&gt;. This is another issue preventing us from inlining ReactElements as simple object literals.&lt;/p&gt;
&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-just-use-an-array-and-key&quot;&gt;&lt;/a&gt;Solution: Just use an Array and key={…} &lt;a class=&quot;hash-link&quot; href=&quot;#solution-just-use-an-array-and-key&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Most of the time you can just use an array with keyed ReactElements.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;items&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&amp;gt;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;item&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3&gt;&lt;a class=&quot;anchor&quot; name=&quot;solution-react.addons.createfragment&quot;&gt;&lt;/a&gt;Solution: React.addons.createFragment &lt;a class=&quot;hash-link&quot; href=&quot;#solution-react.addons.createfragment&quot;&gt;#&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to &lt;code&gt;React.addons&lt;/code&gt; called &lt;code&gt;createFragment()&lt;/code&gt;. This accepts a keyed object and returns an opaque type.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;addons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createFragment&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;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;div&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;b&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;children&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;})}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.&lt;/p&gt;
&lt;p&gt;Note: This will still not be valid as the direct return value of &lt;code&gt;render()&lt;/code&gt;. Unfortunately, they still need to be wrapped in a &lt;code&gt;&amp;lt;div /&amp;gt;&lt;/code&gt; or some other element.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;compiler-optimizations-unlocked&quot;&gt;&lt;/a&gt;Compiler Optimizations: Unlocked! &lt;a class=&quot;hash-link&quot; href=&quot;#compiler-optimizations-unlocked&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and &lt;code&gt;React.createElement/Factory&lt;/code&gt;*!&lt;/p&gt;
&lt;p&gt;See these GitHub Issues for a deep dive into compiler optimizations:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/facebook/react/issues/3226&quot;&gt;Reuse Constant Value Types&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/facebook/react/issues/3227&quot;&gt;Tagging ReactElements&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/facebook/react/issues/3228&quot;&gt;Inline ReactElements&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rationale&quot;&gt;&lt;/a&gt;Rationale &lt;a class=&quot;hash-link&quot; href=&quot;#rationale&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.&lt;/p&gt;
&lt;p&gt;As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.&lt;/p&gt;
</description>
<pubDate>2015-02-24T11:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html</guid>
</item>
<item>
<title>Introducing Relay and GraphQL</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;data-fetching-for-react-applications&quot;&gt;&lt;/a&gt;Data fetching for React applications &lt;a class=&quot;hash-link&quot; href=&quot;#data-fetching-for-react-applications&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;There&amp;#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 &lt;a href=&quot;http://conf.reactjs.com/&quot;&gt;React.js Conf&lt;/a&gt; we announced two projects we&amp;#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.&lt;/p&gt;
&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/9sc8Pyc51uU&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;The two projects &amp;mdash; Relay and GraphQL &amp;mdash; have been in use in production at Facebook for some time, and we&amp;#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.&lt;/p&gt;
&lt;script async class=&quot;speakerdeck-embed&quot; data-id=&quot;7af7c2f33bf9451a892dcd91de55b7c2&quot; data-ratio=&quot;1.29456384323641&quot; src=&quot;//speakerdeck.com/assets/embed.js&quot;&gt;&lt;/script&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;what-is-relay&quot;&gt;&lt;/a&gt;What is Relay? &lt;a class=&quot;hash-link&quot; href=&quot;#what-is-relay&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;this.props&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;what-is-graphql&quot;&gt;&lt;/a&gt;What is GraphQL? &lt;a class=&quot;hash-link&quot; href=&quot;#what-is-graphql&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It&amp;#39;s been in production use in Facebook&amp;#39;s native apps for several years.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;the-value-proposition&quot;&gt;&lt;/a&gt;The value proposition &lt;a class=&quot;hash-link&quot; href=&quot;#the-value-proposition&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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&amp;#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.&lt;/p&gt;
&lt;p&gt;Co-location leads developers to fall into the &amp;quot;pit of success&amp;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&amp;#39;t try to render missing data and blow up at runtime).&lt;/p&gt;
&lt;p&gt;Relay provides a predictable environment for developers by maintaining an invariant: a component won&amp;#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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;By handling all data-fetching via a single abstraction, we&amp;#39;re able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Performance:&lt;/strong&gt; 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 &amp;quot;in flight&amp;quot;, so queries can be automatically de-duplicated and the minimal queries can be produced.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Subscriptions:&lt;/strong&gt; 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Common patterns:&lt;/strong&gt; We can make common patterns easy. Pagination is the example that &lt;a href=&quot;https://twitter.com/jingc&quot;&gt;Jing&lt;/a&gt; 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Simplified server implementation:&lt;/strong&gt; 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Uniform mutations:&lt;/strong&gt; 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&amp;#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 &amp;quot;optimistic&amp;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.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;how-does-it-relate-to-flux&quot;&gt;&lt;/a&gt;How does it relate to Flux? &lt;a class=&quot;hash-link&quot; href=&quot;#how-does-it-relate-to-flux&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;open-source-plans&quot;&gt;&lt;/a&gt;Open source plans &lt;a class=&quot;hash-link&quot; href=&quot;#open-source-plans&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We&amp;#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).&lt;/p&gt;
&lt;p&gt;In the meantime, we&amp;#39;ll be providing more and more information in the form of blog posts (and in &lt;a href=&quot;https://gist.github.com/wincent/598fa75e22bdfa44cf47&quot;&gt;other channels&lt;/a&gt;). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.&lt;/p&gt;
&lt;p&gt;Watch this space!&lt;/p&gt;
</description>
<pubDate>2015-02-20T00:00:00-08:00</pubDate>
<link>http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html</link>
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html</guid>
</item>
<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 of &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;(props) -&amp;gt;&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;super&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;props&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;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;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;/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>
</channel>
</rss>
Reference in New Issue View Git Blame Copy Permalink