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
01ac4e13d3ed67fd65e09a3eaa2d4a5cb080fe7b
react/blog/page9/index.html
T
Travis CI 6d2cc9121a Rebuild website
2016-03-29 17:02:28 +00:00

606 lines
43 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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.
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Blog | React</title>
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="Blog | React">
<meta property="og:type" content="website">
<meta property="og:url" content="https://facebook.github.io/react/blog/page9/index.html">
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
<meta property="og:description" content="A JavaScript library for building user interfaces">
<meta property="fb:app_id" content="623268441017527">
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script src="//use.typekit.net/vqa1hcx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script src="/react/js/html5shiv.min.js"></script>
<script src="/react/js/es5-shim.min.js"></script>
<script src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script src="/react/js/codemirror.js"></script>
<script src="/react/js/javascript.js"></script>
<script src="/react/js/react.js"></script>
<script src="/react/js/react-dom.js"></script>
<script src="/react/js/babel-browser.min.js"></script>
<script src="/react/js/live_editor.js"></script>
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap">
<a class="nav-home" href="/react/index.html">
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
React
</a>
<ul class="nav-site nav-site-internal">
<li><a href="/react/docs/getting-started.html">Docs</a></li>
<li><a href="/react/support.html">Support</a></li>
<li><a href="/react/downloads.html">Download</a></li>
<li><a href="/react/blog/" class="active">Blog</a></li>
<li>
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
</li>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a></li>
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
</ul>
</div>
</div>
<section class="content wrap blogContent">
<div class="nav-docs nav-blog">
<div class="nav-docs-section">
<h3>Recent posts</h3>
<ul>
<li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
<li><a href="/react/blog/2016/03/16/react-v15-rc2.html">React v15.0 Release Candidate 2</a></li>
<li><a href="/react/blog/2016/03/07/react-v15-rc1.html">React v15.0 Release Candidate</a></li>
<li><a href="/react/blog/2016/02/19/new-versioning-scheme.html">New Versioning Scheme</a></li>
<li><a href="/react/blog/2016/01/12/discontinuing-ie8-support.html">Discontinuing IE 8 Support in React DOM</a></li>
<li><a href="/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html">(A => B) !=> (B => A)</a></li>
<li><a href="/react/blog/2015/12/29/react-v0.14.4.html">React v0.14.4</a></li>
<li><a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">React Components, Elements, and Instances</a></li>
<li><a href="/react/blog/2015/12/16/ismounted-antipattern.html">isMounted is an Antipattern</a></li>
<li><a href="/react/blog/2015/12/04/react-js-conf-2016-diversity-scholarship.html">React.js Conf 2016 Diversity Scholarship</a></li>
<li><a href="/react/blog/all.html">All posts ...</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<div class="post-list-item">
<h1>
<a href="/react/blog/2015/01/27/react-v0.13.0-beta-1.html">React v0.13.0 Beta 1</a>
</h1>
<p class="meta">
January 27, 2015
by
<a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
</p>
<hr>
<div class="post">
<p>React 0.13 has a lot of nice features but there is one particular feature that I&#39;m really excited about. I couldn&#39;t wait for React.js Conf to start tomorrow morning.</p>
<p>Maybe you&#39;re like me and staying up late excited about the conference, or maybe you weren&#39;t one of the lucky ones to get a ticket. Either way I figured I&#39;d give you all something to play with until then.</p>
<p>We just published a beta version of React v0.13.0 to <a href="https://www.npmjs.com/package/react">npm</a>! You can install it with <code>npm install react@0.13.0-beta.1</code>. Since this is a pre-release, we don&#39;t have proper release notes ready.</p>
<p>So what is that one feature I&#39;m so excited about that I just couldn&#39;t wait to share?</p>
<h2><a class="anchor" name="plain-javascript-classes"></a>Plain JavaScript Classes!! <a class="hash-link" href="#plain-javascript-classes">#</a></h2>
<p>JavaScript originally didn&#39;t have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.</p>
<p>We figured that we&#39;re not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.</p>
<p>In React 0.13.0 you no longer need to use <code>React.createClass</code> to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with <code>react-tools</code> by making use of the harmony option: <code>jsx --harmony</code>.</p>
<h3><a class="anchor" name="es6-classes"></a>ES6 Classes <a class="hash-link" href="#es6-classes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">HelloMessage</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">HelloMessage</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;Sebastian&quot;</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>The API is mostly what you would expect, with the exception of <code>getInitialState</code>. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise <code>getDefaultProps</code> and <code>propTypes</code> are really just properties on the constructor.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
<span class="p">}</span>
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
<span class="p">}</span>
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">Counter</span><span class="p">.</span><span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
<span class="nx">Counter</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
</code></pre></div><h3><a class="anchor" name="es7-property-initializers"></a>ES7+ Property Initializers <a class="hash-link" href="#es7-property-initializers">#</a></h3>
<p>Wait, assigning to properties seems like a very imperative way of defining classes! You&#39;re right, however, we designed it this way because it&#39;s idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Future Version</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="kr">static</span> <span class="nx">propTypes</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span> <span class="p">};</span>
<span class="kr">static</span> <span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">initialCount</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
<span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span> <span class="p">};</span>
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span> <span class="p">});</span>
<span class="p">}</span>
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span><span class="o">&gt;</span>
<span class="nx">Clicks</span><span class="o">:</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span>
<span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>This was inspired by TypeScript&#39;s property initializers.</p>
<h3><a class="anchor" name="autobinding"></a>Autobinding <a class="hash-link" href="#autobinding">#</a></h3>
<p><code>React.createClass</code> has a built-in magic feature that bound all methods to <code>this</code> automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.</p>
<p>Therefore we decided not to have this built-in into React&#39;s class model. You can still explicitly prebind methods in your constructor if you want.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="nx">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="kr">super</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">tick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">tick</span><span class="p">()</span> <span class="p">{</span>
<span class="p">...</span>
<span class="p">}</span>
<span class="p">...</span>
<span class="p">}</span>
</code></pre></div>
<p>However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="nx">tick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
<span class="p">...</span>
<span class="p">}</span>
<span class="p">...</span>
<span class="p">}</span>
</code></pre></div><h3><a class="anchor" name="mixins"></a>Mixins <a class="hash-link" href="#mixins">#</a></h3>
<p>Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.</p>
<p>There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn&#39;t help that effort.</p>
<p>Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.</p>
<p>Luckily, if you want to keep using mixins, you can just keep using <code>React.createClass</code>.</p>
<blockquote>
<p><strong>Note:</strong></p>
<p>The classic <code>React.createClass</code> style of creating classes will continue to work just fine.</p>
</blockquote>
<h2><a class="anchor" name="other-languages"></a>Other Languages! <a class="hash-link" href="#other-languages">#</a></h2>
<p>Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.</p>
<p>You can also use CoffeeScript classes:</p>
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">div = </span><span class="nx">React</span><span class="p">.</span><span class="nx">createFactory</span> <span class="s">&#39;div&#39;</span>
<span class="k">class</span> <span class="nx">Counter</span> <span class="k">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span>
<span class="vi">@propTypes = </span><span class="nv">initialCount: </span><span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
<span class="vi">@defaultProps = </span><span class="nv">initialCount: </span><span class="mi">0</span>
<span class="nv">constructor: </span><span class="nf">(props) -&gt;</span>
<span class="k">super</span> <span class="nx">props</span>
<span class="vi">@state = </span><span class="nv">count: </span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span>
<span class="nv">tick: </span><span class="nf">=&gt;</span>
<span class="nx">@setState</span> <span class="nv">count: </span><span class="nx">@state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span>
<span class="nv">render: </span><span class="nf">-&gt;</span>
<span class="nx">div</span> <span class="nv">onClick: </span><span class="nx">@tick</span><span class="p">,</span>
<span class="s">&#39;Clicks: &#39;</span>
<span class="nx">@state</span><span class="p">.</span><span class="nx">count</span>
</code></pre></div>
<p>You can even use the old ES3 module pattern if you want:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">(</span><span class="nx">initialProps</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">state</span><span class="o">:</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">initialProps</span><span class="p">.</span><span class="nx">initialValue</span> <span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">span</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span> <span class="o">/&gt;</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/12/19/react-js-conf-diversity-scholarship.html">React.js Conf Diversity Scholarship</a>
</h1>
<p class="meta">
December 19, 2014
by
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>Today I&#39;m really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.</p>
<p>I&#39;m really excited about this and I hope you are too! The full announcement is below:</p>
<hr>
<p>The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!</p>
<p>Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 &amp; 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the <a href="http://conf.reactjs.com/">website</a> and <a href="/react/blog/2014/10/27/react-js-conf.html">previous</a> <a href="/react/blog/2014/11/24/react-js-conf-updates.html">updates</a> on our blog.</p>
<p>At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.</p>
<p>To apply for the scholarship, please visit the Application Page: <a href="https://www.surveymonkey.com/s/XVJGK6R">https://www.surveymonkey.com/s/XVJGK6R</a></p>
<h2><a class="anchor" name="award-includes"></a>Award Includes <a class="hash-link" href="#award-includes">#</a></h2>
<ul>
<li>Paid registration fee for the React.js Conf January 28 &amp; 29th at Facebook’s Headquarters in Menlo Park, CA</li>
<li>Paid travel and lodging expenses</li>
<li>Additional $200 meal stipend</li>
</ul>
<h2><a class="anchor" name="important-dates"></a>Important Dates <a class="hash-link" href="#important-dates">#</a></h2>
<ul>
<li>Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full</li>
<li>Friday, January 9, 2015: Award recipients will be notified by email of their acceptance</li>
<li>Wednesday &amp; Thursday, January 28 &amp; 29, 2015: React.js Conf</li>
</ul>
<h2><a class="anchor" name="eligibility"></a>Eligibility <a class="hash-link" href="#eligibility">#</a></h2>
<ul>
<li>Must currently be studying or working in Computer Science or a related field</li>
<li>International applicants are welcome, but you will be responsible for securing your own visa to attend the conference</li>
<li>You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park</li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/12/18/react-v0.12.2.html">React v0.12.2</a>
</h1>
<p class="meta">
December 18, 2014
by
<a href="https://twitter.com/zpao">Paul O’Shannessy</a>
</p>
<hr>
<div class="post">
<p>We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.</p>
<p>You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of <a href="http://flowtype.org/">Flow</a>, with only transform-related changes. Namely we added a flag to the <code>jsx</code> executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn&#39;t update for that release, you can safely skip it and move directly to v0.12.2.</p>
<p>The release is available for download from the CDN:</p>
<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.12.2.js">https://fb.me/react-0.12.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.12.2.min.js">https://fb.me/react-0.12.2.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.12.2.js">https://fb.me/react-with-addons-0.12.2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.12.2.min.js">https://fb.me/react-with-addons-0.12.2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.12.2.js">https://fb.me/JSXTransformer-0.12.2.js</a></li>
</ul>
<p>We&#39;ve also published version <code>0.12.2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower. <code>0.12.1</code> is also available in the same locations if need those.</p>
<p>Please try these builds out and <a href="https://github.com/facebook/react/issues/new">file an issue on GitHub</a> if you see anything awry.</p>
<h2><a class="anchor" name="changelog"></a>Changelog <a class="hash-link" href="#changelog">#</a></h2><h3><a class="anchor" name="react-core"></a>React Core <a class="hash-link" href="#react-core">#</a></h3>
<ul>
<li>Added support for more HTML attributes: <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code>, <code>marginHeight</code>, <code>marginWidth</code></li>
<li>Added <code>strokeOpacity</code> to the list of unitless CSS properties</li>
<li>Removed trailing commas (allows npm module to be bundled and used in IE8)</li>
<li>Fixed bug resulting in error when passing <code>undefined</code> to <code>React.createElement</code> - now there is a useful warning</li>
</ul>
<h3><a class="anchor" name="react-tools"></a>React Tools <a class="hash-link" href="#react-tools">#</a></h3>
<ul>
<li>JSX-related transforms now always use double quotes for props and <code>displayName</code></li>
</ul>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/11/25/community-roundup-24.html">Community Round-up #24</a>
</h1>
<p class="meta">
November 25, 2014
by
<a href="https://twitter.com/steveluscher">Steven Luscher</a>
</p>
<hr>
<div class="post">
<h2><a class="anchor" name="keep-it-simple"></a>Keep it Simple <a class="hash-link" href="#keep-it-simple">#</a></h2>
<p>Pedro Nauck (<a href="https://github.com/pedronauck">pedronauck</a>) delivered an impeccably illustrated deck at Brazil&#39;s <em>Front in Floripa</em> conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.</p>
<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
<p>Murilo Pereira (<a href="https://github.com/mpereira">mpereira</a>) tussles with the topic of complexity in this blog post about <a href="http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/">coping with scaling up</a>, where he describes how his team used React to make possible the “nearly impossible.”</p>
<p>I (<a href="https://github.com/steveluscher">steveluscher</a>) spoke at Manning Publications&#39; “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.</p>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
<p>James Pearce (<a href="https://github.com/jamesgpearce">jamesgpearce</a>) carried Big-Coffee all the way to Raleigh, NC. At the <em>All Things Open</em> conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.</p>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="all-about-isomorphism"></a>All About Isomorphism <a class="hash-link" href="#all-about-isomorphism">#</a></h2>
<p>Michael Ridgway (<a href="https://github.com/mridgway">mridgway</a>) shows us how Yahoo! (who recently <a href="http://www.slideshare.net/rmsguhan/react-meetup-mailonreact">moved Yahoo! Mail to React</a>) renders their React+Flux application, server-side.</p>
<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
<p>Péter Márton (<a href="https://github.com/hekike">hekike</a>) helps us brew a cold one (literally) using an application that&#39;s server-client <a href="http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/">isomorphic and indexable</a>. Demo and sample code included – cold ones sold separately.</p>
<p>And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (<a href="https://github.com/nhunzaker">nhunzaker</a>) <a href="http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization">server renders data visualizations as SVG</a> with React.</p>
<h2><a class="anchor" name="react-router-mows-the-lawn"></a>React Router Mows the Lawn <a class="hash-link" href="#react-router-mows-the-lawn">#</a></h2>
<p>Ryan Florence (<a href="https://github.com/rpflorence%5D">rpflorence</a>) and Michael Jackson (<a href="https://github.com/mjackson">mjackson</a>) unveiled a new API for <a href="https://github.com/rackt/react-router">React Router</a> that solves some of its user&#39;s problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they&#39;ve <a href="https://github.com/rackt/react-router/wiki/Announcements">rolled your ideas into their latest release</a>.</p>
<h2><a class="anchor" name="react-in-practice"></a>React in Practice <a class="hash-link" href="#react-in-practice">#</a></h2>
<p>Jonathan Beebe (<a href="https://github.com/somethingkindawierd">somethingkindawierd</a>) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year&#39;s <em>Nodevember</em> conference in Nashville</p>
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
<p>If you take a peek under the covers, you&#39;ll find that React powers <a href="https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/">Carousel</a>, Dropbox&#39;s new photo and video gallery app.</p>
<p>We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “<a href="https://thevanishinggame.wellstoried.com">The Vanishing Game</a>” and see for yourself.</p>
<h2><a class="anchor" name="be-kind-rewind"></a>Be Kind, Rewind <a class="hash-link" href="#be-kind-rewind">#</a></h2>
<p>Spend the next 60 seconds watching Daniel Woelfel (<a href="https://github.com/dwwoelfel">dwwoelfel</a>) serialize a React app&#39;s state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to <a href="http://blog.circleci.com/local-state-global-concerns/">reproduce bugs</a> reported to him by his users.</p>
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
<h2><a class="anchor" name="community-components"></a>Community Components <a class="hash-link" href="#community-components">#</a></h2>
<p>Tom Chen (<a href="https://github.com/tomchentw">tomchentw</a>) brings us a <a href="https://tomchentw.github.io/react-google-maps/">react-google-maps</a> component, and a way to syntax highlight source code using Prism and the <a href="https://tomchentw.github.io/react-prism/">react-prism</a> component, for good measure.</p>
<p>Jed Watson (<a href="https://github.com/JedWatson">jedwatson</a>) helps you manage touch, tap, and press events using the <a href="https://github.com/JedWatson/react-tappable">react-tappable</a> component.</p>
<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>
<h2><a class="anchor" name="waiter-theres-a-css-in-my-javascript"></a>Waiter, There&#39;s a CSS In My JavaScript <a class="hash-link" href="#waiter-theres-a-css-in-my-javascript">#</a></h2>
<p>The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (<a href="https://github.com/vjeux">vjeux</a>) talks about some of the <a href="https://speakerdeck.com/vjeux/react-css-in-js">fundamental style management challenges</a> we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused <a href="https://github.com/js-next/react-style">react-style</a>.</p>
<h2><a class="anchor" name="test-isolation"></a>Test Isolation <a class="hash-link" href="#test-isolation">#</a></h2>
<p>Yahoo! shows us how they make use of <code>iframe</code> elements to <a href="http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil">unit test React components in isolation</a>.</p>
<h2><a class="anchor" name="youve-got-the-hang-of-flux-now-lets-flow"></a>You&#39;ve Got The Hang of Flux, Now Let&#39;s Flow <a class="hash-link" href="#youve-got-the-hang-of-flux-now-lets-flow">#</a></h2>
<p>Facebook Open Source released <a href="https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/">Flow</a> this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to <a href="https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility">type check React applications</a>. There&#39;s never been a better reason to start making use of <code>propTypes</code> in your component specifications!</p>
<h2><a class="anchor" name="countdown-to-react.js-conf-2014"></a>Countdown to React.js Conf 2014 <a class="hash-link" href="#countdown-to-react.js-conf-2014">#</a></h2>
<p>We&#39;re counting down the days until <a href="http://conf.reactjs.com">React.js Conf</a> at Facebook&#39;s headquarters in Menlo Park, California, on January 28th &amp; 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.</p>
<h2><a class="anchor" name="react-meetups-around-the-world"></a>React Meetups Around the World <a class="hash-link" href="#react-meetups-around-the-world">#</a></h2>
<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
<div class="skinny-row">
<div class="skinny-col">
<blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>&mdash; ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
</div>
<div class="skinny-col">
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>&mdash; rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
</div>
</div>
<div class="skinny-row">
<div class="skinny-col">
<blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I&#39;ll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
</div>
<div class="skinny-col">
<blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I&#39;m presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>&mdash; Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
</div>
</div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="post-list-item">
<h1>
<a href="/react/blog/2014/11/24/react-js-conf-updates.html">React.js Conf Updates</a>
</h1>
<p class="meta">
November 24, 2014
by
<a href="https://twitter.com/vjeux">Vjeux</a>
</p>
<hr>
<div class="post">
<p>Yesterday was the <a href="http://conf.reactjs.com/index.html">React.js Conf</a> call for presenters submission deadline. We were
surprised to have received a total of <strong>one hundred talk proposals</strong> and were
amazed that 600 people requested to be notified when ticket go on sale. This is incredible!</p>
<p>When we organized the conference, we decided to start small since this is the
first React.js conference. Also, we weren&#39;t sure what level of demand to expect,
so we planned for a single-track, two-day conference on Facebook&#39;s campus. The
largest room available would accomodate 18 speaking slots and 200 attendees.
The spacial configuration makes it difficult to add a second track and changing
venues only two months in advance would be too difficult, so we are deciding to
stick with the originally planned format and venue on Facebook&#39;s campus.</p>
<p>Unfortunately, this means that we can only accept a small number of the awesome
conference talk proposals. In order to make sure attendees get a fair shot at
registering, we&#39;re going to sell tickets in three separate first-come,
first-serve phases. <strong>Tickets will cost $200 regardless of which phase they are
purchased from and all proceeds will go to charity</strong>.</p>
<ul>
<li>Friday November 28th 2014 — Noon PST: First wave of tickets</li>
<li>Friday December 5th 2014 — Noon PST: Second wave of tickets</li>
<li>Friday December 12th 2014 — Noon PST: Third and last wave of tickets</li>
</ul>
<p>We really do wish that everyone could attend React.js Conf, but in order to
ensure a quality experience for those who attend, we feel it will be best to
limit the size of the conference to what was originally planned for. This means
that not everyone who wants to attend will be able to, and many talks that
would be excellent contributions to the conference will have to be postponed
until the next conference. All the talks will be recorded and put online shortly after.</p>
<p>We hope to see many of you at React.js Conf this January.</p>
<p>Sincerely,</p>
<p>React Core Team</p>
</div>
</div>
<div class="pagination">
<a href="/react/blog/page8/" class="previous">
&laquo; Previous Page
</a>
<a href="/react/blog/page10/" class="next">
Next Page &raquo;
</a>
</div>
</div>
</section>
<footer class="wrap">
<div class="left">
A Facebook &amp; Instagram collaboration.<br>
<a href="/react/acknowledgements.html">Acknowledgements</a>
</div>
<div class="right">
&copy; 2013&ndash;2016 Facebook Inc.<br>
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</div>
</footer>
</div>
<div id="fb-root"></div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-1', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
docsearch({
apiKey: '36221914cce388c46d0420343e0bb32e',
indexName: 'react',
inputSelector: '#algolia-doc-search'
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink