mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Travis CI
677 lines
94 KiB
XML
677 lines
94 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||
<channel>
|
||
<title>React</title>
|
||
<description>A JavaScript library for building user interfaces</description>
|
||
<link>http://facebook.github.io/react</link>
|
||
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
|
||
|
||
<item>
|
||
<title>React v0.13.2</title>
|
||
<description><p>Yesterday Vjeux and team <a href="/react/blog/2015/04/17/react-native-v0.4.html">shipped React Native v0.4</a>. Those of us working on the web team couldn&#39;t just be shown up like that so we&#39;re shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.</p>
|
||
|
||
<p>The release is now available for download:</p>
|
||
|
||
<ul>
|
||
<li><strong>React</strong><br>
|
||
Dev build with warnings: <a href="https://fb.me/react-0.13.2.js">https://fb.me/react-0.13.2.js</a><br>
|
||
Minified build for production: <a href="https://fb.me/react-0.13.2.min.js">https://fb.me/react-0.13.2.min.js</a><br></li>
|
||
<li><strong>React with Add-Ons</strong><br>
|
||
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.2.js">https://fb.me/react-with-addons-0.13.2.js</a><br>
|
||
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.2.min.js">https://fb.me/react-with-addons-0.13.2.min.js</a><br></li>
|
||
<li><strong>In-Browser JSX transformer</strong><br>
|
||
<a href="https://fb.me/JSXTransformer-0.13.2.js">https://fb.me/JSXTransformer-0.13.2.js</a></li>
|
||
</ul>
|
||
|
||
<p>We&#39;ve also published version <code>0.13.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||
|
||
<hr>
|
||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li>Added <code>strokeDashoffset</code>, <code>flexPositive</code>, <code>flexNegative</code> to the list of unitless CSS properties</li>
|
||
<li>Added support for more DOM properties:
|
||
|
||
<ul>
|
||
<li><code>scoped</code> - for <code>&lt;style&gt;</code> elements</li>
|
||
<li><code>high</code>, <code>low</code>, <code>optimum</code> - for <code>&lt;meter&gt;</code> elements</li>
|
||
<li><code>unselectable</code> - IE-specific property to prevent user selection</li>
|
||
</ul></li>
|
||
</ul>
|
||
<h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||
<ul>
|
||
<li>Fixed a case where re-rendering after rendering null didn&#39;t properly pass context</li>
|
||
<li>Fixed a case where re-rendering after rendering with <code>style={null}</code> didn&#39;t properly update <code>style</code></li>
|
||
<li>Update <code>uglify</code> dependency to prevent a bug in IE8</li>
|
||
<li>Improved warnings</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||
<ul>
|
||
<li>Immutabilty Helpers: Ensure it supports <code>hasOwnProperty</code> as an object key</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
|
||
<ul>
|
||
<li>Improve documentation for new options</li>
|
||
</ul>
|
||
</description>
|
||
<pubDate>2015-04-18T00:00:00-07:00</pubDate>
|
||
<link>http://facebook.github.io/react/blog/2015/04/18/react-v0.13.2.html</link>
|
||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/04/18/react-v0.13.2.html</guid>
|
||
</item>
|
||
|
||
<item>
|
||
<title>React Native v0.4</title>
|
||
<description><p>It&#39;s been three weeks since we open sourced React Native and there&#39;s been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus <a href="http://react.parts/native-ios">35 plugins</a> and <a href="http://herman.asia/building-a-flashcard-app-with-react-native">1 app in the app store</a>! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!</p>
|
||
|
||
<p>I&#39;d especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests</p>
|
||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2>
|
||
<p>The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here&#39;s a high level summary of what&#39;s happened since we open sourced:</p>
|
||
|
||
<ul>
|
||
<li><strong>Error messages and documentation</strong>: We want React Native to be the absolute best developer experience for building mobile apps. We&#39;ve added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.</li>
|
||
<li><strong>NPM modules compatibility</strong>: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn&#39;t work out of the box, please open up an issue.</li>
|
||
<li><strong>Infrastructure</strong>: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.</li>
|
||
<li><strong>Components</strong>: The API for a lot of UI components and APIs, especially the ones we&#39;re not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.</li>
|
||
<li><strong>Tests</strong>: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it&#39;s going to become harder and harder to do so.</li>
|
||
<li><strong>Patent Grant</strong>: Many of you had concerns and questions around the PATENTS file. We pushed <a href="https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/">a new version of the grant</a>.</li>
|
||
<li><strong>Per commit history</strong>: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.</li>
|
||
</ul>
|
||
<h2><a class="anchor" name="where-are-we-going"></a>Where are we going? <a class="hash-link" href="#where-are-we-going">#</a></h2>
|
||
<p>In addition to supporting pull requests, issues, and general improvements, we&#39;re also working hard on our internal React Native integrations and on React Native for Android.</p>
|
||
</description>
|
||
<pubDate>2015-04-17T00:00:00-07:00</pubDate>
|
||
<link>http://facebook.github.io/react/blog/2015/04/17/react-native-v0.4.html</link>
|
||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/04/17/react-native-v0.4.html</guid>
|
||
</item>
|
||
|
||
<item>
|
||
<title>Community Round-up #26</title>
|
||
<description><p>We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!</p>
|
||
|
||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
|
||
<h2><a class="anchor" name="when-is-react-native-android-coming"></a>When is React Native Android coming? <a class="hash-link" href="#when-is-react-native-android-coming">#</a></h2>
|
||
<p><strong>Give us 6 months</strong>. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn&#39;t been shipped to any users yet. There&#39;s a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.</p>
|
||
|
||
<iframe width="560" height="315" src="https://www.youtube.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
|
||
<h2><a class="anchor" name="ray-wenderlich---property-finder"></a>Ray Wenderlich - Property Finder <a class="hash-link" href="#ray-wenderlich---property-finder">#</a></h2>
|
||
<p>If you are getting started with React Native, you should absolutely <a href="http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript">use this tutorial</a> from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.</p>
|
||
|
||
<p><center>
|
||
<a href="http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript"><img src="/react/img/blog/property-finder.png" alt=""></a>
|
||
</center></p>
|
||
|
||
<p>Colin also <a href="http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html">blogged about his experience using React Native</a> for a few weeks and gives his thoughts on why you would or wouldn&#39;t use it.</p>
|
||
<h2><a class="anchor" name="the-changelog"></a>The Changelog <a class="hash-link" href="#the-changelog">#</a></h2>
|
||
<p>Spencer Ahrens and I had the great pleasure to talk about React Native on <a href="https://thechangelog.com/149/">The Changelog</a> podcast. It was really fun to chat for an hour, I hope that you&#39;ll enjoy listening to it. :)</p>
|
||
|
||
<p><audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio></p>
|
||
<h2><a class="anchor" name="hacker-news"></a>Hacker News <a class="hash-link" href="#hacker-news">#</a></h2>
|
||
<p>Less than 24 hours after React Native was open sourced, Simarpreet Singh built an <a href="https://github.com/iSimar/HackerNews-React-Native">Hacker News reader app from scratch</a>. It&#39;s unbelievable how fast he was able to pull it off!</p>
|
||
|
||
<p><center>
|
||
<a href="https://github.com/iSimar/HackerNews-React-Native"><img src="/react/img/blog/hacker-news-react-native.png" alt=""></a>
|
||
</center></p>
|
||
<h2><a class="anchor" name="parse--react"></a>Parse + React <a class="hash-link" href="#parse--react">#</a></h2>
|
||
<p>There&#39;s a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don&#39;t have DOM dependencies. Parse is a great example; you can <code>npm install parse</code> on your React Native project and it&#39;ll work as is. :) We still have <a href="https://github.com/facebook/react-native/issues/406">a</a> <a href="https://github.com/facebook/react-native/issues/370">few</a> <a href="https://github.com/facebook/react-native/issues/316">issues</a> to solve; please create an issue if your favorite library doesn&#39;t work out of the box.</p>
|
||
|
||
<p><center>
|
||
<a href="http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/"><img src="/react/img/blog/parse-react.jpg" alt=""></a>
|
||
</center></p>
|
||
<h2><a class="anchor" name="tcomb-form-native"></a>tcomb-form-native <a class="hash-link" href="#tcomb-form-native">#</a></h2>
|
||
<p>Giulio Canti is the author of the <a href="https://github.com/gcanti/tcomb-form">tcomb-form library</a> for React. He already <a href="https://github.com/gcanti/tcomb-form-native">ported it to React Native</a> and it looks great!</p>
|
||
|
||
<p><center>
|
||
<a href="https://github.com/gcanti/tcomb-form-native"><img src="/react/img/blog/tcomb-react-native.png" alt=""></a>
|
||
</center></p>
|
||
<h2><a class="anchor" name="facebook-login-with-react-native"></a>Facebook Login with React Native <a class="hash-link" href="#facebook-login-with-react-native">#</a></h2>
|
||
<p>One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains <a href="http://brentvatne.ca/facebook-login-with-react-native/">how to use Facebook Login with React Native</a>.</p>
|
||
<h2><a class="anchor" name="modus-create"></a>Modus Create <a class="hash-link" href="#modus-create">#</a></h2>
|
||
<p>Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.</p>
|
||
|
||
<p><center>
|
||
<a href="http://moduscreate.com/react-native-has-landed/"><img src="/react/img/blog/modus-create.gif" alt=""></a>
|
||
</center></p>
|
||
<h2><a class="anchor" name="react-native-with-babel-and-webpack"></a>React Native with Babel and Webpack <a class="hash-link" href="#react-native-with-babel-and-webpack">#</a></h2>
|
||
<p>React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as Webpack and Babel. The main reason for this is performance – we couldn&#39;t get those tools to have sub-second reload time on a large codebase.</p>
|
||
|
||
<p>Roman Liutikov found a way to <a href="https://github.com/roman01la/react-native-babel">use Webpack and Babel to run on React Native</a>! In the future, we want to work with those projects to provide cleaner extension mechanisms.</p>
|
||
<h2><a class="anchor" name="a-dynamic-crazy-native-mobile-futurepowered-by-javascript"></a>A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript <a class="hash-link" href="#a-dynamic-crazy-native-mobile-futurepowered-by-javascript">#</a></h2>
|
||
<p>Clay Allsopp wrote a post about <a href="https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987">all the crazy things you could do with a JavaScript engine that renders native views</a>. What about native embeds, seamless native browser, native search engine or even app generation...</p>
|
||
<h2><a class="anchor" name="random-tweet"></a>Random Tweet <a class="hash-link" href="#random-tweet">#</a></h2>
|
||
<p>We&#39;ve spent a lot of efforts getting the onboarding as easy as possible and we&#39;re really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!</p>
|
||
|
||
<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience I’ve ever had with a new developer product.</p>&mdash; Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>
|
||
</description>
|
||
<pubDate>2015-03-30T00:00:00-07:00</pubDate>
|
||
<link>http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html</link>
|
||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/30/community-roundup-26.html</guid>
|
||
</item>
|
||
|
||
<item>
|
||
<title>Introducing React Native</title>
|
||
<description><p>In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We&#39;re happy to announce that we&#39;re open-sourcing React Native and you can start building your apps with it today.</p>
|
||
|
||
<p>For more details, see <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">Tom Occhino&#39;s post on the Facebook Engineering blog</a>:</p>
|
||
|
||
<blockquote>
|
||
<p><em>What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.</em></p>
|
||
|
||
<p><em>With a bit of work, we can make it so the exact same React that&#39;s on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components.</em></p>
|
||
|
||
<p><em>It&#39;s worth noting that we&#39;re not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”</em></p>
|
||
</blockquote>
|
||
|
||
<p>To learn more, visit the <a href="http://facebook.github.io/react-native/">React Native website</a>.</p>
|
||
</description>
|
||
<pubDate>2015-03-26T00:00:00-07:00</pubDate>
|
||
<link>http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html</link>
|
||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html</guid>
|
||
</item>
|
||
|
||
<item>
|
||
<title>Building The Facebook News Feed With Relay</title>
|
||
<description><p>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&#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&#39;t already we recommend reading <a href="http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">our introductory blog post</a> or watching <a href="https://www.youtube.com/watch?v=9sc8Pyc51uU">the conference talk</a>.</p>
|
||
|
||
<p>We&#39;re working hard to prepare GraphQL and Relay for public release. In the meantime, we&#39;ll continue to provide information about what you can expect.</p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="the-relay-architecture"></a>The Relay Architecture <a class="hash-link" href="#the-relay-architecture">#</a></h2>
|
||
<p>The diagram below shows the main parts of the Relay architecture on the client and the server:</p>
|
||
|
||
<p><img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" /></p>
|
||
|
||
<p>The main pieces are as follows:</p>
|
||
|
||
<ul>
|
||
<li>Relay Components: React components annotated with declarative data descriptions.</li>
|
||
<li>Actions: Descriptions of how data should change in response to user actions.</li>
|
||
<li>Relay Store: A client-side data store that is fully managed by the framework.</li>
|
||
<li>Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.</li>
|
||
</ul>
|
||
|
||
<p>This post will focus on <strong>Relay components</strong> that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.</p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="a-relay-application"></a>A Relay Application <a class="hash-link" href="#a-relay-application">#</a></h2>
|
||
<p>To see how components work and can be composed, let&#39;s implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a <code>&lt;NewsFeed&gt;</code> that renders a list of <code>&lt;Story&gt;</code> items. We&#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:</p>
|
||
|
||
<p><img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" /></p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="the-ltstorygt-begins"></a>The <code>&lt;Story&gt;</code> Begins <a class="hash-link" href="#the-ltstorygt-begins">#</a></h2>
|
||
<p>The first step is a React <code>&lt;Story&gt;</code> component that accepts a <code>story</code> prop with the story&#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.</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">Story</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="kd">var</span> <span class="nx">story</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">story</span><span class="p">;</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="o">&lt;</span><span class="nx">View</span><span class="o">&gt;</span>
|
||
<span class="o">&lt;</span><span class="nx">Image</span> <span class="nx">uri</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">profile_picture</span><span class="p">.</span><span class="nx">uri</span><span class="p">}</span> <span class="o">/&gt;</span>
|
||
<span class="o">&lt;</span><span class="nx">Text</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
|
||
<span class="o">&lt;</span><span class="nx">Text</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">story</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
|
||
<span class="o">&lt;</span><span class="err">/View&gt;</span>
|
||
<span class="p">);</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Story</span><span class="p">;</span>
|
||
</code></pre></div>
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="whats-the-ltstorygt"></a>What&#39;s the <code>&lt;Story&gt;</code>? <a class="hash-link" href="#whats-the-ltstorygt">#</a></h2>
|
||
<p>Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">Story</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
|
||
|
||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">story</span><span class="o">:</span> <span class="cm">/* TODO */</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
</code></pre></div>
|
||
<p>Before adding the GraphQL query, let&#39;s look at the component hierarchy this creates:</p>
|
||
|
||
<p><img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" /></p>
|
||
|
||
<p>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&#39;ll add a GraphQL query for <code>story</code>:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Story.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">Story</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
|
||
|
||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">Story</span><span class="p">,</span> <span class="p">{</span>
|
||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">story</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||
<span class="nx">Story</span> <span class="p">{</span>
|
||
<span class="nx">author</span> <span class="p">{</span>
|
||
<span class="nx">name</span><span class="p">,</span>
|
||
<span class="nx">profile_picture</span> <span class="p">{</span>
|
||
<span class="nx">uri</span>
|
||
<span class="p">}</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">text</span>
|
||
<span class="p">}</span>
|
||
<span class="err">`</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
</code></pre></div>
|
||
<p>Queries use ES6 template literals tagged with the <code>graphql</code> 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&#39;s structure closely matches the object structure that we expected in <code>&lt;Story&gt;</code>&#39;s render function.</p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="ltstorygts-on-demand"></a><code>&lt;Story&gt;</code>s on Demand <a class="hash-link" href="#ltstorygts-on-demand">#</a></h2>
|
||
<p>We can render a Relay component by providing Relay with the component (<code>&lt;Story&gt;</code>) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then <code>render()</code> the component. The value of <code>props.story</code> will be a plain JavaScript object such as the following:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
|
||
<span class="nx">author</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Greg&quot;</span><span class="p">,</span>
|
||
<span class="nx">profile_picture</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">uri</span><span class="o">:</span> <span class="s2">&quot;https://…&quot;</span>
|
||
<span class="p">}</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;The first Relay blog post is up…&quot;</span>
|
||
<span class="p">}</span>
|
||
</code></pre></div>
|
||
<p>Relay guarantees that all data required to render a component will be available before it is rendered. This means that <code>&lt;Story&gt;</code> does not need to handle a loading state; the <code>story</code> is <em>guaranteed</em> to be available before <code>render()</code> is called. We have found that this invariant simplifies our application code <em>and</em> improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.</p>
|
||
|
||
<p>The diagram below shows how Relay containers make data available to our React components:</p>
|
||
|
||
<p><img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" /></p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="ltnewsfeedgt-worthy"></a><code>&lt;NewsFeed&gt;</code> Worthy <a class="hash-link" href="#ltnewsfeedgt-worthy">#</a></h2>
|
||
<p>Now that the <code>&lt;Story&gt;</code> is over we can continue with the <code>&lt;NewsFeed&gt;</code> component. Again, we&#39;ll start with a React version:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">NewsFeed</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="kd">var</span> <span class="nx">stories</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">viewer</span><span class="p">.</span><span class="nx">stories</span><span class="p">;</span> <span class="c1">// `viewer` is the active user</span>
|
||
<span class="k">return</span> <span class="p">(</span>
|
||
<span class="o">&lt;</span><span class="nx">View</span><span class="o">&gt;</span>
|
||
<span class="p">{</span><span class="nx">stories</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">story</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">Story</span> <span class="nx">story</span><span class="o">=</span><span class="p">{</span><span class="nx">story</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">)}</span>
|
||
<span class="o">&lt;</span><span class="nx">Button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">loadMore</span><span class="p">()}</span><span class="o">&gt;</span><span class="nx">Load</span> <span class="nx">More</span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
|
||
<span class="o">&lt;</span><span class="err">/View&gt;</span>
|
||
<span class="p">);</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// TODO: fetch more stories</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">NewsFeed</span><span class="p">;</span>
|
||
</code></pre></div>
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="all-the-news-fit-to-be-relayed"></a>All the News Fit to be Relayed <a class="hash-link" href="#all-the-news-fit-to-be-relayed">#</a></h2>
|
||
<p><code>&lt;NewsFeed&gt;</code> has two new requirements: it composes <code>&lt;Story&gt;</code> and requests more data at runtime.</p>
|
||
|
||
<p>Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: <code>${Component.getQuery(&#39;prop&#39;)}</code>. Pagination can be accomplished with a query parameter, specified with <code>&lt;param&gt;</code> (as in <code>stories(first: &lt;count&gt;)</code>):</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">NewsFeed</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
|
||
|
||
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Relay</span><span class="p">.</span><span class="nx">createContainer</span><span class="p">(</span><span class="nx">NewsFeed</span><span class="p">,</span> <span class="p">{</span>
|
||
<span class="nx">queryParams</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">count</span><span class="o">:</span> <span class="mi">3</span> <span class="cm">/* default to 3 stories */</span>
|
||
<span class="p">},</span>
|
||
<span class="nx">queries</span><span class="o">:</span> <span class="p">{</span>
|
||
<span class="nx">viewer</span><span class="o">:</span> <span class="nx">graphql</span><span class="err">`</span>
|
||
<span class="nx">Viewer</span> <span class="p">{</span>
|
||
<span class="nx">stories</span><span class="p">(</span><span class="nx">first</span><span class="o">:</span> <span class="o">&lt;</span><span class="nx">count</span><span class="o">&gt;</span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* fetch viewer&#39;s stories */</span>
|
||
<span class="nx">edges</span> <span class="p">{</span> <span class="cm">/* traverse the graph */</span>
|
||
<span class="nx">node</span> <span class="p">{</span>
|
||
<span class="nx">$</span><span class="p">{</span><span class="nx">Story</span><span class="p">.</span><span class="nx">getQuery</span><span class="p">(</span><span class="s1">&#39;story&#39;</span><span class="p">)}</span> <span class="cm">/* compose child query */</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
<span class="err">`</span>
|
||
<span class="p">}</span>
|
||
<span class="p">});</span>
|
||
</code></pre></div>
|
||
<p>Whenever <code>&lt;NewsFeed&gt;</code> is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the <code>text</code> and <code>author</code> data will be fetched for each of the 3 story nodes.</p>
|
||
|
||
<p>Query parameters are available to components as <code>props.queryParams</code> and can be modified with <code>props.setQueryParams(nextParams)</code>. We can use these to implement pagination:</p>
|
||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// NewsFeed.react.js</span>
|
||
<span class="kr">class</span> <span class="nx">NewsFeed</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
||
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span> <span class="p">...</span> <span class="p">}</span>
|
||
|
||
<span class="nx">loadMore</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="c1">// read current params</span>
|
||
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">queryParams</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||
<span class="c1">// update params</span>
|
||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">setQueryParams</span><span class="p">({</span>
|
||
<span class="nx">count</span><span class="o">:</span> <span class="nx">count</span> <span class="o">+</span> <span class="mi">5</span>
|
||
<span class="p">});</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
</code></pre></div>
|
||
<p>Now when <code>loadMore()</code> 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 <code>props.viewer.stories</code> and the updated count reflected in <code>props.queryParams.count</code>.</p>
|
||
|
||
<p><br/></p>
|
||
<h2><a class="anchor" name="in-conclusion"></a>In Conclusion <a class="hash-link" href="#in-conclusion">#</a></h2>
|
||
<p>These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we&#39;ve enabled the following benefits:</p>
|
||
|
||
<ul>
|
||
<li>Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.</li>
|
||
<li>Trivial pagination with automatic optimizations to fetch only the additional items.</li>
|
||
<li>View composition and reusability, so that <code>&lt;Story&gt;</code> can be used on its own or within <code>&lt;NewsFeed&gt;</code>, without any changes to either component.</li>
|
||
<li>Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.</li>
|
||
<li>Exactly <em>zero</em> lines of imperative data fetching logic. Relay takes full advantage of React&#39;s declarative component model.</li>
|
||
</ul>
|
||
|
||
<p>But Relay has many more tricks up its sleeve. For example, it&#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.</p>
|
||
</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><p>It&#39;s been less than a week since we shipped v0.13.0 but it&#39;s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>
|
||
|
||
<p>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&#39;t on the core team!</p>
|
||
|
||
<p>The release is now available for download:</p>
|
||
|
||
<ul>
|
||
<li><strong>React</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-0.13.1.js">http://fb.me/react-0.13.1.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-0.13.1.min.js">http://fb.me/react-0.13.1.min.js</a><br></li>
|
||
<li><strong>React with Add-Ons</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.13.1.js">http://fb.me/react-with-addons-0.13.1.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.1.min.js">http://fb.me/react-with-addons-0.13.1.min.js</a><br></li>
|
||
<li><strong>In-Browser JSX transformer</strong><br>
|
||
<a href="http://fb.me/JSXTransformer-0.13.1.js">http://fb.me/JSXTransformer-0.13.1.js</a></li>
|
||
</ul>
|
||
|
||
<p>We&#39;ve also published version <code>0.13.1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||
|
||
<hr>
|
||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||
<ul>
|
||
<li>Don&#39;t throw when rendering empty <code>&lt;select&gt;</code> elements</li>
|
||
<li>Ensure updating <code>style</code> works when transitioning from <code>null</code></li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h3><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h3>
|
||
<ul>
|
||
<li>TestUtils: Don&#39;t warn about <code>getDOMNode</code> for ES6 classes</li>
|
||
<li>TestUtils: Ensure wrapped full page components (<code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, <code>&lt;body&gt;</code>) are treated as DOM components</li>
|
||
<li>Perf: Stop double-counting DOM components</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="bug-fixes"></a>Bug Fixes <a class="hash-link" href="#bug-fixes">#</a></h4>
|
||
<ul>
|
||
<li>Fix option parsing for <code>--non-strict-es6module</code></li>
|
||
</ul>
|
||
</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><p>Today, we&#39;re happy to release React v0.13!</p>
|
||
|
||
<p>The most notable new feature is <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">support for ES6 classes</a>, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace <code>React.createClass</code> completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don&#39;t plan to deprecate <code>React.createClass</code>.</p>
|
||
|
||
<p>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&#39;ve always thought that performance isn&#39;t the most important reason to choose React, but we&#39;re still planning more optimizations to <strong>make React even faster</strong>.</p>
|
||
|
||
<p>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&#39;ve added runtime warnings that fire when props are changed or added between the time an element is created and when it&#39;s rendered. When migrating your code, you may want to use new <code>React.cloneElement</code> API (which is similar to <code>React.addons.cloneWithProps</code> but preserves <code>key</code> and <code>ref</code> and does not merge <code>style</code> or <code>className</code> automatically). For more information about our planned optimizations, see GitHub issues
|
||
<a href="https://github.com/facebook/react/issues/3226">#3226</a>,
|
||
<a href="https://github.com/facebook/react/issues/3227">#3227</a>,
|
||
<a href="https://github.com/facebook/react/issues/3228">#3228</a>.</p>
|
||
|
||
<p>The release is now available for download:</p>
|
||
|
||
<ul>
|
||
<li><strong>React</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-0.13.0.js">http://fb.me/react-0.13.0.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-0.13.0.min.js">http://fb.me/react-0.13.0.min.js</a><br></li>
|
||
<li><strong>React with Add-Ons</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.13.0.js">http://fb.me/react-with-addons-0.13.0.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0.min.js">http://fb.me/react-with-addons-0.13.0.min.js</a><br></li>
|
||
<li><strong>In-Browser JSX transformer</strong><br>
|
||
<a href="http://fb.me/JSXTransformer-0.13.0.js">http://fb.me/JSXTransformer-0.13.0.js</a></li>
|
||
</ul>
|
||
|
||
<p>We&#39;ve also published version <code>0.13.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||
|
||
<hr>
|
||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>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</li>
|
||
<li>Mutating <code>props</code> 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&#39;t mutated</li>
|
||
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
|
||
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component&#39;s callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
|
||
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
|
||
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
|
||
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li>Support for using ES6 classes to build React components; see the <a href="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details.</li>
|
||
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
|
||
<li>Added a new top-level API <code>React.cloneElement(el, props)</code> for making copies of React elements – see the <a href="/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement">v0.13 RC2 notes</a> for more details.</li>
|
||
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</code> which gives <code>this.refs.photo</code>).</li>
|
||
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) =&gt; ({count: state.count + 1}));</code> – this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
|
||
<li>Support for iterators and immutable-js sequences as children.</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||
<ul>
|
||
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>).</li>
|
||
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (<code>getDOMNode</code>, <code>replaceState</code>, <code>isMounted</code>, <code>setProps</code>, <code>replaceProps</code>).</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li><a href="/react/docs/create-fragment.html"><code>React.addons.createFragment</code> was added</a> for adding keys to entire sets of children.</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||
<ul>
|
||
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
|
||
<li>Calls to <code>React.addons.cloneWithProps</code> can be migrated to use <code>React.cloneElement</code> instead – make sure to merge <code>style</code> and <code>className</code> manually if desired.</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.
|
||
|
||
<ul>
|
||
<li><code>es5</code> is the default.</li>
|
||
<li><code>es3</code> restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this[&#39;static&#39;]</code> for IE8 compatibility).</li>
|
||
</ul></li>
|
||
<li>The transform for the call spread operator has also been enabled.</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>A change was made to how some JSX was parsed, specifically around the use of <code>&gt;</code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The <a href="https://www.npmjs.com/package/jsx_orphaned_brackets_transformer"><code>jsx_orphaned_brackets_transformer</code></a> package on npm can be used to find and fix potential issues in your JSX code.</li>
|
||
</ul>
|
||
</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><h2><a class="anchor" name="react-101"></a>React 101 <a class="hash-link" href="#react-101">#</a></h2>
|
||
<p>Interest in React has been exploding recently, so it&#39;s a good time to explore some great recent tutorials and videos that cover getting started.</p>
|
||
|
||
<p><a href="https://github.com/rynclark">Ryan Clark</a> provides a <a href="http://ryanclark.me/getting-started-with-react/">great overview of the basics of React</a> with the goal of building a really simple dropdown nav.</p>
|
||
|
||
<p><a href="https://github.com/FormidableLabs">Formidable Labs</a> and <a href="http://www.meetup.com/seattlejs/">Seattle JS</a> recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:</p>
|
||
|
||
<iframe width="650" height="300" src="//www.youtube.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
|
||
|
||
<p><a href="https://github.com/aearly">AEFlash</a> writes up <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html">some best practices and tips</a> to help you avoid potential pitfalls when developing with React.</p>
|
||
|
||
<p>Black Mutt Media <a href="http://blackmuttmedia.com/blog/react-tmdb-api/">takes us through their usage of React</a> and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.</p>
|
||
|
||
<p>Our own <a href="https://github.com/sebmarkbage">Sebastian Markbåge</a> was on the <a href="http://thewebplatform.libsyn.com/31-building-with-reactjs">Web Platform Podcast</a> to have a chat about all aspects of React.</p>
|
||
|
||
<iframe style="border: none" src="//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/" height="26" width="650" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>
|
||
<h2><a class="anchor" name="community-additions"></a>Community Additions <a class="hash-link" href="#community-additions">#</a></h2>
|
||
<p><a href="https://github.com/FormidableLabs">Formidable Labs</a> have been busy, as they&#39;ve also<a href="http://projects.formidablelabs.com/radium/"> just launched Radium</a>, a React component that provides you with the ability to use inline styles instead of CSS. They&#39;re also <a href="http://projects.formidablelabs.com/radium-bootstrap/">looking for some help</a> contributing to a Radium Bootstrap implementation.</p>
|
||
|
||
<p><a href="http://reactiflux.com/">Reactiflux.com</a> is a new Slack community based around (you guessed it!) React, and Flux.</p>
|
||
|
||
<p><a href="http://reactweek.com/">React Week</a> is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by <a href="https://github.com/ryanflorence">Ryan Florence</a>.</p>
|
||
|
||
<p><a href="https://github.com/babel/babel-sublime">Babel-sublime</a> is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.</p>
|
||
|
||
<p><a href="https://github.com/reactjs/react-meteor">react-meteor</a>, a package that replaces the default templating system of the Meteor platform with React, recently received a big update.</p>
|
||
<h2><a class="anchor" name="rebuilding-with-react"></a>Rebuilding with React <a class="hash-link" href="#rebuilding-with-react">#</a></h2>
|
||
<p><a href="https://github.com/rmanalan">Rich Manalang</a> from Atlassian <a href="https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/">explains why</a> they rebuilt their HipChat web client from scratch using React, and how they&#39;re already using it to rebuild their native desktop clients.</p>
|
||
|
||
<p><a href="https://twitter.com/andyhillel">Andrew Hillel</a> of the BBC gives <a href="http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d">an excellent and thorough breakdown</a> of the stack they used to rebuild their homepage, with React as an integral part of the front-end.</p>
|
||
|
||
<p>A team from New Zealand called <a href="https://atomic.io/">Atomic</a> is <a href="http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/">building web and mobile prototyping and design tools</a> entirely in-browser, and as co-founder <a href="http://twitter.com/darrylgray">Darryl Gray</a> says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.</p>
|
||
|
||
<p><a href="https://github.com/Polarrco">Polarr</a> have rebuilt <a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here">their browser-based photo editor</a> with React.</p>
|
||
|
||
<p><center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/react/img/blog/polarr.jpg"></a></center></p>
|
||
<h2><a class="anchor" name="its-f8"></a>It&#39;s F8! <a class="hash-link" href="#its-f8">#</a></h2>
|
||
<p>F8 2015 is just around the corner, and you can <a href="https://www.fbf8.com/stream.html">sign up for the video streams</a> in advance because we&#39;re sure to be covering all things React.</p>
|
||
<h2><a class="anchor" name="meetups"></a>Meetups <a class="hash-link" href="#meetups">#</a></h2>
|
||
<table><tr><td width="50%" valign="top">
|
||
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
|
||
</td><td width="50%" valign="top">
|
||
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>&mdash; James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
|
||
</td></tr><tr><td width="50%" valign="top">
|
||
<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>&mdash; Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
|
||
</td><td width="50%" valign="top">
|
||
<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>&mdash; ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
|
||
</td></tr></table>
|
||
</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><p>Thanks to everybody who has already been testing the release candidate. We&#39;ve received some good feedback and as a result we&#39;re going to do a second release candidate. The changes are minimal. We haven&#39;t changed the behavior of any APIs we exposed in the previous release candidate. Here&#39;s a summary of the changes:</p>
|
||
|
||
<ul>
|
||
<li>Introduced a new API (<code>React.cloneElement</code>, see below for details).</li>
|
||
<li>Fixed a bug related to validating <code>propTypes</code> when using the new <code>React.addons.createFragment</code> API.</li>
|
||
<li>Improved a couple warning messages.</li>
|
||
<li>Upgraded jstransform and esprima.</li>
|
||
</ul>
|
||
|
||
<p>The release candidate is available for download:</p>
|
||
|
||
<ul>
|
||
<li><strong>React</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-0.13.0-rc2.js">http://fb.me/react-0.13.0-rc2.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-0.13.0-rc2.min.js">http://fb.me/react-0.13.0-rc2.min.js</a><br></li>
|
||
<li><strong>React with Add-Ons</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.13.0-rc2.js">http://fb.me/react-with-addons-0.13.0-rc2.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc2.min.js">http://fb.me/react-with-addons-0.13.0-rc2.min.js</a><br></li>
|
||
<li><strong>In-Browser JSX transformer</strong><br>
|
||
<a href="http://fb.me/JSXTransformer-0.13.0-rc2.js">http://fb.me/JSXTransformer-0.13.0-rc2.js</a></li>
|
||
</ul>
|
||
|
||
<p>We&#39;ve also published version <code>0.13.0-rc2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||
|
||
<hr>
|
||
<h2><a class="anchor" name="react.cloneelement"></a>React.cloneElement <a class="hash-link" href="#react.cloneelement">#</a></h2>
|
||
<p>In React v0.13 RC2 we will introduce a new API, similar to <code>React.addons.cloneWithProps</code>, with this signature:</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="p">...</span><span class="nx">children</span><span class="p">);</span>
|
||
</code></pre></div>
|
||
<p>Unlike <code>cloneWithProps</code>, this new function does not have any magic built-in behavior for merging <code>style</code> and <code>className</code> for the same reason we don&#39;t have that feature from <code>transferPropsTo</code>. 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 <code>style</code> has a different signature (e.g. in the upcoming React Native).</p>
|
||
|
||
<p><code>React.cloneElement</code> is <em>almost</em> equivalent to:</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">element</span><span class="p">.</span><span class="nx">type</span> <span class="p">{...</span><span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/element.type&gt;</span>
|
||
</code></pre></div>
|
||
<p>However, unlike JSX and <code>cloneWithProps</code>, it also preserves <code>ref</code>s. This means that if you get a child with a <code>ref</code> on it, you won&#39;t accidentally steal it from your ancestor. You will get the same <code>ref</code> attached to your new element.</p>
|
||
|
||
<p>One common pattern is to map over your children and add a new prop. There were many issues reported about <code>cloneWithProps</code> losing the ref, making it harder to reason about your code. Now following the same pattern with <code>cloneElement</code> will work as expected. For example:</p>
|
||
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newChildren</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span>
|
||
<span class="p">});</span>
|
||
</code></pre></div>
|
||
<blockquote>
|
||
<p>Note: <code>React.cloneElement(child, { ref: &#39;newRef&#39; })</code> <em>DOES</em> override the <code>ref</code> so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.</p>
|
||
</blockquote>
|
||
|
||
<p>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 <code>ref</code>. 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.</p>
|
||
|
||
<p>We plan to eventually deprecate <code>React.addons.cloneWithProps</code>. We&#39;re not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using <code>React.cloneElement</code> instead. We&#39;ll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.</p>
|
||
</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><p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>
|
||
|
||
<p>We&#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 <a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">our beta announcement</a>. We&#39;re really excited about this! Sebastian also posted earlier this morning about <a href="/react/blog/2015/02/24/streamlining-react-elements.html">some of the other changes coming focused around ReactElement</a>. The changes we&#39;ve been working on there will hopefully enable lots of improvements to performance and developer experience.</p>
|
||
|
||
<p>The release candidate is available for download:</p>
|
||
|
||
<ul>
|
||
<li><strong>React</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-0.13.0-rc1.js">http://fb.me/react-0.13.0-rc1.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-0.13.0-rc1.min.js">http://fb.me/react-0.13.0-rc1.min.js</a><br></li>
|
||
<li><strong>React with Add-Ons</strong><br>
|
||
Dev build with warnings: <a href="http://fb.me/react-with-addons-0.13.0-rc1.js">http://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
|
||
Minified build for production: <a href="http://fb.me/react-with-addons-0.13.0-rc1.min.js">http://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
|
||
<li><strong>In-Browser JSX transformer</strong><br>
|
||
<a href="http://fb.me/JSXTransformer-0.13.0-rc1.js">http://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
|
||
</ul>
|
||
|
||
<p>We&#39;ve also published version <code>0.13.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>
|
||
|
||
<hr>
|
||
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>Mutating <code>props</code> 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&#39;t mutated</li>
|
||
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
|
||
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component&#39;s callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
|
||
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
|
||
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
|
||
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li>Support for using ES6 classes to build React components; see the <a href="http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details</li>
|
||
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
|
||
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</code> which gives <code>this.refs.photo</code>)</li>
|
||
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) =&gt; ({count: state.count + 1}));</code> -- this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
|
||
<li>Support for iterators and immutable-js sequences as children</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||
<ul>
|
||
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>)</li>
|
||
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (for example, <code>getDOMNode</code>, <code>setProps</code>, <code>replaceState</code>).</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-with-add-ons"></a>React with Add-Ons <a class="hash-link" href="#react-with-add-ons">#</a></h3><h4><a class="anchor" name="deprecations"></a>Deprecations <a class="hash-link" href="#deprecations">#</a></h4>
|
||
<ul>
|
||
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
|
||
</ul>
|
||
<h4><a class="anchor" name="new-features"></a>New Features <a class="hash-link" href="#new-features">#</a></h4>
|
||
<ul>
|
||
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.
|
||
|
||
<ul>
|
||
<li><code>es5</code> is the default.</li>
|
||
<li><code>es3</code> restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this[&#39;static&#39;]</code> for IE8 compatibility).</li>
|
||
</ul></li>
|
||
<li>The transform for the call spread operator has also been enabled.</li>
|
||
</ul>
|
||
<h3><a class="anchor" name="jsx"></a>JSX <a class="hash-link" href="#jsx">#</a></h3><h4><a class="anchor" name="breaking-changes"></a>Breaking Changes <a class="hash-link" href="#breaking-changes">#</a></h4>
|
||
<ul>
|
||
<li>A change was made to how some JSX was parsed, specifically around the use of <code>&gt;</code> or <code>}</code> 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.</li>
|
||
</ul>
|
||
</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>
|
||
|
||
</channel>
|
||
</rss>
|