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

Update Jekyll (#2035)

Browse Source
This commit is contained in:
Paul O’Shannessy
2014-08-13 13:15:29 -07:00
parent 62c4231389
commit 118e64c400
81 changed files with 660 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acknowledgements.html
+245 -60
View File
@@ -64,190 +64,375 @@
<p>We&#39;d like to thank all of our contributors:</p>
<div class="three-column">
<ul>
<li>Adam Krebs</li>
<li>Adam Solove</li>
<li>Alan deLevie</li>
<li>Alex Zelenskiy</li>
<li>Alexander Solovyov</li>
<li>Andreas Svensson</li>
<li>Andrew Davey</li>
<li>Andrew Zich</li>
<li>Andrey Popp</li>
<li>Anthony van der Hoorn</li>
<li>Ayman Osman</li>
<li>Ben Alpert</li>
<li>Ben Newman</li>
<li>Ben Ripkens</li>
<li>Bill Fisher</li>
<li>Bob Eagan</li>
<li>Bojan Mihelac</li>
<li>Brandon Bloom</li>
<li>Brian Cooke</li>
<li>Brian Kim</li>
<li>Brian Reavis</li>
<li>Brian Rue</li>
<li>Cam Spiers</li>
<li>Cassus Adam Banko</li>
<li>Cat Chen</li>
<li>Cheng Lou</li>
<li>Christian Roman</li>
<li>Christoph Pojer</li>
<li>Christopher Monsanto</li>
<li>Clay Allsopp</li>
<li>Connor McSheffrey</li>
<li>Dan Schafer</li>
<li>Daniel Gasienica</li>
<li>Daniel Lo Nigro</li>
<li>Daniel Miladinov</li>
<li>Daniel Schonfeld</li>
<li>Danny Ben-David</li>
<li>Daryl Lau</li>
<li>David Hellsing</li>
<li>David Hu</li>
<li>Devon Blandin</li>
<li>Dmitry Mazuro</li>
<li>Dustin Getz</li>
<li>Enguerran</li>
<li>Eric Clemmons</li>
<li>Eric Florenzano</li>
<li>Eric Schoffstall</li>
<li>Evan Coonrod</li>
<li>Fabio M. Costa</li>
<li>Felipe Oliveira Carvalho</li>
<li>Felix Kling</li>
<li>Fernando Correia</li>
<li>François-Xavier Bois</li>
<li>Fred Zhao</li>
<li>G Scott Olson</li>
<li>Geert Pasteels</li>
<li>Geert-Jan Brits</li>
<li>George A Sisco III</li>
<li>Gilbert</li>
<li>Greg Hurrell</li>
</ul>
<ul>
<li>Greg Roodt</li>
<li>Guangqiang Dong</li>
<li>Guido Bouman</li>
<li>Harry Hull</li>
<li>Harshad Sabne</li>
<li>Hendrik Swanepoel</li>
<li>Hugo Jobling</li>
<li>Ian Obermiller</li>
<li>Ingvar Stepanyan</li>
<li>Irae Carvalho</li>
<li>Isaac Salier-Hellendag</li>
<li>Ivan Kozik</li>
<li>Jaime Mingo</li>
<li>Jakub Malinowski</li>
<li>James Brantly</li>
<li>James Ide</li>
<li>Jamie Wong</li>
<li>Jamison Dance</li>
<li>Jan Kassens</li>
<li>Jared Forsyth</li>
<li>Jason Bonta</li>
<li>Jason Trill</li>
<li>Jean Lauliac</li>
<li>Jeff Barczewski</li>
<li>Jeff Carpenter</li>
<li>Jeff Morrison</li>
<li>Jeff Welch</li>
<li>Jeffrey Lin</li>
<li>Jignesh Kakadiya</li>
<li>Jing Chen</li>
<li>Johannes Baiter</li>
<li>John Watson</li>
<li>Jon Beebe</li>
<li>Jonas Enlund</li>
<li>Jonas Gebhardt</li>
<li>Jonathan Hsu</li>
<li>Jordan Walke</li>
<li>Josh Bassett</li>
<li>Josh Duck</li>
<li>Josh Yudaken</li>
<li>Joshua Ma</li>
<li>Julen Ruiz Aizpuru</li>
<li>Jun Wu</li>
<li>Juraj Dudak</li>
<li>Justin Jaffray</li>
<li>Karl Mikkelsen</li>
<li>Keito Uchiyama</li>
<li>Kit Randel</li>
<li>Kunal Mehta</li>
<li>Kyle Mathews</li>
<li>Laurence Rowe</li>
<li>Levi McCallum</li>
<li>Lily</li>
<li>Logan Allen</li>
<li>Luigy Leon</li>
<li>Marcin Kwiatkowski</li>
<li>Marcin Szczepanski</li>
<li>Mariano Desanze</li>
<li>Mark Richardson</li>
</ul>
<ul>
<li>Marshall Roch</li>
<li>Martin Andert</li>
<li>Martin Konicek</li>
<li>Mathieu M-Gosselin</li>
<li>Matt Harrison</li>
<li>Matthew Dapena-Tretter</li>
<li>Matti Nelimarkka</li>
<li>Michal Srb</li>
<li>Mouad Debbar</li>
<li>Nadeesha Cabral</li>
<li>Nate Hunzaker</li>
<li>Nicholas Bergson-Shilcock</li>
<li>Nick Gavalas</li>
<li>Nick Thompson</li>
<li>Niklas Boström</li>
<li>Owen Coutts</li>
<li>Pascal Hartig</li>
<li>Paul O’Shannessy</li>
<li>Paul Seiffert</li>
<li>Paul Shen</li>
<li>Pete Hunt</li>
<li>Peter Cottle</li>
<li>Petri Lievonen</li>
<li>Pieter Vanderwerff</li>
<li>Rajiv Tirumalareddy</li>
<li>Randall Randall</li>
<li>Ray</li>
<li>Richard D. Worth</li>
<li>Richard Feldman</li>
<li>Richard Livesey</li>
<li>Ryan Seddon</li>
<li>Sahat Yalkabov</li>
<li>Sander Spies</li>
<li>Sean Kinsey</li>
<li>Sebastian Markbåge</li>
<li>Shaun Trennery</li>
<li>Simon Højberg</li>
<li>Stefan Dombrowski</li>
<li>Stephen Murphy</li>
<li>Stoyan Stefanov</li>
<li>Sundeep Malladi</li>
<li>Sven Helmberger</li>
<li>Thomas Aylott</li>
<li>Thomas Boyt</li>
<li>Thomas Shaddox</li>
<li>Thomas Shafer</li>
<li>Timothy Yung</li>
<li>Tom Haggie</li>
<li>Tom Occhino</li>
<li>Ville Immonen</li>
<li>Vjeux</li>
<li>Volkan Unsal</li>
<li>Wayne Larsen</li>
<li>Wincent Colaiuta</li>
<li>Yuriy Dybskiy</li>
<li>Yuval Dekel</li>
<li>Zach Bruggeman</li>
<li>davidxi</li>
<li>imagentleman</li>
</ul>
<ul>
<li>Martin Andert</li>
<li>Martin Konicek</li>
<li>Mathieu M-Gosselin</li>
<li>Matt Harrison</li>
<li>Matthew Dapena-Tretter</li>
<li>Matti Nelimarkka</li>
<li>Michal Srb</li>
<li>Mouad Debbar</li>
<li>Nadeesha Cabral</li>
<li>Nate Hunzaker</li>
<li>Nicholas Bergson-Shilcock</li>
<li>Nick Gavalas</li>
<li>Nick Thompson</li>
<li>Niklas Boström</li>
<li>Owen Coutts</li>
<li>Pascal Hartig</li>
<li>Paul O’Shannessy</li>
<li>Paul Seiffert</li>
<li>Paul Shen</li>
<li>Pete Hunt</li>
<li>Peter Cottle</li>
<li>Petri Lievonen</li>
<li>Pieter Vanderwerff</li>
<li>Rajiv Tirumalareddy</li>
<li>Randall Randall</li>
<li>Ray</li>
<li>Richard D. Worth</li>
<li>Richard Feldman</li>
<li>Richard Livesey</li>
<li>Ryan Seddon</li>
<li>Sahat Yalkabov</li>
<li>Sander Spies</li>
<li>Sean Kinsey</li>
<li>Sebastian Markbåge</li>
<li>Shaun Trennery</li>
<li>Simon Højberg</li>
<li>Stefan Dombrowski</li>
<li>Stephen Murphy</li>
<li>Stoyan Stefanov</li>
<li>Sundeep Malladi</li>
<li>Sven Helmberger</li>
<li>Thomas Aylott</li>
<li>Thomas Boyt</li>
<li>Thomas Shaddox</li>
<li>Thomas Shafer</li>
<li>Timothy Yung</li>
<li>Tom Haggie</li>
<li>Tom Occhino</li>
<li>Ville Immonen</li>
<li>Vjeux</li>
<li>Volkan Unsal</li>
<li>Wayne Larsen</li>
<li>Wincent Colaiuta</li>
<li>Yuriy Dybskiy</li>
<li>Yuval Dekel</li>
<li>Zach Bruggeman</li>
<li>davidxi</li>
<li>imagentleman</li>
</ul>
</div>
<p>In addition, we&#39;re grateful to <a href="https://github.com/jeffbski">Jeff Barczewski</a> for allowing us to use the <a href="https://www.npmjs.org/package/react">react</a> package name on npm and to <a href="http://christopheraue.net/">Christopher Aue</a> for letting us use the <a href="http://reactjs.com/">reactjs.com</a> domain name and the <a href="https://twitter.com/reactjs">@reactjs</a> username on Twitter.</p>
blog/2013/06/27/community-roundup-3.html
+3 -3
View File
@@ -113,14 +113,14 @@
<blockquote>
<p>Grunt task for compiling Facebook React&#39;s .jsx templates into .js</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">&#39;js&#39;</span> <span class="p">},</span>
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;path/to/output/dir&#39;</span><span class="o">:</span> <span class="s1">&#39;path/to/jsx/templates/dir&#39;</span> <span class="p">}</span>
</code></pre></div>
<p>It also works great with <code>grunt-browserify</code>!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;grunt-react&#39;</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
<span class="p">},</span>
@@ -151,7 +151,7 @@
<blockquote>
<p>Multiple people asked what&#39;s the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I&#39;m not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<span class="p">(</span><span class="nx">div</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;MarkdownEditor&#39;</span><span class="p">},</span> <span class="p">[</span>
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">&#39;Input&#39;</span><span class="p">),</span>
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">&#39;textarea&#39;</span><span class="p">},</span>
blog/2013/07/02/react-v0-4-autobind-by-default.html
+3 -3
View File
@@ -100,7 +100,7 @@
<p>If you take a look at most of our current examples, you&#39;ll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won&#39;t necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
<p>Before we launched React, we would write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</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="p">;</span>
@@ -108,7 +108,7 @@
<span class="p">});</span>
</code></pre></div>
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
@@ -118,7 +118,7 @@
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn&#39;t want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
<p>Starting with v0.4 you can just write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html
+3 -3
View File
@@ -100,7 +100,7 @@
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
<span class="c1">// An optional string prop named &quot;description&quot;.</span>
<span class="nx">description</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">string</span><span class="p">,</span>
@@ -115,7 +115,7 @@
<span class="p">});</span>
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
<p>One common pattern we&#39;ve seen with our React code is to do something like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="kd">var</span> <span class="nx">value</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">value</span> <span class="o">||</span> <span class="s1">&#39;default value&#39;</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="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
@@ -123,7 +123,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getDefaultProps</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="p">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;default value&#39;</span>
blog/2013/07/23/community-roundup-5.html
+1 -1
View File
@@ -143,7 +143,7 @@
</blockquote>
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">&quot;No result&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Facebook&quot;</span><span class="o">&gt;</span><span class="nx">Facebook</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span><span class="o">&gt;</span><span class="nx">Harvest</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
+3 -3
View File
@@ -105,18 +105,18 @@
</ol>
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you&#39;d like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
<span class="c1"># use :production in production.rb</span>
<span class="k">end</span>
</code></pre></div><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
</code></pre></div><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
<span class="c1">//= require react</span>
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
blog/2013/08/05/community-roundup-6.html
+3 -3
View File
@@ -104,7 +104,7 @@
<blockquote>
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
<div class="highlight"><pre><code class="language-text" data-lang="text">% browserify -t reactify main.jsx
</code></pre></div>
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
@@ -112,7 +112,7 @@
</blockquote>
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
<span class="nv">render: </span><span class="nf">-&gt;</span>
<span class="nx">@div</span> <span class="p">[</span>
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">&#39;items&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">]</span>
@@ -124,7 +124,7 @@
<span class="s">&#39;value&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;text&#39;</span><span class="p">]</span>
<span class="s">&#39;autoFocus&#39;</span><span class="o">:</span> <span class="kc">true</span>
<span class="s">&#39;ref&#39;</span><span class="o">:</span> <span class="s">&#39;textInput&#39;</span>
<span class="nx">@button</span> <span class="s">&quot;Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">&quot;</span>
<span class="nx">@button</span> <span class="s">&quot;Add #</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">&quot;</span>
<span class="p">]</span>
<span class="p">]</span>
</code></pre></div>
blog/2013/08/19/use-react-and-jsx-in-python-applications.html
+5 -5
View File
@@ -98,7 +98,7 @@
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
@@ -109,21 +109,21 @@
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
<div class="highlight"><pre><code class="language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
<div class="highlight"><pre><code class="language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
blog/2013/08/26/community-roundup-7.html
+1 -1
View File
@@ -116,7 +116,7 @@
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
blog/2013/10/03/community-roundup-9.html
+3 -3
View File
@@ -123,7 +123,7 @@
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using &quot;native&quot; ClojureScript data structures.</p>
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
@@ -140,7 +140,7 @@
<blockquote>
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g jsxhint
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g jsxhint
</code></pre></div>
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
</blockquote>
@@ -164,7 +164,7 @@
<p>React is all about components. So let&#39;s build one.</p>
<p>Let&#39;s call it Table (to avoid any confusion what the component is about).</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="cm">/*stuff goeth here*/</span>
<span class="p">});</span>
</code></pre></div>
blog/2013/11/05/thinking-in-react.html
+1 -1
View File
@@ -104,7 +104,7 @@
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
<p>Our JSON API returns some data that looks like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">[
<div class="highlight"><pre><code class="language-text" data-lang="text">[
{category: &quot;Sporting Goods&quot;, price: &quot;$49.99&quot;, stocked: true, name: &quot;Football&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$9.99&quot;, stocked: true, name: &quot;Baseball&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$29.99&quot;, stocked: false, name: &quot;Basketball&quot;},
blog/2013/11/06/community-roundup-10.html
+1 -1
View File
@@ -156,7 +156,7 @@
<p>Please don&#39;t take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn&#39;t written with performance in mind.</p>
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
blog/2013/12/23/community-roundup-12.html
+2 -2
View File
@@ -114,7 +114,7 @@
<blockquote>
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">componentWillUpdate: function() {
<div class="highlight"><pre><code class="language-text" data-lang="text">componentWillUpdate: function() {
var node = this.getDOMNode();
this.shouldScrollBottom =
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
@@ -158,7 +158,7 @@ componentDidUpdate: function() {
</blockquote>
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">hoodie new todomvc -t &quot;hoodiehq/hoodie-react-todomvc&quot;
<div class="highlight"><pre><code class="language-text" data-lang="text">hoodie new todomvc -t &quot;hoodiehq/hoodie-react-todomvc&quot;
</code></pre></div>
<p><a href="https://github.com/hoodiehq/hoodie-react-todomvc">Check out on GitHub...</a></p>
<h2><a class="anchor" name="jsx-compiler"></a>JSX Compiler <a class="hash-link" href="#jsx-compiler">#</a></h2>
blog/2013/12/30/community-roundup-13.html
+2 -2
View File
@@ -120,7 +120,7 @@
</blockquote>
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</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="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</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">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="p">}</span>
@@ -139,7 +139,7 @@
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<span class="nx">MyComponent</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
blog/2014/01/06/community-roundup-14.html
+2 -2
View File
@@ -117,7 +117,7 @@
<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
<blockquote>
<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
<div class="highlight"><pre><code class="language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
cd react-rails-tutorial
bundle install
rake db:migrate
@@ -135,7 +135,7 @@ rails s
<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">InfiniteScroll</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">InfiniteScroll</span>
<span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
<span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
<span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
blog/2014/02/05/community-roundup-15.html
+2 -2
View File
@@ -132,7 +132,7 @@
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
<p>A basic example from github:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header&gt;</span>
@@ -144,7 +144,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
</code></pre></div><div class="highlight"><pre><code class="language-clojure" data-lang="clojure"><span class="nv">...</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
blog/2014/02/16/react-v0.9-rc1.html
+3 -3
View File
@@ -115,19 +115,19 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
<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="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
blog/2014/02/20/react-v0.9.html
+3 -3
View File
@@ -121,19 +121,19 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min
<p>We&#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
blog/2014/03/19/react-v0.10-rc1.html
+1 -1
View File
@@ -119,7 +119,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
blog/2014/03/21/react-v0.10.html
+1 -1
View File
@@ -119,7 +119,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.mi
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
blog/2014/03/28/the-road-to-1.0.html
+1 -1
View File
@@ -106,7 +106,7 @@
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn&#39;t great. We don&#39;t quite have the right answer here yet, but we&#39;re close. We want to make sure we make this as simple as possible. It could look like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</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>
blog/2014/04/04/reactnet.html
+9 -7
View File
@@ -101,14 +101,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:</p>
<ul>
<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></li>
<li><p>JSX to JavaScript compilation via popular minification/combination libraries
<li>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</li>
</ul>
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<ul>
<li>JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.</p></li>
<li><p>Server-side component rendering to make your initial render super fast.</p></li>
production websites.</li>
<li>Server-side component rendering to make your initial render super fast.</li>
</ul>
<p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
blog/2014/07/13/react-v0.11-rc1.html
+3 -3
View File
@@ -117,7 +117,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
<p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</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="o">/&gt;</span><span class="p">;</span>
@@ -134,7 +134,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
<p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -152,7 +152,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Handle enter key</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
blog/2014/07/17/react-v0.11.html
+3 -3
View File
@@ -123,7 +123,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
<p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</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="o">/&gt;</span><span class="p">;</span>
@@ -140,7 +140,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
<p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -158,7 +158,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Handle enter key</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
blog/2014/07/28/community-roundup-20.html
+5 -5
View File
@@ -110,7 +110,7 @@
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2><a class="anchor" name="reactintl-mixin-by-yahoo"></a>ReactIntl Mixin by Yahoo <a class="hash-link" href="#reactintl-mixin-by-yahoo">#</a></h2>
<p>There are a couple of React-related projects that recently appeared on Yahoo&#39;s GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It&#39;s great to see them getting excited about React and contributing back to the community.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactIntlMixin</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="p">(</span>
@@ -127,9 +127,9 @@
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="thinking-and-learning-react"></a>Thinking and Learning React <a class="hash-link" href="#thinking-and-learning-react">#</a></h2>
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations. </p>
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations.</p>
<h2><a class="anchor" name="london-react-meetup"></a>London React Meetup <a class="hash-link" href="#london-react-meetup">#</a></h2>
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content. </p>
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content.</p>
<ul>
<li>What&#39;s new in React 0.11 and how to improve performance by guaranteeing immutability</li>
@@ -149,7 +149,7 @@
<p>Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a <a href="https://github.com/RReverser/acorn-jsx">JSX parser</a> that&#39;s 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it&#39;s always a good thing to get competition on performance!</p>
<h2><a class="anchor" name="reactscriptloader"></a>ReactScriptLoader <a class="hash-link" href="#reactscriptloader">#</a></h2>
<p>Yariv Sadan created <a href="https://github.com/yariv/ReactScriptLoader">ReactScriptLoader</a> to make it easier to write components that require an external script.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactScriptLoaderMixin</span><span class="p">],</span>
<span class="nx">getScriptURL</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="s1">&#39;http://d3js.org/d3.v3.min.js&#39;</span><span class="p">;</span>
@@ -164,7 +164,7 @@
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</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="kd">var</span> <span class="nx">message</span> <span class="o">=</span>
<span class="kd">var</span> <span class="nx">message</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">scriptLoading</span> <span class="o">?</span> <span class="s1">&#39;Loading script...&#39;</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">scriptLoadError</span> <span class="o">?</span> <span class="s1">&#39;Loading failed&#39;</span> <span class="o">:</span>
<span class="s1">&#39;Loading succeeded&#39;</span><span class="p">;</span>
blog/2014/07/30/flux-actions-and-the-dispatcher.html
+1 -1
View File
@@ -109,7 +109,7 @@
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method. </p>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.</p>
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
blog/2014/08/03/community-roundup-21.html
+3 -3
View File
@@ -97,7 +97,7 @@
<div class="post">
<h2><a class="anchor" name="react-router"></a>React Router <a class="hash-link" href="#react-router">#</a></h2>
<p><a href="http://ryanflorence.com/">Ryan Florence</a> and <a href="http://twitter.com/mjackson">Michael Jackson</a> ported Ember&#39;s router to React in a project called <a href="https://github.com/rackt/react-router">React Router</a>. This is a very good example of both communities working together to make the web better!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
<span class="o">&lt;</span><span class="nx">Routes</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">App</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;about&quot;</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span><span class="o">/&gt;</span>
@@ -133,7 +133,7 @@
</ul>
<h2><a class="anchor" name="referencing-dynamic-children"></a>Referencing Dynamic Children <a class="hash-link" href="#referencing-dynamic-children">#</a></h2>
<p>While Matt Zabriskie was working on <a href="https://www.npmjs.org/package/react-tabs">react-tabs</a> he discovered how to use React.Children.map and React.addons.cloneWithProps in order to <a href="http://www.mattzabriskie.com/blog/react-referencing-dynamic-children">reference dynamic children</a>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="kd">var</span> <span class="nx">children</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="nx">index</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">addons</span><span class="p">.</span><span class="nx">cloneWithProps</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span>
@@ -158,7 +158,7 @@
<h2><a class="anchor" name="html-parser2-react"></a>HTML Parser2 React <a class="hash-link" href="#html-parser2-react">#</a></h2>
<p><a href="http://browniefed.github.io/">Jason Brown</a> adapted htmlparser2 to React: <a href="https://www.npmjs.org/package/htmlparser2-react">htmlparser2-react</a>. That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
<span class="s1">&#39;style=&quot;width:100%;height: 100%;&quot;&gt;&lt;article id=&quot;this-article&quot;&gt;&#39;</span> <span class="o">+</span>
<span class="s1">&#39;&lt;p&gt;hey this is a paragraph&lt;/p&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&#39;</span> <span class="o">+</span>
<span class="s1">&#39;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&#39;</span><span class="p">;</span>
blog/index.html
+12 -12
View File
@@ -97,7 +97,7 @@
<div class="post">
<h2><a class="anchor" name="react-router"></a>React Router <a class="hash-link" href="#react-router">#</a></h2>
<p><a href="http://ryanflorence.com/">Ryan Florence</a> and <a href="http://twitter.com/mjackson">Michael Jackson</a> ported Ember&#39;s router to React in a project called <a href="https://github.com/rackt/react-router">React Router</a>. This is a very good example of both communities working together to make the web better!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">((</span>
<span class="o">&lt;</span><span class="nx">Routes</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">App</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;about&quot;</span> <span class="nx">handler</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span><span class="o">/&gt;</span>
@@ -133,7 +133,7 @@
</ul>
<h2><a class="anchor" name="referencing-dynamic-children"></a>Referencing Dynamic Children <a class="hash-link" href="#referencing-dynamic-children">#</a></h2>
<p>While Matt Zabriskie was working on <a href="https://www.npmjs.org/package/react-tabs">react-tabs</a> he discovered how to use React.Children.map and React.addons.cloneWithProps in order to <a href="http://www.mattzabriskie.com/blog/react-referencing-dynamic-children">reference dynamic children</a>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="kd">var</span> <span class="nx">children</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="nx">index</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">addons</span><span class="p">.</span><span class="nx">cloneWithProps</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span>
@@ -158,7 +158,7 @@
<h2><a class="anchor" name="html-parser2-react"></a>HTML Parser2 React <a class="hash-link" href="#html-parser2-react">#</a></h2>
<p><a href="http://browniefed.github.io/">Jason Brown</a> adapted htmlparser2 to React: <a href="https://www.npmjs.org/package/htmlparser2-react">htmlparser2-react</a>. That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;div data-id=&quot;1&quot; class=&quot;hey this is a class&quot; &#39;</span> <span class="o">+</span>
<span class="s1">&#39;style=&quot;width:100%;height: 100%;&quot;&gt;&lt;article id=&quot;this-article&quot;&gt;&#39;</span> <span class="o">+</span>
<span class="s1">&#39;&lt;p&gt;hey this is a paragraph&lt;/p&gt;&lt;div&gt;&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&#39;</span> <span class="o">+</span>
<span class="s1">&#39;&lt;li&gt;3&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&#39;</span><span class="p">;</span>
@@ -194,7 +194,7 @@ This is not the intended way to use React but can be useful as last resort if yo
<p><img src="/react/img/blog/flux-diagram.png" style="width: 100%;" /></p>
<h2><a class="anchor" name="why-we-need-a-dispatcher"></a>Why We Need a Dispatcher <a class="hash-link" href="#why-we-need-a-dispatcher">#</a></h2>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method. </p>
<p>As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &quot;I need to wait for Store B to finish processing this action.&quot; The dispatcher provides this functionality through its waitFor() method.</p>
<p>The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.</p>
@@ -229,7 +229,7 @@ This is not the intended way to use React but can be useful as last resort if yo
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2><a class="anchor" name="reactintl-mixin-by-yahoo"></a>ReactIntl Mixin by Yahoo <a class="hash-link" href="#reactintl-mixin-by-yahoo">#</a></h2>
<p>There are a couple of React-related projects that recently appeared on Yahoo&#39;s GitHub, the first one being an <a href="https://github.com/yahoo/react-intl">internationalization mixin</a>. It&#39;s great to see them getting excited about React and contributing back to the community.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactIntlMixin</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="p">(</span>
@@ -246,9 +246,9 @@ This is not the intended way to use React but can be useful as last resort if yo
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div><h2><a class="anchor" name="thinking-and-learning-react"></a>Thinking and Learning React <a class="hash-link" href="#thinking-and-learning-react">#</a></h2>
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations. </p>
<p>Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post <a href="http://icelab.com.au/articles/thinking-and-learning-reactjs/">“Thinking and Learning React.js”</a> to share her experience with elements they had to use. You&#39;ll learn about routing, event dispatch, touchable components, and basic animations.</p>
<h2><a class="anchor" name="london-react-meetup"></a>London React Meetup <a class="hash-link" href="#london-react-meetup">#</a></h2>
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content. </p>
<p>If you missed the last <a href="http://www.meetup.com/London-React-User-Group/events/191406572/">London React Meetup</a>, the video is available, with lots of great content.</p>
<ul>
<li>What&#39;s new in React 0.11 and how to improve performance by guaranteeing immutability</li>
@@ -268,7 +268,7 @@ This is not the intended way to use React but can be useful as last resort if yo
<p>Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a <a href="https://github.com/RReverser/acorn-jsx">JSX parser</a> that&#39;s 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it&#39;s always a good thing to get competition on performance!</p>
<h2><a class="anchor" name="reactscriptloader"></a>ReactScriptLoader <a class="hash-link" href="#reactscriptloader">#</a></h2>
<p>Yariv Sadan created <a href="https://github.com/yariv/ReactScriptLoader">ReactScriptLoader</a> to make it easier to write components that require an external script.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Foo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ReactScriptLoaderMixin</span><span class="p">],</span>
<span class="nx">getScriptURL</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="s1">&#39;http://d3js.org/d3.v3.min.js&#39;</span><span class="p">;</span>
@@ -283,7 +283,7 @@ This is not the intended way to use React but can be useful as last resort if yo
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">scriptLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">scriptLoadError</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</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="kd">var</span> <span class="nx">message</span> <span class="o">=</span>
<span class="kd">var</span> <span class="nx">message</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">scriptLoading</span> <span class="o">?</span> <span class="s1">&#39;Loading script...&#39;</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">scriptLoadError</span> <span class="o">?</span> <span class="s1">&#39;Loading failed&#39;</span> <span class="o">:</span>
<span class="s1">&#39;Loading succeeded&#39;</span><span class="p">;</span>
@@ -376,7 +376,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
<p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</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="o">/&gt;</span><span class="p">;</span>
@@ -393,7 +393,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
<p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -411,7 +411,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0.mi
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Handle enter key</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
blog/page2/index.html
+12 -10
View File
@@ -117,7 +117,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<p>Starting in React 0.11, <code>getDefaultProps()</code> is called only once when <code>React.createClass()</code> is called, instead of each time a component is rendered. This means that <code>getDefaultProps()</code> can no longer vary its return value based on <code>this.props</code> and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.</p>
<h2><a class="anchor" name="rendering-to-null"></a>Rendering to <code>null</code> <a class="hash-link" href="#rendering-to-null">#</a></h2>
<p>Since React&#39;s release, people have been using work arounds to &quot;render nothing&quot;. Usually this means returning an empty <code>&lt;div/&gt;</code> or <code>&lt;span/&gt;</code>. Some people even got clever and started returning <code>&lt;noscript/&gt;</code> to avoid extraneous DOM nodes. We finally provided a &quot;blessed&quot; solution that allows developers to write meaningful code. Returning <code>null</code> is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <code>&lt;noscript&gt;</code> element, though in the future we hope to not put anything in the document. In the mean time, <code>&lt;noscript&gt;</code> elements do not affect layout in any way, so you can feel safe using <code>null</code> today!</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</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">if</span> <span class="p">(</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">visible</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="o">/&gt;</span><span class="p">;</span>
@@ -134,7 +134,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="jsx-namespacing"></a>JSX Namespacing <a class="hash-link" href="#jsx-namespacing">#</a></h2>
<p>Another feature request we&#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <code>&lt;Namespace.Component/&gt;</code>.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// Before</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Before</span>
<span class="kd">var</span> <span class="nx">UI</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;UI&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">UILayout</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Layout</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">UIButton</span> <span class="o">=</span> <span class="nx">UI</span><span class="p">.</span><span class="nx">Button</span><span class="p">;</span>
@@ -152,7 +152,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.11.0-rc
<span class="p">}</span>
</code></pre></div><h2><a class="anchor" name="improved-keyboard-event-normalization"></a>Improved keyboard event normalization <a class="hash-link" href="#improved-keyboard-event-normalization">#</a></h2>
<p>Keyboard events now contain a normalized <code>e.key</code> value according to the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#keys-special">DOM Level 3 Events spec</a>, allowing you to write simpler key handling code that works in all browsers, such as:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">handleKeyDown</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39;Enter&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// Handle enter key</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span> <span class="o">===</span> <span class="s1">&#39; &#39;</span><span class="p">)</span> <span class="p">{</span>
@@ -325,14 +325,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:</p>
<ul>
<li><p>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div></li>
<li><p>JSX to JavaScript compilation via popular minification/combination libraries
<li>On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.</li>
</ul>
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;@Url.Content(&quot;</span><span class="err">/</span><span class="na">Scripts</span><span class="err">/</span><span class="na">HelloWorld</span><span class="err">.</span><span class="na">jsx</span><span class="err">&quot;)&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<ul>
<li>JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.</p></li>
<li><p>Server-side component rendering to make your initial render super fast.</p></li>
production websites.</li>
<li>Server-side component rendering to make your initial render super fast.</li>
</ul>
<p>Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
blog/page3/index.html
+3 -3
View File
@@ -106,7 +106,7 @@
<p>This is really connected to everything. We want to keep the API as simple as possible and help developers <a href="http://blog.codinghorror.com/falling-into-the-pit-of-success/">fall into the pit of success</a>. Enabling bad patterns with bad APIs is not success.</p>
<h2><a class="anchor" name="es6"></a>ES6 <a class="hash-link" href="#es6">#</a></h2>
<p>Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling <code>React.createClass(...)</code> isn&#39;t great. We don&#39;t quite have the right answer here yet, but we&#39;re close. We want to make sure we make this as simple as possible. It could look like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">class</span> <span class="nx">MyComponent</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>
@@ -156,7 +156,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0.mi
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
@@ -230,7 +230,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.10.0-rc
<p>In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on <a href="http://fb.me/react-warning-descriptors">this page</a>. Most of the time you can solve your pattern by using refs.</p>
<p>Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a common pattern. However instance here really refers to a</span>
<span class="c1">// &quot;descriptor&quot;, not necessarily the mounted instance.</span>
<span class="kd">var</span> <span class="nx">instance</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">instance</span><span class="p">);</span>
blog/page4/index.html
+10 -10
View File
@@ -121,19 +121,19 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0.min
<p>We&#39;ve also made several other improvements and a few breaking changes; the full changelog is provided below.</p>
<h2><a class="anchor" name="jsx-whitespace"></a>JSX Whitespace <a class="hash-link" href="#jsx-whitespace">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
@@ -251,19 +251,19 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
<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="upgrade-notes"></a>Upgrade Notes <a class="hash-link" href="#upgrade-notes">#</a></h2>
<p>In addition to the changes to React core listed below, we&#39;ve made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div&gt;</span>
Monkeys:
{listOfMonkeys} {submitButton}
<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>In v0.8 and below, it was transformed to the following:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="s2">&quot; Monkeys: &quot;</span><span class="p">,</span>
<span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="nx">submitButton</span>
<span class="p">)</span>
</code></pre></div>
<p>In v0.9, it will be transformed to this JS instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span>
<span class="hll"> <span class="s2">&quot;Monkeys:&quot;</span><span class="p">,</span>
</span><span class="hll"> <span class="nx">listOfMonkeys</span><span class="p">,</span> <span class="s2">&quot; &quot;</span><span class="p">,</span> <span class="nx">submitButton</span>
</span><span class="p">)</span>
@@ -461,7 +461,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
<p><a href="https://github.com/ckirkendall">Creighton Kirkendall</a> created <a href="https://github.com/ckirkendall/kioo">Kioo</a>, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.</p>
<p>A basic example from github:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="nt">&lt;header&gt;</span>
@@ -473,7 +473,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</span>place holder<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div><div class="highlight"><pre><code class="clojure language-clojure" data-lang="clojure"><span class="nv">...</span>
</code></pre></div><div class="highlight"><pre><code class="language-clojure" data-lang="clojure"><span class="nv">...</span>
<span class="p">(</span><span class="kd">defn </span><span class="nv">my-nav-item</span> <span class="p">[[</span><span class="nv">caption</span> <span class="nv">func</span><span class="p">]]</span>
<span class="p">(</span><span class="nf">kioo/component</span> <span class="s">&quot;main.html&quot;</span> <span class="p">[</span><span class="ss">:.nav-item</span><span class="p">]</span>
@@ -558,7 +558,7 @@ Minified build for production: <a href="http://fb.me/react-with-addons-0.9.0-rc1
<p><a href="http://selem.im">Selem Delul</a> bundled the <a href="http://facebook.github.io/react/docs/tutorial.html">React Tutorial</a> into a rails app. This is a good example on how to get started with a rails project.</p>
<blockquote>
<div class="highlight"><pre><code class="text language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
<div class="highlight"><pre><code class="language-text" data-lang="text">git clone https://github.com/necrodome/react-rails-tutorial
cd react-rails-tutorial
bundle install
rake db:migrate
@@ -576,7 +576,7 @@ rails s
<p><a href="http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/">Check out the blog post...</a></p>
<h2><a class="anchor" name="react-infinite-scroll"></a>React Infinite Scroll <a class="hash-link" href="#react-infinite-scroll">#</a></h2>
<p><a href="https://twitter.com/guillaumervls">Guillaume Rivals</a> implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">InfiniteScroll</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">InfiniteScroll</span>
<span class="nx">pageStart</span><span class="o">=</span><span class="p">{</span><span class="mi">0</span><span class="p">}</span>
<span class="nx">loadMore</span><span class="o">=</span><span class="p">{</span><span class="nx">loadFunc</span><span class="p">}</span>
<span class="nx">hasMore</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span> <span class="o">||</span> <span class="kc">false</span><span class="p">}</span>
blog/page5/index.html
+4 -4
View File
@@ -141,7 +141,7 @@
</blockquote>
<h2><a class="anchor" name="react--socket.io"></a>React + Socket.io <a class="hash-link" href="#react--socket.io">#</a></h2>
<p><a href="http://enome.be/nl">Geert Pasteels</a> made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">changeHandler</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">_</span><span class="p">.</span><span class="nx">isEqual</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">state</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="o">&amp;&amp;</span> <span class="k">this</span><span class="p">.</span><span class="nx">path</span> <span class="o">===</span> <span class="nx">data</span><span class="p">.</span><span class="nx">path</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">data</span><span class="p">.</span><span class="nx">state</span><span class="p">);</span>
<span class="p">}</span>
@@ -160,7 +160,7 @@
<p><a href="https://github.com/Enome/react.io">Check it out on GitHub...</a></p>
<h2><a class="anchor" name="cssobjectify"></a>cssobjectify <a class="hash-link" href="#cssobjectify">#</a></h2>
<p><a href="http://andreypopp.com/">Andrey Popp</a> implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/* style.css */</span>
<span class="nx">MyComponent</span> <span class="p">{</span>
<span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="o">:</span> <span class="mi">12</span><span class="nx">px</span><span class="p">;</span>
<span class="nx">background</span><span class="o">-</span><span class="nx">color</span><span class="o">:</span> <span class="nx">red</span><span class="p">;</span>
@@ -232,7 +232,7 @@
<blockquote>
<p>We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">componentWillUpdate: function() {
<div class="highlight"><pre><code class="language-text" data-lang="text">componentWillUpdate: function() {
var node = this.getDOMNode();
this.shouldScrollBottom =
(node.scrollTop + node.offsetHeight) === node.scrollHeight;
@@ -276,7 +276,7 @@ componentDidUpdate: function() {
</blockquote>
<h2><a class="anchor" name="hoodie-react-todomvc"></a>Hoodie React TodoMVC <a class="hash-link" href="#hoodie-react-todomvc">#</a></h2>
<p><a href="http://svenlito.com/">Sven Lito</a> integrated the React TodoMVC example within an <a href="http://hood.ie/">Hoodie</a> web app environment. This should let you get started using Hoodie and React.</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">hoodie new todomvc -t &quot;hoodiehq/hoodie-react-todomvc&quot;
<div class="highlight"><pre><code class="language-text" data-lang="text">hoodie new todomvc -t &quot;hoodiehq/hoodie-react-todomvc&quot;
</code></pre></div>
<p><a href="https://github.com/hoodiehq/hoodie-react-todomvc">Check out on GitHub...</a></p>
<h2><a class="anchor" name="jsx-compiler"></a>JSX Compiler <a class="hash-link" href="#jsx-compiler">#</a></h2>
blog/page6/index.html
+2 -2
View File
@@ -234,7 +234,7 @@ Is this some sort of template language? Specifically no. This might have been th
<p>Please don&#39;t take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn&#39;t written with performance in mind.</p>
<p>Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * This is a completely optional performance enhancement that you can implement</span>
<span class="cm"> * on any React component. If you were to delete this method the app would still</span>
<span class="cm"> * work correctly (and still be very performant!), we just use it as an example</span>
@@ -299,7 +299,7 @@ Is this some sort of template language? Specifically no. This might have been th
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
<p>Our JSON API returns some data that looks like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">[
<div class="highlight"><pre><code class="language-text" data-lang="text">[
{category: &quot;Sporting Goods&quot;, price: &quot;$49.99&quot;, stocked: true, name: &quot;Football&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$9.99&quot;, stocked: true, name: &quot;Baseball&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$29.99&quot;, stocked: false, name: &quot;Basketball&quot;},
blog/page7/index.html
+12 -12
View File
@@ -123,7 +123,7 @@
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
<h2><a class="anchor" name="pump---clojure-bindings-for-react"></a>Pump - Clojure bindings for React <a class="hash-link" href="#pump---clojure-bindings-for-react">#</a></h2>
<p><a href="http://solovyov.net/">Alexander Solovyov</a> has been working on React bindings for ClojureScript. This is really exciting as it is using &quot;native&quot; ClojureScript data structures.</p>
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="p">(</span><span class="n">ns</span> <span class="n">your</span><span class="o">.</span><span class="n">app</span>
<span class="p">(</span><span class="ss">:require</span><span class="o">-</span><span class="n">macros</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">def</span><span class="o">-</span><span class="n">macros</span> <span class="ss">:refer</span> <span class="o">[</span><span class="n">defr</span><span class="o">]]</span><span class="p">)</span>
<span class="p">(</span><span class="ss">:require</span> <span class="o">[</span><span class="n">pump</span><span class="o">.</span><span class="n">core</span><span class="o">]</span><span class="p">))</span>
@@ -140,7 +140,7 @@
<blockquote>
<p>A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g jsxhint
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g jsxhint
</code></pre></div>
<p><a href="https://github.com/CondeNast/JSXHint">Check it out on GitHub...</a></p>
</blockquote>
@@ -164,7 +164,7 @@
<p>React is all about components. So let&#39;s build one.</p>
<p>Let&#39;s call it Table (to avoid any confusion what the component is about).</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Table</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="cm">/*stuff goeth here*/</span>
<span class="p">});</span>
</code></pre></div>
@@ -264,7 +264,7 @@
<p>This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.</p>
<p>The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MeteorMixin</span><span class="p">],</span>
<span class="nx">getMeteorState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -328,7 +328,7 @@
<p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
<h2><a class="anchor" name="usage"></a>Usage <a class="hash-link" href="#usage">#</a></h2>
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
@@ -339,21 +339,21 @@
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
</code></pre></div>
<p>For full paths to React files, use the <code>source</code> module:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="django"></a>Django <a class="hash-link" href="#django">#</a></h2>
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
<span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="installation"></a>Installation <a class="hash-link" href="#installation">#</a></h2>
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
<div class="highlight"><pre><code class="language-text" data-lang="text">$ pip install PyReact
</code></pre></div>
<p>Alternatively, add it into your <code>requirements</code> file:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
<div class="highlight"><pre><code class="language-text" data-lang="text">PyReact==0.1.1
</code></pre></div>
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
@@ -376,7 +376,7 @@
<blockquote>
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
<div class="highlight"><pre><code class="language-text" data-lang="text">% browserify -t reactify main.jsx
</code></pre></div>
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
@@ -384,7 +384,7 @@
</blockquote>
<h2><a class="anchor" name="react-integration-with-este"></a>React Integration with Este <a class="hash-link" href="#react-integration-with-este">#</a></h2>
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
<div class="highlight"><pre><code class="language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
<span class="nv">render: </span><span class="nf">-&gt;</span>
<span class="nx">@div</span> <span class="p">[</span>
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">&#39;items&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">]</span>
@@ -396,7 +396,7 @@
<span class="s">&#39;value&#39;</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">&#39;text&#39;</span><span class="p">]</span>
<span class="s">&#39;autoFocus&#39;</span><span class="o">:</span> <span class="kc">true</span>
<span class="s">&#39;ref&#39;</span><span class="o">:</span> <span class="s">&#39;textInput&#39;</span>
<span class="nx">@button</span> <span class="s">&quot;Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">&quot;</span>
<span class="nx">@button</span> <span class="s">&quot;Add #</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">&#39;items&#39;</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">&quot;</span>
<span class="p">]</span>
<span class="p">]</span>
</code></pre></div>
blog/page8/index.html
+7 -7
View File
@@ -105,18 +105,18 @@
</ol>
<h2><a class="anchor" name="packaging-react.js"></a>Packaging react.js <a class="hash-link" href="#packaging-react.js">#</a></h2>
<p>To make <code>react.js</code> available for use client-side, simply add <code>react</code> to your manifest, and declare the variant you&#39;d like to use in your environment. When you use <code>:production</code>, the minified and optimized <code>react.min.js</code> will be used instead of the development version. For example:</p>
<div class="highlight"><pre><code class="ruby language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
<div class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># config/environments/development.rb</span>
<span class="no">MyApp</span><span class="o">::</span><span class="no">Application</span><span class="o">.</span><span class="n">configure</span> <span class="k">do</span>
<span class="n">config</span><span class="o">.</span><span class="n">react</span><span class="o">.</span><span class="n">variant</span> <span class="o">=</span> <span class="ss">:development</span>
<span class="c1"># use :production in production.rb</span>
<span class="k">end</span>
</code></pre></div><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
</code></pre></div><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// app/assets/javascript/application.js</span>
<span class="c1">//= require react</span>
</code></pre></div><h2><a class="anchor" name="writing-jsx"></a>Writing JSX <a class="hash-link" href="#writing-jsx">#</a></h2>
<p>When you name your file with <code>myfile.js.jsx</code>, <code>react-rails</code> will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">)</span>
</code></pre></div><h2><a class="anchor" name="asset-pipeline"></a>Asset Pipeline <a class="hash-link" href="#asset-pipeline">#</a></h2>
<p><code>react-rails</code> takes advantage of the <a href="http://guides.rubyonrails.org/asset_pipeline.html">asset pipeline</a> that was introduced in Rails 3.1. A very important part of that pipeline is the <code>assets:precompile</code> Rake task. <code>react-rails</code> will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.</p>
@@ -204,7 +204,7 @@
</blockquote>
<h2><a class="anchor" name="react-chosen-wrapper"></a>React Chosen Wrapper <a class="hash-link" href="#react-chosen-wrapper">#</a></h2>
<p><a href="https://github.com/chenglou">Cheng Lou</a> wrote a wrapper for the <a href="http://harvesthq.github.io/chosen/">Chosen</a> input library called <a href="https://github.com/chenglou/react-chosen">react-chosen</a>. It took just 25 lines to be able to use jQuery component as a React one.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Chosen</span> <span class="nx">noResultsText</span><span class="o">=</span><span class="s2">&quot;No result&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">doSomething</span><span class="p">}</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Facebook&quot;</span><span class="o">&gt;</span><span class="nx">Facebook</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Harvest&quot;</span><span class="o">&gt;</span><span class="nx">Harvest</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
@@ -300,7 +300,7 @@ If you were using React without JSX previously, your code should still work.</li
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
<span class="c1">// An optional string prop named &quot;description&quot;.</span>
<span class="nx">description</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">string</span><span class="p">,</span>
@@ -315,7 +315,7 @@ If you were using React without JSX previously, your code should still work.</li
<span class="p">});</span>
</code></pre></div><h2><a class="anchor" name="default-values"></a>Default Values <a class="hash-link" href="#default-values">#</a></h2>
<p>One common pattern we&#39;ve seen with our React code is to do something like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="kd">var</span> <span class="nx">value</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">value</span> <span class="o">||</span> <span class="s1">&#39;default value&#39;</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="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
@@ -323,7 +323,7 @@ If you were using React without JSX previously, your code should still work.</li
<span class="p">});</span>
</code></pre></div>
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getDefaultProps</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="p">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;default value&#39;</span>
blog/page9/index.html
+6 -6
View File
@@ -169,7 +169,7 @@
<p>If you take a look at most of our current examples, you&#39;ll see us using <code>React.autoBind</code> for event handlers. This is used in place of <code>Function.prototype.bind</code>. Remember that in JS, <a href="http://bonsaiden.github.io/JavaScript-Garden/#function.this">function calls are late-bound</a>. That means that if you simply pass a function around, the <code>this</code> used inside won&#39;t necessarily be the <code>this</code> you expect. <code>Function.prototype.bind</code> creates a new, properly bound, function so that when called, <code>this</code> is exactly what you expect it to be.</p>
<p>Before we launched React, we would write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</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="p">;</span>
@@ -177,7 +177,7 @@
<span class="p">});</span>
</code></pre></div>
<p>We wrote <code>React.autoBind</code> as a way to cache the function creation and save on memory usage. Since <code>render</code> can get called multiple times, if you used <code>this.onClick.bind(this)</code> you would actually create a new function on each pass. With React v0.3 you were able to write this instead:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">}),</span>
</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
@@ -187,7 +187,7 @@
<p>After using <code>React.autoBind</code> for a few weeks, we realized that there were very few times that we didn&#39;t want that behavior. So we made it the default! Now all methods defined within <code>React.createClass</code> will already be bound to the correct instance.</p>
<p>Starting with v0.4 you can just write this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">onClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span><span class="cm">/* do something with this */</span><span class="p">},</span>
</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="hll"> <span class="k">return</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="k">this</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
@@ -222,14 +222,14 @@
<blockquote>
<p>Grunt task for compiling Facebook React&#39;s .jsx templates into .js</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">grunt</span><span class="p">.</span><span class="nx">initConfig</span><span class="p">({</span>
<span class="nx">react</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">app</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span> <span class="nx">extension</span><span class="o">:</span> <span class="s1">&#39;js&#39;</span> <span class="p">},</span>
<span class="nx">files</span><span class="o">:</span> <span class="p">{</span> <span class="s1">&#39;path/to/output/dir&#39;</span><span class="o">:</span> <span class="s1">&#39;path/to/jsx/templates/dir&#39;</span> <span class="p">}</span>
</code></pre></div>
<p>It also works great with <code>grunt-browserify</code>!</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">browserify</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">transform</span><span class="o">:</span> <span class="p">[</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;grunt-react&#39;</span><span class="p">).</span><span class="nx">browserify</span> <span class="p">]</span>
<span class="p">},</span>
@@ -260,7 +260,7 @@
<blockquote>
<p>Multiple people asked what&#39;s the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I&#39;m not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span><span class="nx">div</span><span class="p">,</span> <span class="nx">h3</span><span class="p">,</span> <span class="nx">textarea</span><span class="p">}</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span>
<span class="p">(</span><span class="nx">div</span> <span class="p">{</span><span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;MarkdownEditor&#39;</span><span class="p">},</span> <span class="p">[</span>
<span class="p">(</span><span class="nx">h3</span> <span class="p">{},</span> <span class="s1">&#39;Input&#39;</span><span class="p">),</span>
<span class="p">(</span><span class="nx">textarea</span> <span class="p">{</span><span class="nx">onKeyUp</span><span class="o">:</span> <span class="err">@</span><span class="nx">handleKeyUp</span><span class="p">,</span> <span class="nx">ref</span><span class="o">:</span> <span class="s1">&#39;textarea&#39;</span><span class="p">},</span>
docs/animation.html
+5 -5
View File
@@ -442,7 +442,7 @@
<p><code>ReactCSSTransitionGroup</code> is based on <code>ReactTransitionGroup</code> and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It&#39;s inspired by the excellent <a href="http://www.nganimate.org/">ng-animate</a> library.</p>
<h3><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h3>
<p><code>ReactCSSTransitionGroup</code> is the interface to <code>ReactTransitions</code>. This is a simple element that wraps all of the components you are interested in animating. Here&#39;s an example where we fade list items in and out.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">ReactCSSTransitionGroup</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">CSSTransitionGroup</span><span class="p">;</span>
@@ -482,7 +482,7 @@
<p>In this component, when a new item is added to <code>ReactCSSTransitionGroup</code> it will get the <code>example-enter</code> CSS class and the <code>example-enter-active</code> CSS class added in the next tick. This is a convention based on the <code>transitionName</code> prop.</p>
<p>You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:</p>
<div class="highlight"><pre><code class="css language-css" data-lang="css"><span class="nc">.example-enter</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-enter</span> <span class="p">{</span>
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
<span class="p">}</span>
@@ -492,7 +492,7 @@
<span class="p">}</span>
</code></pre></div>
<p>You&#39;ll notice that when you try to remove an item <code>ReactCSSTransitionGroup</code> keeps it in the DOM. If you&#39;re using an unminified build of React with add-ons you&#39;ll see a warning that React was expecting an animation or transition to occur. That&#39;s because <code>ReactCSSTransitionGroup</code> keeps your DOM elements on the page until the animation completes. Try adding this CSS:</p>
<div class="highlight"><pre><code class="css language-css" data-lang="css"><span class="nc">.example-leave</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.example-leave</span> <span class="p">{</span>
<span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
<span class="p">}</span>
@@ -502,7 +502,7 @@
<span class="p">}</span>
</code></pre></div><h3><a class="anchor" name="animating-one-or-zero-items"></a>Animating One or Zero Items <a class="hash-link" href="#animating-one-or-zero-items">#</a></h3>
<p>Although in the example above we rendered a list of items into <code>ReactCSSTransitionGroup</code>, the children of <code>ReactCSSTransitionGroup</code> can be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element, with the new element animating in while the current animates out. For example, we can implement a simple image carousel like this:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">ReactCSSTransitionGroup</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">CSSTransitionGroup</span><span class="p">;</span>
@@ -546,7 +546,7 @@
<p>This is called when the <code>willLeave</code> <code>callback</code> is called (at the same time as <code>componentWillUnmount</code>).</p>
<h3><a class="anchor" name="rendering-a-different-component"></a>Rendering a Different Component <a class="hash-link" href="#rendering-a-different-component">#</a></h3>
<p>By default <code>ReactTransitionGroup</code> renders as a <code>span</code>. You can change this behavior by providing a <code>component</code> prop. For example, here&#39;s how you would render a <code>&lt;ul&gt;</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="hll"><span class="o">&lt;</span><span class="nx">ReactTransitionGroup</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">ul</span><span class="p">}</span><span class="o">&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="o">&lt;</span><span class="nx">ReactTransitionGroup</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">ul</span><span class="p">}</span><span class="o">&gt;</span>
</span> <span class="p">...</span>
<span class="o">&lt;</span><span class="err">/ReactTransitionGroup&gt;</span>
</code></pre></div>
docs/class-name-manipulation.html
+2 -2
View File
@@ -440,7 +440,7 @@
<p><code>classSet()</code> is a neat utility for easily manipulating the DOM <code>class</code> string.</p>
<p>Here&#39;s a common scenario and its solution without <code>classSet()</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// inside some `&lt;Message /&gt;` React component</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// inside some `&lt;Message /&gt;` React component</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="kd">var</span> <span class="nx">classString</span> <span class="o">=</span> <span class="s1">&#39;message&#39;</span><span class="p">;</span>
<span class="k">if</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">isImportant</span><span class="p">)</span> <span class="p">{</span>
@@ -454,7 +454,7 @@
<span class="p">}</span>
</code></pre></div>
<p>This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. <code>classSet()</code> solves this problem:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">cx</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">classSet</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">classes</span> <span class="o">=</span> <span class="nx">cx</span><span class="p">({</span>
<span class="s1">&#39;message&#39;</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
docs/component-api.html
+9 -9
View File
@@ -439,7 +439,7 @@
<h2><a class="anchor" name="reactcomponent"></a>ReactComponent <a class="hash-link" href="#reactcomponent">#</a></h2>
<p>Component classes created by <code>React.createClass()</code> return instances of <code>ReactComponent</code> when called. Most of the time when you&#39;re using React you&#39;re either creating or consuming these component objects.</p>
<h3><a class="anchor" name="setstate"></a>setState <a class="hash-link" href="#setstate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">setState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
<h3><a class="anchor" name="setstate"></a>setState <a class="hash-link" href="#setstate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">setState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
</code></pre></div>
<p>Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks. In addition, you can supply an optional callback function that is executed once <code>setState</code> is completed and the component is re-rendered.</p>
@@ -454,26 +454,26 @@
<p><code>setState()</code> will always trigger a re-render unless conditional rendering logic is implemented in <code>shouldComponentUpdate()</code>. If mutable objects are being used and the logic cannot be implemented in <code>shouldComponentUpdate()</code>, calling <code>setState()</code> only when the new state differs from the previous state will avoid unnecessary re-renders.</p>
</blockquote>
<h3><a class="anchor" name="replacestate"></a>replaceState <a class="hash-link" href="#replacestate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">replaceState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
<h3><a class="anchor" name="replacestate"></a>replaceState <a class="hash-link" href="#replacestate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">replaceState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
</code></pre></div>
<p>Like <code>setState()</code> but deletes any pre-existing state keys that are not in nextState.</p>
<h3><a class="anchor" name="forceupdate"></a>forceUpdate() <a class="hash-link" href="#forceupdate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">forceUpdate</span><span class="p">([</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
<h3><a class="anchor" name="forceupdate"></a>forceUpdate() <a class="hash-link" href="#forceupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">forceUpdate</span><span class="p">([</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
</code></pre></div>
<p>If your <code>render()</code> method reads from something other than <code>this.props</code> or <code>this.state</code>, you&#39;ll need to tell React when it needs to re-run <code>render()</code> by calling <code>forceUpdate()</code>. You&#39;ll also need to call <code>forceUpdate()</code> if you mutate <code>this.state</code> directly.</p>
<p>Calling <code>forceUpdate()</code> will cause <code>render()</code> to be called on the component and its children, but React will still only update the DOM if the markup changes.</p>
<p>Normally you should try to avoid all uses of <code>forceUpdate()</code> and only read from <code>this.props</code> and <code>this.state</code> in <code>render()</code>. This makes your application much simpler and more efficient.</p>
<h3><a class="anchor" name="getdomnode"></a>getDOMNode <a class="hash-link" href="#getdomnode">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">DOMElement</span> <span class="nx">getDOMNode</span><span class="p">()</span>
<h3><a class="anchor" name="getdomnode"></a>getDOMNode <a class="hash-link" href="#getdomnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMElement</span> <span class="nx">getDOMNode</span><span class="p">()</span>
</code></pre></div>
<p>If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. When <code>render</code> returns <code>null</code> or <code>false</code>, <code>this.getDOMNode()</code> returns <code>null</code>.</p>
<h3><a class="anchor" name="ismounted"></a>isMounted() <a class="hash-link" href="#ismounted">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">bool</span> <span class="nx">isMounted</span><span class="p">()</span>
<h3><a class="anchor" name="ismounted"></a>isMounted() <a class="hash-link" href="#ismounted">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">bool</span> <span class="nx">isMounted</span><span class="p">()</span>
</code></pre></div>
<p><code>isMounted()</code> returns true if the component is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to <code>setState()</code> or <code>forceUpdate()</code>.</p>
<h3><a class="anchor" name="transferpropsto"></a>transferPropsTo <a class="hash-link" href="#transferpropsto">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">transferPropsTo</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">targetComponent</span><span class="p">)</span>
<h3><a class="anchor" name="transferpropsto"></a>transferPropsTo <a class="hash-link" href="#transferpropsto">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">transferPropsTo</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">targetComponent</span><span class="p">)</span>
</code></pre></div>
<p>Transfer properties from this component to a target component that have not already been set on the target component. After the props are updated, <code>targetComponent</code> is returned as a convenience. This function is useful when creating simple HTML-like components:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Avatar</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Avatar</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="k">this</span><span class="p">.</span><span class="nx">transferPropsTo</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="s2">&quot;/avatars/&quot;</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">userId</span> <span class="o">+</span> <span class="s2">&quot;.png&quot;</span><span class="p">}</span> <span class="nx">userId</span><span class="o">=</span><span class="p">{</span><span class="kc">null</span><span class="p">}</span> <span class="o">/&gt;</span>
@@ -490,7 +490,7 @@
<p>Use <code>transferPropsTo</code> with caution; it encourages tight coupling and makes it easy to accidentally introduce implicit dependencies between components. When in doubt, it&#39;s safer to explicitly copy the properties that you need onto the child component.</p>
</blockquote>
<h3><a class="anchor" name="setprops"></a>setProps <a class="hash-link" href="#setprops">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">setProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
<h3><a class="anchor" name="setprops"></a>setProps <a class="hash-link" href="#setprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">setProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
</code></pre></div>
<p>When you&#39;re integrating with an external JavaScript application you may want to signal a change to a React component rendered with <code>React.renderComponent()</code>.</p>
@@ -503,7 +503,7 @@
<p>This method can only be called on a root-level component. That is, it&#39;s only available on the component passed directly to <code>React.renderComponent()</code> and none of its children. If you&#39;re inclined to use <code>setProps()</code> on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it&#39;s created in <code>render()</code>.</p>
</blockquote>
<h3><a class="anchor" name="replaceprops"></a>replaceProps <a class="hash-link" href="#replaceprops">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">replaceProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
<h3><a class="anchor" name="replaceprops"></a>replaceProps <a class="hash-link" href="#replaceprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">replaceProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
</code></pre></div>
<p>Like <code>setProps()</code> but deletes any pre-existing props instead of merging the two objects.</p>
docs/component-specs.html
+17 -17
View File
@@ -439,7 +439,7 @@
<h2><a class="anchor" name="component-specifications"></a>Component Specifications <a class="hash-link" href="#component-specifications">#</a></h2>
<p>When creating a component class by invoking <code>React.createClass()</code>, you should provide a specification object that contains a <code>render</code> method and can optionally contain other lifecycle methods described here.</p>
<h3><a class="anchor" name="render"></a>render <a class="hash-link" href="#render">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">()</span>
<h3><a class="anchor" name="render"></a>render <a class="hash-link" href="#render">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">render</span><span class="p">()</span>
</code></pre></div>
<p>The <code>render()</code> method is required.</p>
@@ -448,24 +448,24 @@
<p>You can also return <code>null</code> or <code>false</code> to indicate that you don&#39;t want anything rendered. Behind the scenes, React renders a <code>&lt;noscript&gt;</code> tag to work with our current diffing algorithm. When returning <code>null</code> or <code>false</code>, <code>this.getDOMNode()</code> will return <code>null</code>.</p>
<p>The <code>render()</code> function should be <em>pure</em>, meaning that it does not modify component state, it returns the same result each time it&#39;s invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using <code>setTimeout</code>). If you need to interact with the browser, perform your work in <code>componentDidMount()</code> or the other lifecycle methods instead. Keeping <code>render()</code> pure makes server rendering more practical and makes components easier to think about.</p>
<h3><a class="anchor" name="getinitialstate"></a>getInitialState <a class="hash-link" href="#getinitialstate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getInitialState</span><span class="p">()</span>
<h3><a class="anchor" name="getinitialstate"></a>getInitialState <a class="hash-link" href="#getinitialstate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getInitialState</span><span class="p">()</span>
</code></pre></div>
<p>Invoked once before the component is mounted. The return value will be used as the initial value of <code>this.state</code>.</p>
<h3><a class="anchor" name="getdefaultprops"></a>getDefaultProps <a class="hash-link" href="#getdefaultprops">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getDefaultProps</span><span class="p">()</span>
<h3><a class="anchor" name="getdefaultprops"></a>getDefaultProps <a class="hash-link" href="#getdefaultprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getDefaultProps</span><span class="p">()</span>
</code></pre></div>
<p>Invoked once and cached when the class is created. Values in the mapping will be set on <code>this.props</code> if that prop is not specified by the parent component (i.e. using an <code>in</code> check).</p>
<p>This method is invoked before any instances are created and thus cannot rely on <code>this.props</code>. In addition, be aware that any complex objects returned by <code>getDefaultProps()</code> will be shared across instances, not copied.</p>
<h3><a class="anchor" name="proptypes"></a>propTypes <a class="hash-link" href="#proptypes">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">propTypes</span>
<h3><a class="anchor" name="proptypes"></a>propTypes <a class="hash-link" href="#proptypes">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">propTypes</span>
</code></pre></div>
<p>The <code>propTypes</code> object allows you to validate props being passed to your components. For more information about <code>propTypes</code>, see <a href="/react/docs/reusable-components.html">Reusable Components</a>.</p>
<h3><a class="anchor" name="mixins"></a>mixins <a class="hash-link" href="#mixins">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">mixins</span>
<h3><a class="anchor" name="mixins"></a>mixins <a class="hash-link" href="#mixins">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">mixins</span>
</code></pre></div>
<p>The <code>mixins</code> array allows you to use mixins to share behavior among multiple components. For more information about mixins, see <a href="/react/docs/reusable-components.html">Reusable Components</a>.</p>
<h3><a class="anchor" name="statics"></a>statics <a class="hash-link" href="#statics">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">statics</span>
<h3><a class="anchor" name="statics"></a>statics <a class="hash-link" href="#statics">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">statics</span>
</code></pre></div>
<p>The <code>statics</code> object allows you to define static methods that can be called on the component class. For example:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">statics</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">customMethod</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">foo</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">foo</span> <span class="o">===</span> <span class="s1">&#39;bar&#39;</span><span class="p">;</span>
@@ -478,15 +478,15 @@
<span class="nx">MyComponent</span><span class="p">.</span><span class="nx">customMethod</span><span class="p">(</span><span class="s1">&#39;bar&#39;</span><span class="p">);</span> <span class="c1">// true</span>
</code></pre></div>
<p>Methods defined within this block are <em>static</em>, meaning that you can run them before any component instances are created, and the methods do not have access to the props or state of your components. If you want to check the value of props in a static method, have the caller pass in the props as an argument to the static method.</p>
<h3><a class="anchor" name="displayname"></a>displayName <a class="hash-link" href="#displayname">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">displayName</span>
<h3><a class="anchor" name="displayname"></a>displayName <a class="hash-link" href="#displayname">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">displayName</span>
</code></pre></div>
<p>The <code>displayName</code> string is used in debugging messages. JSX sets this value automatically; see <a href="/react/docs/jsx-in-depth.html#react-composite-components">JSX in Depth</a>.</p>
<h2><a class="anchor" name="lifecycle-methods"></a>Lifecycle Methods <a class="hash-link" href="#lifecycle-methods">#</a></h2>
<p>Various methods are executed at specific points in a component&#39;s lifecycle.</p>
<h3><a class="anchor" name="mounting-componentwillmount"></a>Mounting: componentWillMount <a class="hash-link" href="#mounting-componentwillmount">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillMount</span><span class="p">()</span>
<h3><a class="anchor" name="mounting-componentwillmount"></a>Mounting: componentWillMount <a class="hash-link" href="#mounting-componentwillmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillMount</span><span class="p">()</span>
</code></pre></div>
<p>Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call <code>setState</code> within this method, <code>render()</code> will see the updated state and will be executed only once despite the state change.</p>
<h3><a class="anchor" name="mounting-componentdidmount"></a>Mounting: componentDidMount <a class="hash-link" href="#mounting-componentdidmount">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentDidMount</span><span class="p">()</span>
<h3><a class="anchor" name="mounting-componentdidmount"></a>Mounting: componentDidMount <a class="hash-link" href="#mounting-componentdidmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentDidMount</span><span class="p">()</span>
</code></pre></div>
<p>Invoked immediately after rendering occurs, only on the client (not on the server). At this point in the lifecycle, the component has a DOM representation which you can access via <code>this.getDOMNode()</code>.</p>
@@ -497,12 +497,12 @@
<p>Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling <code>this.getDOMNode()</code>.</p>
</blockquote>
<h3><a class="anchor" name="updating-componentwillreceiveprops"></a>Updating: componentWillReceiveProps <a class="hash-link" href="#updating-componentwillreceiveprops">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillReceiveProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">)</span>
<h3><a class="anchor" name="updating-componentwillreceiveprops"></a>Updating: componentWillReceiveProps <a class="hash-link" href="#updating-componentwillreceiveprops">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillReceiveProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">)</span>
</code></pre></div>
<p>Invoked when a component is receiving new props. This method is not called for the initial render.</p>
<p>Use this as an opportunity to react to a prop transition before <code>render()</code> is called by updating the state using <code>this.setState()</code>. The old props can be accessed via <code>this.props</code>. Calling <code>this.setState()</code> within this function will not trigger an additional render.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillReceiveProps</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillReceiveProps</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</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">likesIncreasing</span><span class="o">:</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">likeCount</span> <span class="o">&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">likeCount</span>
<span class="p">});</span>
@@ -513,13 +513,13 @@
<p>There is no analogous method <code>componentWillReceiveState</code>. An incoming prop transition may cause a state change, but the opposite is not true. If you need to perform operations in response to a state change, use <code>componentWillUpdate</code>.</p>
</blockquote>
<h3><a class="anchor" name="updating-shouldcomponentupdate"></a>Updating: shouldComponentUpdate <a class="hash-link" href="#updating-shouldcomponentupdate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">shouldComponentUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
<h3><a class="anchor" name="updating-shouldcomponentupdate"></a>Updating: shouldComponentUpdate <a class="hash-link" href="#updating-shouldcomponentupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">shouldComponentUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
</code></pre></div>
<p>Invoked before rendering when new props or state are being received. This method is not called for the initial render or when <code>forceUpdate</code> is used.</p>
<p>Use this as an opportunity to <code>return false</code> when you&#39;re certain that the
transition to the new props and state will not require a component update.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">nextProps</span><span class="p">.</span><span class="nx">id</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">id</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
@@ -528,7 +528,7 @@ transition to the new props and state will not require a component update.</p>
<p>By default, <code>shouldComponentUpdate</code> always returns true to prevent subtle bugs when <code>state</code> is mutated in place, but if you are careful to always treat <code>state</code> as immutable and to read only from <code>props</code> and <code>state</code> in <code>render()</code> then you can override <code>shouldComponentUpdate</code> with an implementation that compares the old props and state to their replacements.</p>
<p>If performance is a bottleneck, especially with dozens or hundreds of components, use <code>shouldComponentUpdate</code> to speed up your app.</p>
<h3><a class="anchor" name="updating-componentwillupdate"></a>Updating: componentWillUpdate <a class="hash-link" href="#updating-componentwillupdate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
<h3><a class="anchor" name="updating-componentwillupdate"></a>Updating: componentWillUpdate <a class="hash-link" href="#updating-componentwillupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
</code></pre></div>
<p>Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.</p>
@@ -539,7 +539,7 @@ transition to the new props and state will not require a component update.</p>
<p>You <em>cannot</em> use <code>this.setState()</code> in this method. If you need to update state in response to a prop change, use <code>componentWillReceiveProps</code> instead.</p>
</blockquote>
<h3><a class="anchor" name="updating-componentdidupdate"></a>Updating: componentDidUpdate <a class="hash-link" href="#updating-componentdidupdate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentDidUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">prevProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevState</span><span class="p">)</span>
<h3><a class="anchor" name="updating-componentdidupdate"></a>Updating: componentDidUpdate <a class="hash-link" href="#updating-componentdidupdate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentDidUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">prevProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevState</span><span class="p">)</span>
</code></pre></div>
<p>Invoked immediately after updating occurs. This method is not called for the initial render.</p>
@@ -550,7 +550,7 @@ transition to the new props and state will not require a component update.</p>
<p>Prior to v0.9, the DOM node was passed in as the last argument. If you were using this, you can still access the DOM node by calling <code>this.getDOMNode()</code>.</p>
</blockquote>
<h3><a class="anchor" name="unmounting-componentwillunmount"></a>Unmounting: componentWillUnmount <a class="hash-link" href="#unmounting-componentwillunmount">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">componentWillUnmount</span><span class="p">()</span>
<h3><a class="anchor" name="unmounting-componentwillunmount"></a>Unmounting: componentWillUnmount <a class="hash-link" href="#unmounting-componentwillunmount">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">componentWillUnmount</span><span class="p">()</span>
</code></pre></div>
<p>Invoked immediately before a component is unmounted from the DOM.</p>
docs/displaying-data.html
+2 -2
View File
@@ -440,7 +440,7 @@
<p>The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.</p>
<h2><a class="anchor" name="getting-started"></a>Getting Started <a class="hash-link" href="#getting-started">#</a></h2>
<p>Let&#39;s look at a really simple example. Create a <code>hello-react.html</code> file with the following code:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
@@ -458,7 +458,7 @@
<span class="nt">&lt;/html&gt;</span>
</code></pre></div>
<p>For the rest of the documentation, we&#39;ll just focus on the JavaScript code and assume it&#39;s inserted into a template like the one above. Replace the placeholder comment above with the following JS:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">HelloWorld</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
docs/events.html
+16 -16
View File
@@ -441,7 +441,7 @@
<p>Your event handlers will be passed instances of <code>SyntheticEvent</code>, a cross-browser wrapper around the browser&#39;s native event. It has the same interface as the browser&#39;s native event, including <code>stopPropagation()</code> and <code>preventDefault()</code>, except the events work identically across all browsers.</p>
<p>If you find that you need the underlying browser event for some reason, simply use the <code>nativeEvent</code> attribute to get it. Every <code>SyntheticEvent</code> object has the following attributes:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">bubbles</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">bubbles</span>
<span class="kr">boolean</span> <span class="nx">cancelable</span>
<span class="nx">DOMEventTarget</span> <span class="nx">currentTarget</span>
<span class="kr">boolean</span> <span class="nx">defaultPrevented</span>
@@ -458,16 +458,16 @@
different browsers.</p>
<h3><a class="anchor" name="clipboard-events"></a>Clipboard Events <a class="hash-link" href="#clipboard-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onCopy onCut onPaste
<div class="highlight"><pre><code class="language-text" data-lang="text">onCopy onCut onPaste
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">DOMDataTransfer</span> <span class="nx">clipboardData</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMDataTransfer</span> <span class="nx">clipboardData</span>
</code></pre></div><h3><a class="anchor" name="keyboard-events"></a>Keyboard Events <a class="hash-link" href="#keyboard-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onKeyDown onKeyPress onKeyUp
<div class="highlight"><pre><code class="language-text" data-lang="text">onKeyDown onKeyPress onKeyUp
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nb">Number</span> <span class="nx">charCode</span>
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
<span class="kd">function</span> <span class="nx">getModifierState</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
@@ -481,23 +481,23 @@ different browsers.</p>
<span class="nb">Number</span> <span class="nx">which</span>
</code></pre></div><h3><a class="anchor" name="focus-events"></a>Focus Events <a class="hash-link" href="#focus-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onFocus onBlur
<div class="highlight"><pre><code class="language-text" data-lang="text">onFocus onBlur
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
</code></pre></div><h3><a class="anchor" name="form-events"></a>Form Events <a class="hash-link" href="#form-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onChange onInput onSubmit
<div class="highlight"><pre><code class="language-text" data-lang="text">onChange onInput onSubmit
</code></pre></div>
<p>For more information about the onChange event, see <a href="/react/docs/forms.html">Forms</a>.</p>
<h3><a class="anchor" name="mouse-events"></a>Mouse Events <a class="hash-link" href="#mouse-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
<div class="highlight"><pre><code class="language-text" data-lang="text">onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
</code></pre></div>
<p>Properties: </p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nb">Number</span> <span class="nx">button</span>
<span class="nb">Number</span> <span class="nx">buttons</span>
<span class="nb">Number</span> <span class="nx">clientX</span>
@@ -516,10 +516,10 @@ onMouseMove onMouseOut onMouseOver onMouseUp
rendering any component.</p>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onTouchCancel onTouchEnd onTouchMove onTouchStart
<div class="highlight"><pre><code class="language-text" data-lang="text">onTouchCancel onTouchEnd onTouchMove onTouchStart
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
<span class="nx">DOMTouchList</span> <span class="nx">changedTouches</span>
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
<span class="kd">function</span> <span class="nx">getModifierState</span><span class="p">(</span><span class="nx">key</span><span class="p">)</span>
@@ -529,17 +529,17 @@ rendering any component.</p>
<span class="nx">DOMTouchList</span> <span class="nx">touches</span>
</code></pre></div><h3><a class="anchor" name="ui-events"></a>UI Events <a class="hash-link" href="#ui-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onScroll
<div class="highlight"><pre><code class="language-text" data-lang="text">onScroll
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">detail</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">detail</span>
<span class="nx">DOMAbstractView</span> <span class="nx">view</span>
</code></pre></div><h3><a class="anchor" name="wheel-events"></a>Wheel Events <a class="hash-link" href="#wheel-events">#</a></h3>
<p>Event names:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">onWheel
<div class="highlight"><pre><code class="language-text" data-lang="text">onWheel
</code></pre></div>
<p>Properties:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">deltaMode</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">deltaMode</span>
<span class="nb">Number</span> <span class="nx">deltaX</span>
<span class="nb">Number</span> <span class="nx">deltaY</span>
<span class="nb">Number</span> <span class="nx">deltaZ</span>
docs/flux-overview.html
+1 -1
View File
@@ -493,7 +493,7 @@ Views ---> (actions) ----> Dispatcher ---> (registered callback) ---> Stores ---
<p>As mentioned earlier, the dispatcher is also able to manage dependencies between stores. This functionality is available through the <code>waitFor()</code> method within the Dispatcher class. We did not need to use this method within the extremely simple <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc">TodoMVC application</a>, but we have included it <a href="https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/dispatcher/Dispatcher.js#L110">in the example dispatcher</a> as an example of what a dispatcher should be able to do in a larger, more complex application.</p>
<p>Within the TodoStore&#39;s registered callback we could explicitly wait for any dependencies to first update before moving forward:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="k">case</span> <span class="s1">&#39;TODO_CREATE&#39;</span><span class="o">:</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="k">case</span> <span class="s1">&#39;TODO_CREATE&#39;</span><span class="o">:</span>
<span class="nx">Dispatcher</span><span class="p">.</span><span class="nx">waitFor</span><span class="p">([</span>
<span class="nx">PrependedTextStore</span><span class="p">.</span><span class="nx">dispatcherIndex</span><span class="p">,</span>
<span class="nx">YetAnotherStore</span><span class="p">.</span><span class="nx">dispatcherIndex</span>
docs/flux-todo-list.html
+15 -15
View File
@@ -444,7 +444,7 @@
<p>The TodoMVC example has all this built into it as well, but if you&#39;re starting with react-boilerplate make sure you edit your package.json file to match the file structure and dependencies described in the TodoMVC example&#39;s <a href="https://github.com/facebook/flux/tree/master/examples/flux-todomvc/package.json">package.json</a>, or else your code won&#39;t match up with the explanations below.</p>
<h2><a class="anchor" name="source-code-structure"></a>Source Code Structure <a class="hash-link" href="#source-code-structure">#</a></h2>
<p>The resulting index.js file may be used as the entry point into our app, but we&#39;ll put most of our code in a &#39;js&#39; directory. Let&#39;s let Browserify do its thing, and now we&#39;ll open a new tab in Terminal (or a GUI file browser) to look at the directory. It should look something like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">myapp
<div class="highlight"><pre><code class="language-text" data-lang="text">myapp
|
+ ...
+ js
@@ -455,7 +455,7 @@
+ ...
</code></pre></div>
<p>Next we&#39;ll dive into the js directory, and layout our application&#39;s primary directory structure:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">myapp
<div class="highlight"><pre><code class="language-text" data-lang="text">myapp
|
+ ...
+ js
@@ -471,7 +471,7 @@
+ ...
</code></pre></div><h2><a class="anchor" name="creating-a-dispatcher"></a>Creating a Dispatcher <a class="hash-link" href="#creating-a-dispatcher">#</a></h2>
<p>Now we are ready to create a dispatcher. Here is an naive example of a Dispatcher class, written with JavaScript promises, polyfilled with Jake Archibald&#39;s <a href="https://github.com/jakearchibald/ES6-Promises">ES6-Promises</a> module.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Promise</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;es6-promise&#39;</span><span class="p">).</span><span class="nx">Promise</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Promise</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;es6-promise&#39;</span><span class="p">).</span><span class="nx">Promise</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">merge</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react/lib/merge&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">_callbacks</span> <span class="o">=</span> <span class="p">[];</span>
@@ -523,7 +523,7 @@
<p>The public API of this basic Dispatcher consists of only two methods: register() and dispatch(). We&#39;ll use register() within our stores to register each store&#39;s callback. We&#39;ll use dispatch() within our actions to trigger the invocation of the callbacks.</p>
<p>Now we are all set to create a dispatcher that is more specific to our app, which we&#39;ll call AppDispatcher.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Dispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./Dispatcher&#39;</span><span class="p">);</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Dispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./Dispatcher&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">merge</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react/lib/merge&#39;</span><span class="p">);</span>
@@ -548,7 +548,7 @@
<p>Now we&#39;ve created an implementation that is a bit more specific to our needs, with a helper function we can use in the actions coming from our views&#39; event handlers. We might expand on this later to provide a separate helper for server updates, but for now this is all we need.</p>
<h2><a class="anchor" name="creating-stores"></a>Creating Stores <a class="hash-link" href="#creating-stores">#</a></h2>
<p>We can use Node&#39;s EventEmitter to get started with a store. We need EventEmitter to broadcast the &#39;change&#39; event to our controller-views. So let&#39;s take a look at what that looks like. I&#39;ve omitted some of the code for the sake of brevity, but for the full version see <a href="https://github.com/Facebook/flux/blob/master/examples/flux-todomvc/js/stores/TodoStore.js">TodoStore.js</a> in the TodoMVC example code.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../dispatcher/AppDispatcher&#39;</span><span class="p">);</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">AppDispatcher</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../dispatcher/AppDispatcher&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">EventEmitter</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;events&#39;</span><span class="p">).</span><span class="nx">EventEmitter</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">TodoConstants</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../constants/TodoConstants&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">merge</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react/lib/merge&#39;</span><span class="p">);</span>
@@ -640,7 +640,7 @@
<p>Another important part is the registration of the store&#39;s callback with the dispatcher. We pass in our payload handling callback to the dispatcher and preserve the index that this store has in the dispatcher&#39;s registry. The callback function currently only handles two actionTypes, but later we can add as many as we need.</p>
<h2><a class="anchor" name="listening-to-changes-with-a-controller-view"></a>Listening to Changes with a Controller-View <a class="hash-link" href="#listening-to-changes-with-a-controller-view">#</a></h2>
<p>We need a React component near the top of our component hierarchy to listen for changes in the store. In a larger app, we would have more of these listening components, perhaps one for every section of the page. In Facebook&#39;s Ads Creation Tool, we have many of these controller-like views, each governing a specific section of the UI. In the Lookback Video Editor, we only had two: one for the animated preview and one for the image selection interface. Here&#39;s one for our TodoMVC example. Again, this is slightly abbreviated, but for the full code you can take a look at the TodoMVC example&#39;s <a href="https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/TodoApp.react.js">TodoApp.react.js</a></p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">Footer</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./Footer.react&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">Header</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./Header.react&#39;</span><span class="p">);</span>
@@ -697,7 +697,7 @@
<p>The Header component contains the primary text input for the application, but it does not need to know the state of the store. The MainSection and Footer do need this data, so we pass it down to them.</p>
<h2><a class="anchor" name="more-views"></a>More Views <a class="hash-link" href="#more-views">#</a></h2>
<p>At a high level, the React component hierarchy of the app looks like this:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">TodoApp</span><span class="o">&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">TodoApp</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">Header</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">TodoTextInput</span> <span class="o">/&gt;</span>
@@ -711,7 +711,7 @@
</code></pre></div>
<p>If a TodoItem is in edit mode, it will also render a TodoTextInput as a child. Let&#39;s take a look at how some of these components display the data they receive as props, and how they communicate through actions with the dispatcher.
The MainSection needs to iterate over the collection of to-do items it received from TodoApp to create the list of TodoItems. In the component&#39;s render() method, we can do that iteration like so:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</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">allTodos</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">allTodos</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">allTodos</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">key</span> <span class="k">in</span> <span class="nx">allTodos</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">todos</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">TodoItem</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">key</span><span class="p">}</span> <span class="nx">todo</span><span class="o">=</span><span class="p">{</span><span class="nx">allTodos</span><span class="p">[</span><span class="nx">key</span><span class="p">]}</span> <span class="o">/&gt;</span><span class="p">);</span>
@@ -724,7 +724,7 @@ The MainSection needs to iterate over the collection of to-do items it received
<span class="p">);</span>
</code></pre></div>
<p>Now each TodoItem can display its own text, and perform actions utilizing its own ID. Explaining all the different actions that a TodoItem can invoke in the TodoMVC example goes beyond the scope of this article, but let&#39;s just take a look at the action that deletes one of the to-do items. Here is an abbreviated version of the TodoItem:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">TodoActions</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../actions/TodoActions&#39;</span><span class="p">);</span>
@@ -765,7 +765,7 @@ The MainSection needs to iterate over the collection of to-do items it received
<p>As you&#39;ll see below, with every change to the input, React expects us to update the state of the component. So when we are finally ready to save the text inside the input, we will put the value held in the component&#39;s state in the action&#39;s payload. This is UI state, rather than application state, and keeping that distinction in mind is a good guide for where state should live. All application state should live in the store, while components occasionally hold on to UI state. Ideally, React components preserve as little state as possible.</p>
<p>Because TodoTextInput is being used in multiple places within our application, with different behaviors, we&#39;ll need to pass the onSave method in as a prop from the component&#39;s parent. This allows onSave to invoke different actions depending on where it is used.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ReactPropTypes</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">;</span>
@@ -842,7 +842,7 @@ The MainSection needs to iterate over the collection of to-do items it received
</code></pre></div>
<p>The Header passes in the onSave method as a prop to allow the TodoTextInput to create new
to-do items:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">TodoActions</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../actions/TodoActions&#39;</span><span class="p">);</span>
@@ -883,7 +883,7 @@ to-do items:</p>
<p>In a different context, such as in editing mode for an existing to-do item, we might pass an onSave callback that invokes <code>TodoActions.update(text)</code> instead.</p>
<h2><a class="anchor" name="creating-semantic-actions"></a>Creating Semantic Actions <a class="hash-link" href="#creating-semantic-actions">#</a></h2>
<p>Here is the basic code for the two actions we used above in our views:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * TodoActions</span>
<span class="cm"> */</span>
@@ -919,7 +919,7 @@ to-do items:</p>
<p>As you can see, we really would not need to have the helpers AppDispatcher.handleViewAction() or TodoActions.create(). We could, in theory, call AppDispatcher.dispatch() directly and provide a payload. But as our application grows, having these helpers keeps the code clean and semantic. It&#39;s just a lot cleaner to write TodoActions.destroy(id) instead of writing a whole lot of things that our TodoItem shouldn&#39;t have to know about.</p>
<p>The payload produced by the TodoActions.create() will look like:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="p">{</span>
<span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;VIEW_ACTION&#39;</span><span class="p">,</span>
<span class="nx">action</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;TODO_CREATE&#39;</span><span class="p">,</span>
@@ -930,7 +930,7 @@ to-do items:</p>
<p>This payload is provided to the TodoStore through its registered callback. The TodoStore then broadcasts the &#39;change&#39; event, and the MainSection responds by fetching the new collection of to-do items from the TodoStore and changing its state. This change in state causes the TodoApp component to call its own render() method, and the render() method of all of its descendents.</p>
<h2><a class="anchor" name="start-me-up"></a>Start Me Up <a class="hash-link" href="#start-me-up">#</a></h2>
<p>The bootstrap file of our application is app.js. It simply takes the TodoApp component and renders it in the root element of the application.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
@@ -944,7 +944,7 @@ to-do items:</p>
<p>As I said previously, our Dispatcher implementation is a bit naive. It&#39;s pretty good, but it will not suffice for most applications. We need a way to be able to manage dependencies between Stores. Let&#39;s add that functionality with a waitFor() method within the main body of the Dispatcher class.</p>
<p>We&#39;ll need another public method, waitFor(). Note that it returns a Promise that can in turn be returned from the Store callback.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="cm">/**</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="cm">/**</span>
<span class="cm"> * @param {array} promisesIndexes</span>
<span class="cm"> * @param {function} callback</span>
<span class="cm"> */</span>
docs/forms.html
+10 -10
View File
@@ -462,12 +462,12 @@
<p>Like all DOM events, the <code>onChange</code> prop is supported on all native components and can be used to listen to bubbled change events.</p>
<h2><a class="anchor" name="controlled-components"></a>Controlled Components <a class="hash-link" href="#controlled-components">#</a></h2>
<p>An <code>&lt;input&gt;</code> with <code>value</code> set is a <em>controlled</em> component. In a controlled <code>&lt;input&gt;</code>, the value of the rendered element will always reflect the <code>value</code> prop. For example:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <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">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Hello!&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>This will render an input that always has a value of <code>Hello!</code>. Any user input will have no effect on the rendered element because React has declared the value to be <code>Hello!</code>. If you wanted to update the value in response to user input, you could use the <code>onChange</code> event:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">getInitialState</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="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;Hello!&#39;</span><span class="p">};</span>
<span class="p">},</span>
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
@@ -479,21 +479,21 @@
<span class="p">}</span>
</code></pre></div>
<p>In this example, we are simply accepting the newest value provided by the user and updating the <code>value</code> prop of the <code>&lt;input&gt;</code> component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</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">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">140</span><span class="p">)});</span>
<span class="p">}</span>
</code></pre></div>
<p>This would accept user input but truncate the value to the first 140 characters.</p>
<h2><a class="anchor" name="uncontrolled-components"></a>Uncontrolled Components <a class="hash-link" href="#uncontrolled-components">#</a></h2>
<p>An <code>&lt;input&gt;</code> that does not supply a <code>value</code> (or sets it to <code>null</code>) is an <em>uncontrolled</em> component. In an uncontrolled <code>&lt;input&gt;</code>, the value of the rendered element will reflect the user&#39;s input. For example:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <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">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the <code>onChange</code> event just like you can with controlled components.</p>
<p>If you want to initialize the component with a non-empty value, you can supply a <code>defaultValue</code> prop. For example:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <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">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">defaultValue</span><span class="o">=</span><span class="s2">&quot;Hello!&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
@@ -502,28 +502,28 @@
<p>Likewise, <code>&lt;input&gt;</code> supports <code>defaultChecked</code> and <code>&lt;select&gt;</code> supports <code>defaultValue</code>.</p>
<h2><a class="anchor" name="advanced-topics"></a>Advanced Topics <a class="hash-link" href="#advanced-topics">#</a></h2><h3><a class="anchor" name="why-controlled-components"></a>Why Controlled Components? <a class="hash-link" href="#why-controlled-components">#</a></h3>
<p>Using form components such as <code>&lt;input&gt;</code> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;title&quot;</span> <span class="na">value=</span><span class="s">&quot;Untitled&quot;</span> <span class="nt">/&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">name=</span><span class="s">&quot;title&quot;</span> <span class="na">value=</span><span class="s">&quot;Untitled&quot;</span> <span class="nt">/&gt;</span>
</code></pre></div>
<p>This renders an input <em>initialized</em> with the value, <code>Untitled</code>. When the user updates the input, the node&#39;s value <em>property</em> will change. However, <code>node.getAttribute(&#39;value&#39;)</code> will still return the value used at initialization time, <code>Untitled</code>.</p>
<p>Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <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">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&quot;text&quot;</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;title&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;Untitled&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>Since this method describes the view at any point in time, the value of the text input should <em>always</em> be <code>Untitled</code>.</p>
<h3><a class="anchor" name="why-textarea-value"></a>Why Textarea Value? <a class="hash-link" href="#why-textarea-value">#</a></h3>
<p>In HTML, the value of <code>&lt;textarea&gt;</code> is usually set using its children:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"> <span class="c">&lt;!-- counterexample: DO NOT DO THIS! --&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="c">&lt;!-- counterexample: DO NOT DO THIS! --&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">name=</span><span class="s">&quot;description&quot;</span><span class="nt">&gt;</span>This is the description.<span class="nt">&lt;/textarea&gt;</span>
</code></pre></div>
<p>For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use <code>\n</code> if we want newlines. In a world where we have <code>value</code> and <code>defaultValue</code>, it is ambiguous what role children play. For this reason, you should not use children when setting <code>&lt;textarea&gt;</code> values:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="o">&lt;</span><span class="nx">textarea</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;description&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;This is a description.&quot;</span> <span class="o">/&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="o">&lt;</span><span class="nx">textarea</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;description&quot;</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;This is a description.&quot;</span> <span class="o">/&gt;</span>
</code></pre></div>
<p>If you <em>do</em> decide to use children, they will behave like <code>defaultValue</code>.</p>
<h3><a class="anchor" name="why-select-value"></a>Why Select Value? <a class="hash-link" href="#why-select-value">#</a></h3>
<p>The selected <code>&lt;option&gt;</code> in an HTML <code>&lt;select&gt;</code> is normally specified through that option&#39;s <code>selected</code> attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="o">&lt;</span><span class="nx">select</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;B&quot;</span><span class="o">&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="o">&lt;</span><span class="nx">select</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;B&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;A&quot;</span><span class="o">&gt;</span><span class="nx">Apple</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;B&quot;</span><span class="o">&gt;</span><span class="nx">Banana</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
<span class="o">&lt;</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;C&quot;</span><span class="o">&gt;</span><span class="nx">Cranberry</span><span class="o">&lt;</span><span class="err">/option&gt;</span>
docs/getting-started.html
+7 -7
View File
@@ -454,7 +454,7 @@
</div>
<p>In the root directory of the starter kit, create a <code>helloworld.html</code> with the following contents.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;build/react.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
@@ -475,23 +475,23 @@
<p>The XML syntax inside of JavaScript is called JSX; check out the <a href="/react/docs/jsx-in-depth.html">JSX syntax</a> to learn more about it. In order to translate it to vanilla JavaScript we use <code>&lt;script type=&quot;text/jsx&quot;&gt;</code> and include <code>JSXTransformer.js</code> to actually perform the transformation in the browser.</p>
<h3><a class="anchor" name="separate-file"></a>Separate File <a class="hash-link" href="#separate-file">#</a></h3>
<p>Your React JSX code can live in a separate file. Create the following <code>src/helloworld.js</code>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!&lt;</span><span class="err">/h1&gt;,</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div>
<p>Then reference it from <code>helloworld.html</code>:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/jsx&quot;</span> <span class="na">src=</span><span class="s">&quot;src/helloworld.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/jsx&quot;</span> <span class="na">src=</span><span class="s">&quot;src/helloworld.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h3><a class="anchor" name="offline-transform"></a>Offline Transform <a class="hash-link" href="#offline-transform">#</a></h3>
<p>First install the command-line tools (requires <a href="http://npmjs.org/">npm</a>):</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g react-tools
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g react-tools
</code></pre></div>
<p>Then, translate your <code>src/helloworld.js</code> file to plain JavaScript:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">jsx --watch src/ build/
<div class="highlight"><pre><code class="language-text" data-lang="text">jsx --watch src/ build/
</code></pre></div>
<p>The file <code>build/helloworld.js</code> is autogenerated whenever you make a change.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">h1</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">&#39;Hello, world!&#39;</span><span class="p">),</span>
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
@@ -504,7 +504,7 @@
</blockquote>
<p>Update your HTML file as below:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React!<span class="nt">&lt;/title&gt;</span>
docs/getting-started.zh-CN.html
+7 -7
View File
@@ -454,7 +454,7 @@
</div>
<p>在入门教程包的根目录，创建一个含有下面代码的 <code>helloworld.html</code></p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;build/react.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
@@ -475,23 +475,23 @@
<p>在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 <a href="/react/docs/jsx-in-depth.html">JSX 语法</a> 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 <code>&lt;script type=&quot;text/jsx&quot;&gt;</code> 标签包裹着含有 JSX 的代码，然后引入 <code>JSXTransformer.js</code> 库来实现在浏览器里的代码转换。</p>
<h3><a class="anchor" name=""></a>分离文件 <a class="hash-link" href="#">#</a></h3>
<p>你的 React JSX 代码文件可以写在另外的文件里。新建下面的 <code>src/helloworld.js</code>。</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!&lt;</span><span class="err">/h1&gt;,</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
<span class="p">);</span>
</code></pre></div>
<p>然后在 <code>helloworld.html</code> 引用该文件：</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/jsx&quot;</span> <span class="na">src=</span><span class="s">&quot;src/helloworld.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/jsx&quot;</span> <span class="na">src=</span><span class="s">&quot;src/helloworld.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h3><a class="anchor" name=""></a>离线转换 <a class="hash-link" href="#">#</a></h3>
<p>先安装命令行工具（依赖 <a href="http://npmjs.org/">npm</a>）：</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">npm install -g react-tools
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install -g react-tools
</code></pre></div>
<p>然后把你的 <code>src/helloworld.js</code> 文件转成标准的 JavaScript:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">jsx --watch src/ build/
<div class="highlight"><pre><code class="language-text" data-lang="text">jsx --watch src/ build/
</code></pre></div>
<p>只要你修改了， <code>build/helloworld.js</code> 文件会自动生成。</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">h1</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">&#39;Hello, world!&#39;</span><span class="p">),</span>
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;example&#39;</span><span class="p">)</span>
@@ -504,7 +504,7 @@
</blockquote>
<p>对照下面更新你的 HTML 代码</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React!<span class="nt">&lt;/title&gt;</span>
docs/index.html
+8 -6
View File
@@ -1,6 +1,8 @@
<html>
<head>
<meta http-equiv="refresh" content="0; getting-started.html">
</head>
<body></body>
</html>
<!DOCTYPE html>
<meta charset=utf-8>
<title>Redirecting...</title>
<link rel=canonical href="/react/docs/getting-started.html">
<meta http-equiv=refresh content="0; url=/react/docs/getting-started.html">
<h1>Redirecting...</h1>
<a href="/react/docs/getting-started.html">Click here if you are not redirected.</a>
<script>location='/react/docs/getting-started.html'</script>
docs/interactivity-and-dynamic-uis.html
+1 -1
View File
@@ -438,7 +438,7 @@
<div class="subHeader"></div>
<p>You&#39;ve already <a href="/react/docs/displaying-data.html">learned how to display data</a> with React. Now let&#39;s look at how to make our UIs interactive.</p>
<h2><a class="anchor" name="a-simple-example"></a>A Simple Example <a class="hash-link" href="#a-simple-example">#</a></h2><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<h2><a class="anchor" name="a-simple-example"></a>A Simple Example <a class="hash-link" href="#a-simple-example">#</a></h2><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">LikeButton</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
docs/jsx-gotchas.html
+8 -8
View File
@@ -446,30 +446,30 @@
</blockquote>
<h2><a class="anchor" name="html-entities"></a>HTML Entities <a class="hash-link" href="#html-entities">#</a></h2>
<p>You can insert HTML entities within literal text in JSX:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">First</span> <span class="o">&amp;</span><span class="nx">middot</span><span class="p">;</span> <span class="nx">Second</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="nx">First</span> <span class="o">&amp;</span><span class="nx">middot</span><span class="p">;</span> <span class="nx">Second</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div>
<p>If you want to display an HTML entity within dynamic content, you will run into double escaping issues as React escapes all the strings you are displaying in order to prevent a wide range of XSS attacks by default.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Bad: It displays &quot;First &amp;middot; Second&quot;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Bad: It displays &quot;First &amp;middot; Second&quot;</span>
<span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First &amp;middot; Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div>
<p>There are various ways to work-around this issue. The easiest one is to write unicode character directly in Javascript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First · Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First · Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div>
<p>A safer alternative is to find the <a href="http://www.fileformat.info/info/unicode/char/b7/index.htm">unicode number corresponding to the entity</a> and use it inside of a JavaScript string.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First \u00b7 Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First \u00b7 Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="s1">&#39;First &#39;</span> <span class="o">+</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="mi">183</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39; Second&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div>
<p>You can use mixed arrays with strings and JSX elements.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{[</span><span class="s1">&#39;First &#39;</span><span class="p">,</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;&amp;</span><span class="nx">middot</span><span class="p">;</span><span class="o">&lt;</span><span class="err">/span&gt;, &#39; Second&#39;]}&lt;/div&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{[</span><span class="s1">&#39;First &#39;</span><span class="p">,</span> <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;&amp;</span><span class="nx">middot</span><span class="p">;</span><span class="o">&lt;</span><span class="err">/span&gt;, &#39; Second&#39;]}&lt;/div&gt;</span>
</code></pre></div>
<p>As a last resort, you always have the ability to insert raw HTML.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">dangerouslySetInnerHTML</span><span class="o">=</span><span class="p">{{</span><span class="nx">__html</span><span class="o">:</span> <span class="s1">&#39;First &amp;middot; Second&#39;</span><span class="p">}}</span> <span class="o">/&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">dangerouslySetInnerHTML</span><span class="o">=</span><span class="p">{{</span><span class="nx">__html</span><span class="o">:</span> <span class="s1">&#39;First &amp;middot; Second&#39;</span><span class="p">}}</span> <span class="o">/&gt;</span>
</code></pre></div><h2><a class="anchor" name="custom-html-attributes"></a>Custom HTML Attributes <a class="hash-link" href="#custom-html-attributes">#</a></h2>
<p>If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with <code>data-</code>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">data</span><span class="o">-</span><span class="nx">custom</span><span class="o">-</span><span class="nx">attribute</span><span class="o">=</span><span class="s2">&quot;foo&quot;</span> <span class="o">/&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">data</span><span class="o">-</span><span class="nx">custom</span><span class="o">-</span><span class="nx">attribute</span><span class="o">=</span><span class="s2">&quot;foo&quot;</span> <span class="o">/&gt;</span>
</code></pre></div>
<p><a href="http://www.w3.org/WAI/intro/aria">Web Accessibility</a> attributes starting with <code>aria-</code> will be rendered properly.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">aria</span><span class="o">-</span><span class="nx">hidden</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">aria</span><span class="o">-</span><span class="nx">hidden</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/&gt;</span>
</code></pre></div>
<div class="docs-prevnext">
docs/jsx-in-depth.html
+9 -9
View File
@@ -450,7 +450,7 @@ with React.</p>
<h2><a class="anchor" name="why-jsx"></a>Why JSX? <a class="hash-link" href="#why-jsx">#</a></h2>
<p>React works out of the box without JSX. Simply construct your markup using the
functions on <code>React.DOM</code>. For example, here&#39;s how to construct a simple link:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">a</span><span class="p">({</span><span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;http://facebook.github.io/react&#39;</span><span class="p">},</span> <span class="s1">&#39;React&#39;</span><span class="p">);</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">a</span><span class="p">({</span><span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;http://facebook.github.io/react&#39;</span><span class="p">},</span> <span class="s1">&#39;React&#39;</span><span class="p">);</span>
</code></pre></div>
<p>We recommend using JSX for many reasons:</p>
@@ -462,7 +462,7 @@ functions on <code>React.DOM</code>. For example, here&#39;s how to construct a
<h2><a class="anchor" name="the-transform"></a>The Transform <a class="hash-link" href="#the-transform">#</a></h2>
<p>JSX transforms from an XML-like syntax into native JavaScript. XML elements and
attributes are transformed into function calls and objects, respectively.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
<span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="c1">// Output (JS):</span>
@@ -471,7 +471,7 @@ attributes are transformed into function calls and objects, respectively.</p>
<p>Notice that in order to use <code>&lt;Nav /&gt;</code>, the <code>Nav</code> variable must be in scope.</p>
<p>JSX also allows specifying children using XML syntax:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">,</span> <span class="nx">Profile</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">,</span> <span class="nx">Profile</span><span class="p">;</span>
<span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span><span class="o">&gt;&lt;</span><span class="nx">Profile</span><span class="o">&gt;</span><span class="nx">click</span><span class="o">&lt;</span><span class="err">/Profile&gt;&lt;/Nav&gt;;</span>
<span class="c1">// Output (JS):</span>
@@ -502,12 +502,12 @@ React in mind. The two valid uses of JSX are:</p>
</ul>
<h3><a class="anchor" name="react-dom-components"></a>React DOM Components <a class="hash-link" href="#react-dom-components">#</a></h3>
<p>To construct a <code>&lt;div&gt;</code> is to create a variable that refers to <code>React.DOM.div</code>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&quot;appClass&quot;</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">React</span><span class="o">!&lt;</span><span class="err">/div&gt;;</span>
</code></pre></div><h3><a class="anchor" name="react-composite-components"></a>React Composite Components <a class="hash-link" href="#react-composite-components">#</a></h3>
<p>To construct an instance of a composite component, create a variable that
references the class.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span><span class="cm">/*...*/</span><span class="p">});</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span><span class="cm">/*...*/</span><span class="p">});</span>
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="nx">someProperty</span><span class="o">=</span><span class="p">{</span><span class="kc">true</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
</code></pre></div>
<p>JSX will infer the component&#39;s name from the variable assignment and specify
@@ -527,7 +527,7 @@ as XML attribute names. Instead, React DOM components expect attributes like
(e.g. <code>var div, span, h1, h2, ...</code>). JSX provides a convenience to address this
problem by allowing you to specify a variable in an <code>@jsx</code> docblock field. JSX
will use that field to find DOM components.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/**</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * @jsx React.DOM</span>
<span class="cm"> */</span>
<span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
@@ -546,19 +546,19 @@ used elements. In general, JSX has no notion of the DOM.</p>
<h2><a class="anchor" name="javascript-expressions"></a>JavaScript Expressions <a class="hash-link" href="#javascript-expressions">#</a></h2><h3><a class="anchor" name="attribute-expressions"></a>Attribute Expressions <a class="hash-link" href="#attribute-expressions">#</a></h3>
<p>To use a JavaScript expression as an attribute value, wrap the expression in a
pair of curly braces (<code>{}</code>) instead of quotes (<code>&quot;&quot;</code>).</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Person</span> <span class="nx">name</span><span class="o">=</span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">name</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">name</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">});</span>
</code></pre></div><h3><a class="anchor" name="child-expressions"></a>Child Expressions <a class="hash-link" href="#child-expressions">#</a></h3>
<p>Likewise, JavaScript expressions may be used to express children:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">Container</span><span class="o">&gt;</span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o">&lt;</span><span class="nx">Nav</span> <span class="o">/&gt;</span> <span class="o">:</span> <span class="o">&lt;</span><span class="nx">Login</span> <span class="o">/&gt;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Container&gt;;</span>
<span class="c1">// Output (JS):</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="o">:</span> <span class="nx">Login</span><span class="p">(</span><span class="kc">null</span><span class="p">));</span>
</code></pre></div><h3><a class="anchor" name="comments"></a>Comments <a class="hash-link" href="#comments">#</a></h3>
<p>It&#39;s easy to add comments within your JSX; they&#39;re just JS expressions. You just need to be careful to put <code>{}</code> around the comments when you are within the children section of a tag.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="p">(</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Nav</span><span class="o">&gt;</span>
<span class="p">{</span><span class="cm">/* child comment, put {} around */</span><span class="p">}</span>
<span class="o">&lt;</span><span class="nx">Person</span>
docs/more-about-refs.html
+12 -10
View File
@@ -440,7 +440,7 @@
<p>After returning the structure of your UI from the render method, you may find yourself wanting to &quot;reach out&quot; and invoke methods on component instances returned from render. Often, doing something like this isn&#39;t necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent <code>props</code> are sent to each child that is output from <code>render()</code>. However there are a few cases, where it still might be necessary or beneficial.</p>
<p>Consider the case when you wish to tell an <code>&lt;input /&gt;</code> element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, <code>&#39;&#39;</code>.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</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="p">{</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">};</span>
<span class="p">},</span>
@@ -475,7 +475,7 @@
</blockquote>
<p>This means that you should never &quot;hold onto&quot; something that you return from <code>render()</code> and then expect it to be anything meaningful.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="c1">// counterexample: DO NOT DO THIS!</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="c1">// counterexample: DO NOT DO THIS!</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="kd">var</span> <span class="nx">myInput</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">input</span> <span class="o">/&gt;</span><span class="p">;</span> <span class="c1">// I&#39;m going to try to call methods on this</span>
<span class="k">this</span><span class="p">.</span><span class="nx">rememberThisInput</span> <span class="o">=</span> <span class="nx">myInput</span><span class="p">;</span> <span class="c1">// input at some point in the future! YAY!</span>
@@ -496,15 +496,17 @@
<p>It&#39;s as simple as:</p>
<ol>
<li><p>Assign a <code>ref</code> attribute to anything returned from <code>render</code> such as:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">ref=</span><span class="s">&quot;myInput&quot;</span> <span class="nt">/&gt;</span>
</code></pre></div></li>
<li><p>In some other code (typically event handler code), access the <strong>backing instance</strong> via <code>this.refs</code> as in:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myInput</span>
</code></pre></div>
<p>You can access the component&#39;s DOM node directly by calling <code>this.refs.myInput.getDOMNode()</code>.</p></li>
<li>Assign a <code>ref</code> attribute to anything returned from <code>render</code> such as:</li>
</ol>
<h2><a class="anchor" name="completing-the-example"></a>Completing the Example <a class="hash-link" href="#completing-the-example">#</a></h2><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt">&lt;input</span> <span class="na">ref=</span><span class="s">&quot;myInput&quot;</span> <span class="nt">/&gt;</span>
</code></pre></div>
<ol>
<li>In some other code (typically event handler code), access the <strong>backing instance</strong> via <code>this.refs</code> as in:</li>
</ol>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myInput</span>
</code></pre></div>
<p>You can access the component&#39;s DOM node directly by calling <code>this.refs.myInput.getDOMNode()</code>.</p>
<h2><a class="anchor" name="completing-the-example"></a>Completing the Example <a class="hash-link" href="#completing-the-example">#</a></h2><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</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="p">{</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">};</span>
<span class="p">},</span>
docs/multiple-components.html
+6 -6
View File
@@ -442,7 +442,7 @@
<p>By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can <em>separate the different concerns</em> of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.</p>
<h2><a class="anchor" name="composition-example"></a>Composition Example <a class="hash-link" href="#composition-example">#</a></h2>
<p>Let&#39;s create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">Avatar</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
@@ -483,12 +483,12 @@
<p>It&#39;s important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, <code>Avatar</code> owns the <code>div</code>, <code>ProfilePic</code> and <code>ProfileLink</code> instances, and <code>div</code> is the <strong>parent</strong> (but not owner) of the <code>ProfilePic</code> and <code>ProfileLink</code> instances.</p>
<h2><a class="anchor" name="children"></a>Children <a class="hash-link" href="#children">#</a></h2>
<p>When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">Parent</span><span class="o">&gt;&lt;</span><span class="nx">Child</span> <span class="o">/&gt;&lt;</span><span class="err">/Parent&gt;</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">Parent</span><span class="o">&gt;&lt;</span><span class="nx">Child</span> <span class="o">/&gt;&lt;</span><span class="err">/Parent&gt;</span>
</code></pre></div>
<p><code>Parent</code> can read its children by accessing the special <code>this.props.children</code> prop. <strong><code>this.props.children</code> is an opaque data structure:</strong> use the <a href="/react/docs/top-level-api.html#react.children">React.Children utilities</a> to manipulate them.</p>
<h3><a class="anchor" name="child-reconciliation"></a>Child Reconciliation <a class="hash-link" href="#child-reconciliation">#</a></h3>
<p><strong>Reconciliation is the process by which React updates the DOM with each new render pass.</strong> In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html">// Render Pass 1
<div class="highlight"><pre><code class="language-html" data-lang="html">// Render Pass 1
<span class="nt">&lt;Card&gt;</span>
<span class="nt">&lt;p&gt;</span>Paragraph 1<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Paragraph 2<span class="nt">&lt;/p&gt;</span>
@@ -503,7 +503,7 @@
<p>For most components, this is not a big deal. However, for stateful components that maintain data in <code>this.state</code> across render passes, this can be very problematic.</p>
<p>In most cases, this can be sidestepped by hiding elements instead of destroying them:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html">// Render Pass 1
<div class="highlight"><pre><code class="language-html" data-lang="html">// Render Pass 1
<span class="nt">&lt;Card&gt;</span>
<span class="nt">&lt;p&gt;</span>Paragraph 1<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>Paragraph 2<span class="nt">&lt;/p&gt;</span>
@@ -515,7 +515,7 @@
<span class="nt">&lt;/Card&gt;</span>
</code></pre></div><h3><a class="anchor" name="dynamic-children"></a>Dynamic Children <a class="hash-link" href="#dynamic-children">#</a></h3>
<p>The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a <code>key</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">results</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">results</span><span class="p">;</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">ol</span><span class="o">&gt;</span>
@@ -529,7 +529,7 @@
<p>When React reconciles the keyed children, it will ensure that any child with <code>key</code> will be reordered (instead of clobbered) or destroyed (instead of reused).</p>
<p>You can also key children by passing an object. The object keys will be used as <code>key</code> for each value. However it is important to remember that JavaScript does not guarantee the ordering of properties will be preserved. In practice browsers will preserve property order <strong>except</strong> for properties that can be parsed as a 32-bit unsigned integers. Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</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">results</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
docs/perf.html
+1 -1
View File
@@ -472,7 +472,7 @@
<p>The above print methods use <code>Perf.getLastMeasurements()</code> to pretty-print the result.</p>
<h3><a class="anchor" name="perf.getlastmeasurements"></a><code>Perf.getLastMeasurements()</code> <a class="hash-link" href="#perf.getlastmeasurements">#</a></h3>
<p>Get the measurements array from the last start-stop session. The array contains objects, each of which looks like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="p">{</span>
<span class="c1">// The term &quot;inclusive&quot; and &quot;exclusive&quot; are explained below</span>
<span class="s2">&quot;exclusive&quot;</span><span class="o">:</span> <span class="p">{},</span>
<span class="c1">// &#39;.0.0&#39; is the React ID of the node</span>
docs/pure-render-mixin.html
+1 -1
View File
@@ -440,7 +440,7 @@
<p>If your React component&#39;s render function is &quot;pure&quot; (in other words, it renders the same result given the same props and state), you can use this mixin for a performance boost in some cases.</p>
<p>Example:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">PureRenderMixin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">).</span><span class="nx">addons</span><span class="p">.</span><span class="nx">PureRenderMixin</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">PureRenderMixin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">).</span><span class="nx">addons</span><span class="p">.</span><span class="nx">PureRenderMixin</span><span class="p">;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">PureRenderMixin</span><span class="p">],</span>
docs/reconciliation.html
+7 -7
View File
@@ -455,12 +455,12 @@
<p>In order to do a tree diff, we first need to be able to diff two nodes. There are three different cases being handled.</p>
<h3><a class="anchor" name="different-node-types"></a>Different Node Types <a class="hash-link" href="#different-node-types">#</a></h3>
<p>If the node type is different, React is going to treat them as two different sub-trees, throw away the first one and build/insert the second one. </p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="nt">/&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="nt">/&gt;</span>
renderB: <span class="nt">&lt;span</span> <span class="nt">/&gt;</span>
=&gt; [removeNode <span class="nt">&lt;div</span> <span class="nt">/&gt;</span>], [insertNode <span class="nt">&lt;span</span> <span class="nt">/&gt;</span>]
</code></pre></div>
<p>The same logic is used for custom components. If they are not of the same type, React is not going to even try at matching what they render. It is just going to remove the first one from the DOM and insert the second one.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;Header</span> <span class="nt">/&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;Header</span> <span class="nt">/&gt;</span>
renderB: <span class="nt">&lt;Content</span> <span class="nt">/&gt;</span>
=&gt; [removeNode <span class="nt">&lt;Header</span> <span class="nt">/&gt;</span>], [insertNode <span class="nt">&lt;Content</span> <span class="nt">/&gt;</span>]
</code></pre></div>
@@ -471,12 +471,12 @@ renderB: <span class="nt">&lt;Content</span> <span class="nt">/&gt;</span>
<p>As a corollary, if there is a <code>&lt;Header&gt;</code> element at the same position in two consecutive renders, you would expect to see a very similar structure and it is worth exploring it.</p>
<h3><a class="anchor" name="dom-nodes"></a>DOM Nodes <a class="hash-link" href="#dom-nodes">#</a></h3>
<p>When comparing two DOM nodes, we look at the attributes of both and can decide which of them changed in linear time.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;before&quot;</span> <span class="nt">/&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;before&quot;</span> <span class="nt">/&gt;</span>
renderB: <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;after&quot;</span> <span class="nt">/&gt;</span>
=&gt; [replaceAttribute id &quot;after&quot;]
</code></pre></div>
<p>Instead of treating style as an opaque string, a key-value object is used instead. This lets us update only the properties that changed.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{{color:</span> <span class="err">&#39;red&#39;}}</span> <span class="nt">/&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{{color:</span> <span class="err">&#39;red&#39;}}</span> <span class="nt">/&gt;</span>
renderB: <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">{{fontWeight:</span> <span class="err">&#39;bold&#39;}}</span> <span class="nt">/&gt;</span>
=&gt; [removeStyle color], [addStyle font-weight &#39;bold&#39;]
</code></pre></div>
@@ -489,19 +489,19 @@ renderB: <span class="nt">&lt;div</span> <span class="na">style=</span><span cla
<p>In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there&#39;s a difference.</p>
<p>For example if you add an element at the end:</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
renderB: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;span&gt;</span>second<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
=&gt; [insertNode <span class="nt">&lt;span&gt;</span>second<span class="nt">&lt;/span&gt;</span>]
</code></pre></div>
<p>Inserting an element at the beginning is problematic. React is going to see that both nodes are spans and therefore run into a mutation mode.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
renderB: <span class="nt">&lt;div&gt;&lt;span&gt;</span>second<span class="nt">&lt;/span&gt;&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
=&gt; [replaceAttribute textContent &#39;second&#39;], [insertNode <span class="nt">&lt;span&gt;</span>first<span class="nt">&lt;/span&gt;</span>]
</code></pre></div>
<p>There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. <a href="http://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein distance</a> can find the minimum using single element insertion, deletion and substitution in O(n<sup>2</sup>). Even if we were to use Levenshtein, this doesn&#39;t find when a node has moved into another position and algorithms to do that have much worse complexity.</p>
<h3><a class="anchor" name="keys"></a>Keys <a class="hash-link" href="#keys">#</a></h3>
<p>In order to solve this seemingly intractable issue, an optional attribute has been introduced. You can provide for each child a key that is going to be used to do the matching. If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table.</p>
<div class="highlight"><pre><code class="xml language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span</span> <span class="na">key=</span><span class="s">&quot;first&quot;</span><span class="nt">&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
<div class="highlight"><pre><code class="language-xml" data-lang="xml">renderA: <span class="nt">&lt;div&gt;&lt;span</span> <span class="na">key=</span><span class="s">&quot;first&quot;</span><span class="nt">&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
renderB: <span class="nt">&lt;div&gt;&lt;span</span> <span class="na">key=</span><span class="s">&quot;second&quot;</span><span class="nt">&gt;</span>second<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">key=</span><span class="s">&quot;first&quot;</span><span class="nt">&gt;</span>first<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
=&gt; [insertNode <span class="nt">&lt;span&gt;</span>second<span class="nt">&lt;/span&gt;</span>]
</code></pre></div>
docs/reference.html
+8 -6
View File
@@ -1,6 +1,8 @@
<html>
<head>
<meta http-equiv="refresh" content="0; top-level-api.html">
</head>
<body></body>
</html>
<!DOCTYPE html>
<meta charset=utf-8>
<title>Redirecting...</title>
<link rel=canonical href="/react/docs/top-level-api.html">
<meta http-equiv=refresh content="0; url=/react/docs/top-level-api.html">
<h1>Redirecting...</h1>
<a href="/react/docs/top-level-api.html">Click here if you are not redirected.</a>
<script>location='/react/docs/top-level-api.html'</script>
docs/reusable-components.html
+5 -5
View File
@@ -440,7 +440,7 @@
<p>When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.</p>
<h2><a class="anchor" name="prop-validation"></a>Prop Validation <a class="hash-link" href="#prop-validation">#</a></h2>
<p>As your app grows it&#39;s helpful to ensure that your components are used correctly. We do this by allowing you to specify <code>propTypes</code>. <code>React.PropTypes</code> exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons <code>propTypes</code> is only checked in development mode. Here is an example documenting the different validators provided:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
<span class="c1">// You can declare that a prop is a specific JS primitive. By default, these</span>
<span class="c1">// are all optional.</span>
@@ -505,7 +505,7 @@
<span class="p">});</span>
</code></pre></div><h2><a class="anchor" name="default-prop-values"></a>Default Prop Values <a class="hash-link" href="#default-prop-values">#</a></h2>
<p>React lets you define default values for your <code>props</code> in a very declarative way:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ComponentWithDefaultProps</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ComponentWithDefaultProps</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getDefaultProps</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="p">{</span>
<span class="nx">value</span><span class="o">:</span> <span class="s1">&#39;default value&#39;</span>
@@ -517,7 +517,7 @@
<p>The result of <code>getDefaultProps()</code> will be cached and used to ensure that <code>this.props.value</code> will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.</p>
<h2><a class="anchor" name="transferring-props-a-shortcut"></a>Transferring Props: A Shortcut <a class="hash-link" href="#transferring-props-a-shortcut">#</a></h2>
<p>A common type of React component is one that extends a basic HTML in a simple way. Often you&#39;ll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides <code>transferPropsTo()</code> to do just this.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">CheckLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
@@ -536,7 +536,7 @@
</code></pre></div><h2><a class="anchor" name="single-child"></a>Single Child <a class="hash-link" href="#single-child">#</a></h2>
<p>With <code>React.PropTypes.component</code> you can specify that only a single child can be passed to
a component as children.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">children</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">component</span><span class="p">.</span><span class="nx">isRequired</span>
<span class="p">},</span>
@@ -554,7 +554,7 @@ a component as children.</p>
<p>Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called <a href="http://en.wikipedia.org/wiki/Cross-cutting_concern">cross-cutting concerns</a>. React provides <code>mixins</code> to solve this problem.</p>
<p>One common use case is a component wanting to update itself on a time interval. It&#39;s easy to use <code>setInterval()</code>, but it&#39;s important to cancel your interval when you don&#39;t need it anymore to save memory. React provides <a href="/react/docs/working-with-the-browser.html#component-lifecycle">lifecycle methods</a> that let you know when a component is about to be created or destroyed. Let&#39;s create a simple mixin that uses these methods to provide an easy <code>setInterval()</code> function that will automatically get cleaned up when your component is destroyed.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">SetIntervalMixin</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
docs/tags-and-attributes.html
+4 -4
View File
@@ -441,7 +441,7 @@
<p>React attempts to support all common elements. If you need an element that isn&#39;t listed here, please file an issue.</p>
<h3><a class="anchor" name="html-elements"></a>HTML Elements <a class="hash-link" href="#html-elements">#</a></h3>
<p>The following HTML elements are supported:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">a abbr address area article aside audio b base bdi bdo big blockquote body br
<div class="highlight"><pre><code class="language-text" data-lang="text">a abbr address area article aside audio b base bdi bdo big blockquote body br
button canvas caption cite code col colgroup data datalist dd del details dfn
div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
head header hr html i iframe img input ins kbd keygen label legend li link
@@ -451,7 +451,7 @@ source span strong style sub summary sup table tbody td textarea tfoot th
thead time title tr track u ul var video wbr
</code></pre></div><h3><a class="anchor" name="svg-elements"></a>SVG elements <a class="hash-link" href="#svg-elements">#</a></h3>
<p>The following SVG elements are supported:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">circle defs ellipse g line linearGradient mask path pattern polygon polyline
<div class="highlight"><pre><code class="language-text" data-lang="text">circle defs ellipse g line linearGradient mask path pattern polygon polyline
radialGradient rect stop svg text tspan
</code></pre></div>
<p>You may also be interested in <a href="https://github.com/facebook/react-art">react-art</a>, a drawing library for React that can render to Canvas, SVG, or VML (for IE8).</p>
@@ -467,7 +467,7 @@ radialGradient rect stop svg text tspan
<p>For a list of events, see <a href="/react/docs/events.html">Supported Events</a>.</p>
<h3><a class="anchor" name="html-attributes"></a>HTML Attributes <a class="hash-link" href="#html-attributes">#</a></h3>
<p>These standard attributes are supported:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">accept accessKey action allowFullScreen allowTransparency alt async
<div class="highlight"><pre><code class="language-text" data-lang="text">accept accessKey action allowFullScreen allowTransparency alt async
autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
className cols colSpan content contentEditable contextMenu controls coords
crossOrigin data dateTime defer dir disabled download draggable encType form
@@ -487,7 +487,7 @@ style tabIndex target title type useMap value width wmode
</ul>
<p>There is also the React-specific attribute <code>dangerouslySetInnerHTML</code> (<a href="/react/docs/special-non-dom-attributes.html">more here</a>), used for directly inserting HTML strings into a component.</p>
<h3><a class="anchor" name="svg-attributes"></a>SVG Attributes <a class="hash-link" href="#svg-attributes">#</a></h3><div class="highlight"><pre><code class="text language-text" data-lang="text">cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform
<h3><a class="anchor" name="svg-attributes"></a>SVG Attributes <a class="hash-link" href="#svg-attributes">#</a></h3><div class="highlight"><pre><code class="language-text" data-lang="text">cx cy d dx dy fill fillOpacity fontFamily fontSize fx fy gradientTransform
gradientUnits markerEnd markerMid markerStart offset opacity
patternContentUnits patternUnits points preserveAspectRatio r rx ry
spreadMethod stopColor stopOpacity stroke strokeDasharray strokeLinecap
docs/test-utils.html
+16 -16
View File
@@ -438,57 +438,57 @@
<div class="subHeader"></div>
<p><code>React.addons.TestUtils</code> makes it easy to test React components in the testing framework of your choice (we use <a href="http://facebook.github.io/jest/">Jest</a>).</p>
<h3><a class="anchor" name="simulate"></a>Simulate <a class="hash-link" href="#simulate">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">Simulate</span><span class="p">.{</span><span class="nx">eventName</span><span class="p">}(</span><span class="nx">DOMElement</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">eventData</span><span class="p">)</span>
<h3><a class="anchor" name="simulate"></a>Simulate <a class="hash-link" href="#simulate">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">Simulate</span><span class="p">.{</span><span class="nx">eventName</span><span class="p">}(</span><span class="nx">DOMElement</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">eventData</span><span class="p">)</span>
</code></pre></div>
<p>Simulate an event dispatch on a DOM node with optional <code>eventData</code> event data. <strong>This is possibly the single most useful utility in <code>ReactTestUtils</code>.</strong></p>
<p>Example usage:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">();</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">node</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">();</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">TestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">TestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">node</span><span class="p">);</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">TestUtils</span><span class="p">.</span><span class="nx">Simulate</span><span class="p">.</span><span class="nx">keyDown</span><span class="p">(</span><span class="nx">node</span><span class="p">,</span> <span class="p">{</span><span class="nx">key</span><span class="o">:</span> <span class="s2">&quot;Enter&quot;</span><span class="p">});</span>
</code></pre></div>
<p><code>Simulate</code> has a method for every event that React understands.</p>
<h3><a class="anchor" name="renderintodocument"></a>renderIntoDocument <a class="hash-link" href="#renderintodocument">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderIntoDocument</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
<h3><a class="anchor" name="renderintodocument"></a>renderIntoDocument <a class="hash-link" href="#renderintodocument">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderIntoDocument</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
</code></pre></div>
<p>Render a component into a detached DOM node in the document. <strong>This function requires a DOM.</strong></p>
<h3><a class="anchor" name="mockcomponent"></a>mockComponent <a class="hash-link" href="#mockcomponent">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">mockComponent</span><span class="p">(</span><span class="kd">function</span> <span class="nx">componentClass</span><span class="p">,</span> <span class="nx">string</span><span class="o">?</span> <span class="nx">tagName</span><span class="p">)</span>
<h3><a class="anchor" name="mockcomponent"></a>mockComponent <a class="hash-link" href="#mockcomponent">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">mockComponent</span><span class="p">(</span><span class="kd">function</span> <span class="nx">componentClass</span><span class="p">,</span> <span class="nx">string</span><span class="o">?</span> <span class="nx">tagName</span><span class="p">)</span>
</code></pre></div>
<p>Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple <code>&lt;div&gt;</code> (or other tag if <code>mockTagName</code> is provided) containing any provided children.</p>
<h3><a class="anchor" name="iscomponentoftype"></a>isComponentOfType <a class="hash-link" href="#iscomponentoftype">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isComponentOfType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
<h3><a class="anchor" name="iscomponentoftype"></a>isComponentOfType <a class="hash-link" href="#iscomponentoftype">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isComponentOfType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
</code></pre></div>
<p>Returns true if <code>instance</code> is an instance of a React <code>componentClass</code>.</p>
<h3><a class="anchor" name="isdomcomponent"></a>isDOMComponent <a class="hash-link" href="#isdomcomponent">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isDOMComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
<h3><a class="anchor" name="isdomcomponent"></a>isDOMComponent <a class="hash-link" href="#isdomcomponent">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isDOMComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
</code></pre></div>
<p>Returns true if <code>instance</code> is a DOM component (such as a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code>).</p>
<h3><a class="anchor" name="iscompositecomponent"></a>isCompositeComponent <a class="hash-link" href="#iscompositecomponent">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isCompositeComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span><span class="err">`</span>
<h3><a class="anchor" name="iscompositecomponent"></a>isCompositeComponent <a class="hash-link" href="#iscompositecomponent">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isCompositeComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span><span class="err">`</span>
</code></pre></div>
<p>Returns true if <code>instance</code> is a composite component (created with <code>React.createClass()</code>)</p>
<h3><a class="anchor" name="iscompositecomponentwithtype"></a>isCompositeComponentWithType <a class="hash-link" href="#iscompositecomponentwithtype">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isCompositeComponentWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
<h3><a class="anchor" name="iscompositecomponentwithtype"></a>isCompositeComponentWithType <a class="hash-link" href="#iscompositecomponentwithtype">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isCompositeComponentWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
</code></pre></div>
<p>The combination of <code>isComponentOfType()</code> and <code>isCompositeComponent()</code>.</p>
<h3><a class="anchor" name="istextcomponent"></a>isTextComponent <a class="hash-link" href="#istextcomponent">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isTextComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
<h3><a class="anchor" name="istextcomponent"></a>isTextComponent <a class="hash-link" href="#istextcomponent">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">isTextComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">instance</span><span class="p">)</span>
</code></pre></div>
<p>Returns true if <code>instance</code> is a plain text component.</p>
<h3><a class="anchor" name="findallinrenderedtree"></a>findAllInRenderedTree <a class="hash-link" href="#findallinrenderedtree">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">findAllInRenderedTree</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">test</span><span class="p">)</span>
<h3><a class="anchor" name="findallinrenderedtree"></a>findAllInRenderedTree <a class="hash-link" href="#findallinrenderedtree">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">findAllInRenderedTree</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">test</span><span class="p">)</span>
</code></pre></div>
<p>Traverse all components in <code>tree</code> and accumulate all components where <code>test(component)</code> is true. This is not that useful on its own, but it&#39;s used as a primitive for other test utils.</p>
<h3><a class="anchor" name="scryrendereddomcomponentswithclass"></a>scryRenderedDOMComponentsWithClass <a class="hash-link" href="#scryrendereddomcomponentswithclass">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedDOMComponentsWithClass</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">className</span><span class="p">)</span>
<h3><a class="anchor" name="scryrendereddomcomponentswithclass"></a>scryRenderedDOMComponentsWithClass <a class="hash-link" href="#scryrendereddomcomponentswithclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedDOMComponentsWithClass</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">className</span><span class="p">)</span>
</code></pre></div>
<p>Finds all instances of components in the rendered tree that are DOM components with the class name matching <code>className</code>.</p>
<h3><a class="anchor" name="findrendereddomcomponentwithclass"></a>findRenderedDOMComponentWithClass <a class="hash-link" href="#findrendereddomcomponentwithclass">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedDOMComponentWithClass</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">className</span><span class="p">)</span>
<h3><a class="anchor" name="findrendereddomcomponentwithclass"></a>findRenderedDOMComponentWithClass <a class="hash-link" href="#findrendereddomcomponentwithclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedDOMComponentWithClass</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">className</span><span class="p">)</span>
</code></pre></div>
<p>Like <code>scryRenderedDOMComponentsWithClass()</code> but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.</p>
<h3><a class="anchor" name="scryrendereddomcomponentswithtag"></a>scryRenderedDOMComponentsWithTag <a class="hash-link" href="#scryrendereddomcomponentswithtag">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedDOMComponentsWithTag</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">tagName</span><span class="p">)</span>
<h3><a class="anchor" name="scryrendereddomcomponentswithtag"></a>scryRenderedDOMComponentsWithTag <a class="hash-link" href="#scryrendereddomcomponentswithtag">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedDOMComponentsWithTag</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">tagName</span><span class="p">)</span>
</code></pre></div>
<p>Finds all instances of components in the rendered tree that are DOM components with the tag name matching <code>tagName</code>.</p>
<h3><a class="anchor" name="findrendereddomcomponentwithtag"></a>findRenderedDOMComponentWithTag <a class="hash-link" href="#findrendereddomcomponentwithtag">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedDOMComponentWithTag</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">tagName</span><span class="p">)</span>
<h3><a class="anchor" name="findrendereddomcomponentwithtag"></a>findRenderedDOMComponentWithTag <a class="hash-link" href="#findrendereddomcomponentwithtag">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedDOMComponentWithTag</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="nx">string</span> <span class="nx">tagName</span><span class="p">)</span>
</code></pre></div>
<p>Like <code>scryRenderedDOMComponentsWithTag()</code> but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.</p>
<h3><a class="anchor" name="scryrenderedcomponentswithtype"></a>scryRenderedComponentsWithType <a class="hash-link" href="#scryrenderedcomponentswithtype">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedComponentsWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
<h3><a class="anchor" name="scryrenderedcomponentswithtype"></a>scryRenderedComponentsWithType <a class="hash-link" href="#scryrenderedcomponentswithtype">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">array</span> <span class="nx">scryRenderedComponentsWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
</code></pre></div>
<p>Finds all instances of components with type equal to <code>componentClass</code>.</p>
<h3><a class="anchor" name="findrenderedcomponentwithtype"></a>findRenderedComponentWithType <a class="hash-link" href="#findrenderedcomponentwithtype">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedComponentWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
<h3><a class="anchor" name="findrenderedcomponentwithtype"></a>findRenderedComponentWithType <a class="hash-link" href="#findrenderedcomponentwithtype">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">findRenderedComponentWithType</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">tree</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">componentClass</span><span class="p">)</span>
</code></pre></div>
<p>Same as <code>scryRenderedComponentsWithType()</code> but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.</p>
docs/thinking-in-react.html
+1 -1
View File
@@ -448,7 +448,7 @@
<p><img src="/react/img/blog/thinking-in-react-mock.png" alt="Mockup"></p>
<p>Our JSON API returns some data that looks like this:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">[
<div class="highlight"><pre><code class="language-text" data-lang="text">[
{category: &quot;Sporting Goods&quot;, price: &quot;$49.99&quot;, stocked: true, name: &quot;Football&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$9.99&quot;, stocked: true, name: &quot;Baseball&quot;},
{category: &quot;Sporting Goods&quot;, price: &quot;$29.99&quot;, stocked: false, name: &quot;Basketball&quot;},
docs/top-level-api.html
+10 -10
View File
@@ -439,12 +439,12 @@
<h2><a class="anchor" name="react"></a>React <a class="hash-link" href="#react">#</a></h2>
<p><code>React</code> is the entry point to the React framework. If you&#39;re using one of the prebuilt packages it&#39;s available as a global; if you&#39;re using CommonJS modules you can <code>require()</code> it.</p>
<h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="hash-link" href="#react.createclass">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
<h3><a class="anchor" name="react.createclass"></a>React.createClass <a class="hash-link" href="#react.createclass">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
</code></pre></div>
<p>Create a component given a specification. A component implements a <code>render</code> method which returns <strong>one single</strong> child. That child may have an arbitrarily deep child structure. One thing that makes components different than standard prototypal classes is that you don&#39;t need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
<p>For more information about the specification object, see <a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>.</p>
<h3><a class="anchor" name="react.rendercomponent"></a>React.renderComponent <a class="hash-link" href="#react.rendercomponent">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderComponent</span><span class="p">(</span>
<h3><a class="anchor" name="react.rendercomponent"></a>React.renderComponent <a class="hash-link" href="#react.rendercomponent">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderComponent</span><span class="p">(</span>
<span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">,</span>
<span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">,</span>
<span class="p">[</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">]</span>
@@ -463,36 +463,36 @@
pass in. In the future, it may be possible to insert a component to an
existing DOM node without overwriting the existing children.</p>
</blockquote>
<h3><a class="anchor" name="react.unmountcomponentatnode"></a>React.unmountComponentAtNode <a class="hash-link" href="#react.unmountcomponentatnode">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
<h3><a class="anchor" name="react.unmountcomponentatnode"></a>React.unmountComponentAtNode <a class="hash-link" href="#react.unmountcomponentatnode">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
</code></pre></div>
<p>Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns <code>true</code> if a component was unmounted and <code>false</code> if there was no component to unmount.</p>
<h3><a class="anchor" name="react.rendercomponenttostring"></a>React.renderComponentToString <a class="hash-link" href="#react.rendercomponenttostring">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderComponentToString</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
<h3><a class="anchor" name="react.rendercomponenttostring"></a>React.renderComponentToString <a class="hash-link" href="#react.rendercomponenttostring">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderComponentToString</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
</code></pre></div>
<p>Render a component to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.</p>
<p>If you call <code>React.renderComponent()</code> on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.</p>
<h3><a class="anchor" name="react.rendercomponenttostaticmarkup"></a>React.renderComponentToStaticMarkup <a class="hash-link" href="#react.rendercomponenttostaticmarkup">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderComponentToStaticMarkup</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
<h3><a class="anchor" name="react.rendercomponenttostaticmarkup"></a>React.renderComponentToStaticMarkup <a class="hash-link" href="#react.rendercomponenttostaticmarkup">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">string</span> <span class="nx">renderComponentToStaticMarkup</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">)</span>
</code></pre></div>
<p>Similar to <code>renderComponentToString</code>, except this doesn&#39;t create extra DOM attributes such as <code>data-react-id</code>, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.</p>
<h3><a class="anchor" name="react.dom"></a>React.DOM <a class="hash-link" href="#react.dom">#</a></h3>
<p><code>React.DOM</code> provides all of the standard HTML tags needed to build a React app. You generally don&#39;t use it directly; instead, just include it as part of the <code>/** @jsx React.DOM */</code> docblock.</p>
<h3><a class="anchor" name="react.proptypes"></a>React.PropTypes <a class="hash-link" href="#react.proptypes">#</a></h3>
<p><code>React.PropTypes</code> includes types that can be used with a component&#39;s <code>propTypes</code> object to validate props being passed to your components. For more information about <code>propTypes</code>, see <a href="/react/docs/reusable-components.html">Reusable Components</a>.</p>
<h3><a class="anchor" name="react.initializetouchevents"></a>React.initializeTouchEvents <a class="hash-link" href="#react.initializetouchevents">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">initializeTouchEvents</span><span class="p">(</span><span class="kr">boolean</span> <span class="nx">shouldUseTouch</span><span class="p">)</span>
<h3><a class="anchor" name="react.initializetouchevents"></a>React.initializeTouchEvents <a class="hash-link" href="#react.initializetouchevents">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">initializeTouchEvents</span><span class="p">(</span><span class="kr">boolean</span> <span class="nx">shouldUseTouch</span><span class="p">)</span>
</code></pre></div>
<p>Configure React&#39;s event system to handle touch events on mobile devices.</p>
<h3><a class="anchor" name="react.children"></a>React.Children <a class="hash-link" href="#react.children">#</a></h3>
<p><code>React.Children</code> provides utilities for dealing with the <code>this.props.children</code> opaque data structure.</p>
<h4><a class="anchor" name="react.children.map"></a>React.Children.map <a class="hash-link" href="#react.children.map">#</a></h4><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</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="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">context</span><span class="p">])</span>
<h4><a class="anchor" name="react.children.map"></a>React.Children.map <a class="hash-link" href="#react.children.map">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</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="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">context</span><span class="p">])</span>
</code></pre></div>
<p>Invoke <code>fn</code> on every immediate child contained within <code>children</code> with <code>this</code> set to <code>context</code>. If <code>children</code> is a nested object or array it will be traversed: <code>fn</code> will never be passed the container objects. If children is <code>null</code> or <code>undefined</code> returns <code>null</code> or <code>undefined</code> rather than an empty object.</p>
<h4><a class="anchor" name="react.children.foreach"></a>React.Children.forEach <a class="hash-link" href="#react.children.foreach">#</a></h4><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">context</span><span class="p">])</span>
<h4><a class="anchor" name="react.children.foreach"></a>React.Children.forEach <a class="hash-link" href="#react.children.foreach">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">fn</span> <span class="p">[,</span> <span class="nx">object</span> <span class="nx">context</span><span class="p">])</span>
</code></pre></div>
<p>Like <code>React.Children.map()</code> but does not return an object.</p>
<h4><a class="anchor" name="react.children.count"></a>React.Children.count <a class="hash-link" href="#react.children.count">#</a></h4><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
<h4><a class="anchor" name="react.children.count"></a>React.Children.count <a class="hash-link" href="#react.children.count">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">number</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">count</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
</code></pre></div>
<p>Return the total number of components in <code>children</code>, equal to the number of times that a callback passed to <code>map</code> or <code>forEach</code> would be invoked.</p>
<h4><a class="anchor" name="react.children.only"></a>React.Children.only <a class="hash-link" href="#react.children.only">#</a></h4><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
<h4><a class="anchor" name="react.children.only"></a>React.Children.only <a class="hash-link" href="#react.children.only">#</a></h4><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">only</span><span class="p">(</span><span class="nx">object</span> <span class="nx">children</span><span class="p">)</span>
</code></pre></div>
<p>Return the only child in <code>children</code>. Throws otherwise.</p>
docs/tutorial.html
+25 -25
View File
@@ -458,7 +458,7 @@
<p><a href="https://github.com/reactjs/react-tutorial">It&#39;s all on GitHub.</a></p>
<h3><a class="anchor" name="getting-started"></a>Getting started <a class="hash-link" href="#getting-started">#</a></h3>
<p>For this tutorial we&#39;ll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
<span class="nt">&lt;html&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
@@ -485,13 +485,13 @@
</blockquote>
<h3><a class="anchor" name="your-first-component"></a>Your first component <a class="hash-link" href="#your-first-component">#</a></h3>
<p>React is all about modular, composable components. For our comment box example, we&#39;ll have the following component structure:</p>
<div class="highlight"><pre><code class="text language-text" data-lang="text">- CommentBox
<div class="highlight"><pre><code class="language-text" data-lang="text">- CommentBox
- CommentList
- Comment
- CommentForm
</code></pre></div>
<p>Let&#39;s build the <code>CommentBox</code> component, which is just a simple <code>&lt;div&gt;</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial1.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial1.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -507,7 +507,7 @@
<span class="p">);</span>
</code></pre></div><h4><a class="anchor" name="jsx-syntax"></a>JSX Syntax <a class="hash-link" href="#jsx-syntax">#</a></h4>
<p>The first thing you&#39;ll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial1-raw.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial1-raw.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span><span class="nx">displayName</span><span class="o">:</span> <span class="s1">&#39;CommentBox&#39;</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="p">(</span>
@@ -533,7 +533,7 @@
<p><code>React.renderComponent()</code> instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.</p>
<h2><a class="anchor" name="composing-components"></a>Composing components <a class="hash-link" href="#composing-components">#</a></h2>
<p>Let&#39;s build skeletons for <code>CommentList</code> and <code>CommentForm</code> which will, again, be simple <code>&lt;div&gt;</code>s:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial2.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial2.js</span>
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -555,7 +555,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Next, update the <code>CommentBox</code> component to use its new friends:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial3.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial3.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -571,7 +571,7 @@
<p>Notice how we&#39;re mixing HTML tags and components we&#39;ve built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to &quot;React.DOM.tagName&quot; expressions and leave everything else alone. This is to prevent the pollution of the global namespace.</p>
<h3><a class="anchor" name="component-properties"></a>Component Properties <a class="hash-link" href="#component-properties">#</a></h3>
<p>Let&#39;s create our third component, <code>Comment</code>. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let&#39;s add some comments to the <code>CommentList</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial4.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial4.js</span>
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -586,7 +586,7 @@
<p>Note that we have passed some data from the parent <code>CommentList</code> component to the child <code>Comment</code> components. For example, we passed <em>Pete Hunt</em> (via an attribute) and <em>This is one comment</em> (via an XML-like child node) to the first <code>Comment</code>. Data passed from parent to children components is called <strong>props</strong>, short for properties.</p>
<h3><a class="anchor" name="using-props"></a>Using props <a class="hash-link" href="#using-props">#</a></h3>
<p>Let&#39;s create the Comment component. Using <strong>props</strong> we will be able to read the data passed to it from the <code>CommentList</code>, and render some markup:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial5.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial5.js</span>
<span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -605,7 +605,7 @@
<p>Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.</p>
<p>First, add the third-party <strong>Showdown</strong> library to your application. This is a JavaScript library which takes Markdown text and converts it to raw HTML. This requires a script tag in your head (which we have already included in the React playground):</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- template.html --&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;title&gt;</span>Hello React<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
@@ -615,7 +615,7 @@
</span><span class="nt">&lt;/head&gt;</span>
</code></pre></div>
<p>Next, let&#39;s convert the comment text to Markdown and output it:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial6.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial6.js</span>
<span class="hll"><span class="kd">var</span> <span class="nx">converter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Showdown</span><span class="p">.</span><span class="nx">converter</span><span class="p">();</span>
</span><span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
@@ -635,7 +635,7 @@
<p>But there&#39;s a problem! Our rendered comments look like this in the browser: &quot;<code>&lt;p&gt;</code>This is <code>&lt;em&gt;</code>another<code>&lt;/em&gt;</code> comment<code>&lt;/p&gt;</code>&quot;. We want those tags to actually render as HTML.</p>
<p>That&#39;s React protecting you from an XSS attack. There&#39;s a way to get around it but the framework warns you not to use it:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial7.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial7.js</span>
<span class="kd">var</span> <span class="nx">converter</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Showdown</span><span class="p">.</span><span class="nx">converter</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">Comment</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
@@ -656,14 +656,14 @@
<p><strong>Remember:</strong> by using this feature you&#39;re relying on Showdown to be secure.</p>
<h3><a class="anchor" name="hook-up-the-data-model"></a>Hook up the data model <a class="hash-link" href="#hook-up-the-data-model">#</a></h3>
<p>So far we&#39;ve been inserting the comments directly in the source code. Instead, let&#39;s render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial8.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial8.js</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span><span class="nx">author</span><span class="o">:</span> <span class="s2">&quot;Pete Hunt&quot;</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;This is one comment&quot;</span><span class="p">},</span>
<span class="p">{</span><span class="nx">author</span><span class="o">:</span> <span class="s2">&quot;Jordan Walke&quot;</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="s2">&quot;This is *another* comment&quot;</span><span class="p">}</span>
<span class="p">];</span>
</code></pre></div>
<p>We need to get this data into <code>CommentList</code> in a modular way. Modify <code>CommentBox</code> and the <code>renderComponent()</code> call to pass this data into the <code>CommentList</code> via props:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial9.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial9.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -682,7 +682,7 @@
<span class="p">);</span>
</code></pre></div>
<p>Now that the data is available in the <code>CommentList</code>, let&#39;s render the comments dynamically:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial10.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial10.js</span>
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="hll"> <span class="kd">var</span> <span class="nx">commentNodes</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">data</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
@@ -703,7 +703,7 @@
<p>That&#39;s it!</p>
<h3><a class="anchor" name="fetching-from-the-server"></a>Fetching from the server <a class="hash-link" href="#fetching-from-the-server">#</a></h3>
<p>Let&#39;s replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial11.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial11.js</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
<span class="hll"> <span class="o">&lt;</span><span class="nx">CommentBox</span> <span class="nx">url</span><span class="o">=</span><span class="s2">&quot;comments.json&quot;</span> <span class="o">/&gt;</span><span class="p">,</span>
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;content&#39;</span><span class="p">)</span>
@@ -716,7 +716,7 @@
<p><code>render()</code> methods are written declaratively as functions of <code>this.props</code> and <code>this.state</code>. The framework guarantees the UI is always consistent with the inputs.</p>
<p>When the server fetches data, we will be changing the comment data we have. Let&#39;s add an array of comment data to the <code>CommentBox</code> component as its state:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial12.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial12.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class="hll"> <span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
@@ -735,7 +735,7 @@
<p><code>getInitialState()</code> executes exactly once during the lifecycle of the component and sets up the initial state of the component.</p>
<h4><a class="anchor" name="updating-state"></a>Updating state <a class="hash-link" href="#updating-state">#</a></h4>
<p>When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial13.json</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial13.json</span>
<span class="p">[</span>
<span class="p">{</span><span class="s2">&quot;author&quot;</span><span class="o">:</span> <span class="s2">&quot;Pete Hunt&quot;</span><span class="p">,</span> <span class="s2">&quot;text&quot;</span><span class="o">:</span> <span class="s2">&quot;This is one comment&quot;</span><span class="p">},</span>
<span class="p">{</span><span class="s2">&quot;author&quot;</span><span class="o">:</span> <span class="s2">&quot;Jordan Walke&quot;</span><span class="p">,</span> <span class="s2">&quot;text&quot;</span><span class="o">:</span> <span class="s2">&quot;This is *another* comment&quot;</span><span class="p">}</span>
@@ -744,7 +744,7 @@
<p>We&#39;ll use jQuery to help make an asynchronous request to the server.</p>
<p>Note: because this is becoming an AJAX application you&#39;ll need to develop your app using a web server rather than as a file sitting on your file system. The easiest way to do this is to run <code>python -m SimpleHTTPServer</code> in your application&#39;s directory.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial13.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial13.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</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="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
@@ -773,7 +773,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Here, <code>componentDidMount</code> is a method called automatically by React when a component is rendered. The key to dynamic updates is the call to <code>this.setState()</code>. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial14.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial14.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
@@ -813,7 +813,7 @@
<p>All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 2 seconds after that. Try running this in your browser and changing the <code>comments.json</code> file; within 2 seconds, the changes will show!</p>
<h3><a class="anchor" name="adding-new-comments"></a>Adding new comments <a class="hash-link" href="#adding-new-comments">#</a></h3>
<p>Now it&#39;s time to build the form. Our <code>CommentForm</code> component should ask the user for their name and comment text and send a request to the server to save the comment.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial15.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial15.js</span>
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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="p">(</span>
@@ -827,7 +827,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Let&#39;s make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let&#39;s listen for the form&#39;s submit event and clear it.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial16.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial16.js</span>
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">handleSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class="hll"> <span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
@@ -860,7 +860,7 @@
<p>When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in <code>CommentBox</code> since <code>CommentBox</code> owns the state that represents the list of comments.</p>
<p>We need to pass data from the child component back up to its parent. We do this in our parent&#39;s <code>render</code> method by passing a new callback (<code>handleCommentSubmit</code>) into the child, binding it to the child&#39;s <code>onCommentSubmit</code> event. Whenever the event is triggered, the callback will be invoked:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial17.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial17.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
@@ -896,7 +896,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Let&#39;s call the callback from the <code>CommentForm</code> when the user submits the form:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial18.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial18.js</span>
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">handleSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
@@ -918,7 +918,7 @@
<span class="p">});</span>
</code></pre></div>
<p>Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial19.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial19.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
@@ -965,7 +965,7 @@
<span class="p">});</span>
</code></pre></div><h3><a class="anchor" name="optimization-optimistic-updates"></a>Optimization: optimistic updates <a class="hash-link" href="#optimization-optimistic-updates">#</a></h3>
<p>Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial20.js</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// tutorial20.js</span>
<span class="kd">var</span> <span class="nx">CommentBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">loadCommentsFromServer</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
docs/two-way-binding-helpers.html
+4 -4
View File
@@ -460,7 +460,7 @@
</blockquote>
<h2><a class="anchor" name="reactlink-before-and-after"></a>ReactLink: Before and After <a class="hash-link" href="#reactlink-before-and-after">#</a></h2>
<p>Here&#39;s a simple form example without using <code>ReactLink</code>:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">NoLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -476,7 +476,7 @@
<span class="p">});</span>
</code></pre></div>
<p>This works really well and it&#39;s very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let&#39;s use <code>ReactLink</code> to save us some typing:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">WithLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="hll"> <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</span><span class="p">],</span>
@@ -495,7 +495,7 @@
<p>Note that <code>&lt;input&gt;</code> supports ReactLink for both <code>value</code> and <code>checked</code>.</p>
<h2><a class="anchor" name="under-the-hood"></a>Under the Hood <a class="hash-link" href="#under-the-hood">#</a></h2>
<p>There are two sides to <code>ReactLink</code>: the place where you create the <code>ReactLink</code> instance and the place where you use it. To prove how simple <code>ReactLink</code> is, let&#39;s rewrite each side separately to be more explicit.</p>
<h3><a class="anchor" name="reactlink-without-linkedstatemixin"></a>ReactLink Without LinkedStateMixin <a class="hash-link" href="#reactlink-without-linkedstatemixin">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<h3><a class="anchor" name="reactlink-without-linkedstatemixin"></a>ReactLink Without LinkedStateMixin <a class="hash-link" href="#reactlink-without-linkedstatemixin">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">WithoutMixin</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -514,7 +514,7 @@
<span class="p">});</span>
</code></pre></div>
<p>As you can see, <code>ReactLink</code> objects are very simple objects that just have a <code>value</code> and <code>requestChange</code> prop. And <code>LinkedStateMixin</code> is similarly simple: it just populates those fields with a value from <code>this.state</code> and a callback that calls <code>this.setState()</code>.</p>
<h3><a class="anchor" name="reactlink-without-valuelink"></a>ReactLink Without valueLink <a class="hash-link" href="#reactlink-without-valuelink">#</a></h3><div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<h3><a class="anchor" name="reactlink-without-valuelink"></a>ReactLink Without valueLink <a class="hash-link" href="#reactlink-without-valuelink">#</a></h3><div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">WithoutLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</span><span class="p">],</span>
docs/update.html
+8 -8
View File
@@ -442,17 +442,17 @@
<p>Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like <a href="http://clojure.org/">Clojure</a>. However, we&#39;ve provided a simple immutability helper, <code>update()</code>, that makes dealing with this type of data much easier, <em>without</em> fundamentally changing how your data is represented.</p>
<h2><a class="anchor" name="the-main-idea"></a>The main idea <a class="hash-link" href="#the-main-idea">#</a></h2>
<p>If you mutate data like this:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">.</span><span class="nx">z</span> <span class="o">=</span> <span class="mi">7</span><span class="p">;</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">.</span><span class="nx">z</span> <span class="o">=</span> <span class="mi">7</span><span class="p">;</span>
<span class="c1">// or...</span>
<span class="nx">myData</span><span class="p">.</span><span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">9</span><span class="p">);</span>
</code></pre></div>
<p>you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of <code>myData</code> and change only the parts of it that need to be changed. Then you can compare the old copy of <code>myData</code> with the new one in <code>shouldComponentUpdate()</code> using triple-equals:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">myData</span><span class="p">);</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">deepCopy</span><span class="p">(</span><span class="nx">myData</span><span class="p">);</span>
<span class="nx">newData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">.</span><span class="nx">z</span> <span class="o">=</span> <span class="mi">7</span><span class="p">;</span>
<span class="nx">newData</span><span class="p">.</span><span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="mi">9</span><span class="p">);</span>
</code></pre></div>
<p>Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven&#39;t changed. Unfortunately, in today&#39;s JavaScript this can be cumbersome:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">x</span><span class="o">:</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">y</span><span class="o">:</span> <span class="nx">extend</span><span class="p">(</span><span class="nx">myData</span><span class="p">.</span><span class="nx">x</span><span class="p">.</span><span class="nx">y</span><span class="p">,</span> <span class="p">{</span><span class="nx">z</span><span class="o">:</span> <span class="mi">7</span><span class="p">}),</span>
<span class="p">}),</span>
@@ -462,7 +462,7 @@
<p>While this is fairly performant (since it only shallow copies <code>log n</code> objects and reuses the rest), it&#39;s a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.</p>
<p><code>update()</code> provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">update</span><span class="p">(</span><span class="nx">myData</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">x</span><span class="o">:</span> <span class="p">{</span><span class="nx">y</span><span class="o">:</span> <span class="p">{</span><span class="nx">z</span><span class="o">:</span> <span class="p">{</span><span class="nx">$set</span><span class="o">:</span> <span class="mi">7</span><span class="p">}}},</span>
<span class="nx">a</span><span class="o">:</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$push</span><span class="o">:</span> <span class="p">[</span><span class="mi">9</span><span class="p">]}}</span>
<span class="p">});</span>
@@ -479,21 +479,21 @@
<li><code>{$merge: object}</code> merge the keys of <code>object</code> with the target.</li>
<li><code>{$apply: function}</code> passes in the current value to the function and updates it with the new returned value.</li>
</ul>
<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="simple-push"></a>Simple push <a class="hash-link" href="#simple-push">#</a></h3><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">initialArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<h2><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="#examples">#</a></h2><h3><a class="anchor" name="simple-push"></a>Simple push <a class="hash-link" href="#simple-push">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">initialArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">initialArray</span><span class="p">,</span> <span class="p">{</span><span class="nx">$push</span><span class="o">:</span> <span class="p">[</span><span class="mi">4</span><span class="p">]});</span> <span class="c1">// =&gt; [1, 2, 3, 4]</span>
</code></pre></div>
<p><code>initialArray</code> is still <code>[1, 2, 3]</code>.</p>
<h3><a class="anchor" name="nested-collections"></a>Nested collections <a class="hash-link" href="#nested-collections">#</a></h3><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">collection</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">15</span><span class="p">]}];</span>
<h3><a class="anchor" name="nested-collections"></a>Nested collections <a class="hash-link" href="#nested-collections">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">collection</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">[</span><span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">15</span><span class="p">]}];</span>
<span class="kd">var</span> <span class="nx">newCollection</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">collection</span><span class="p">,</span> <span class="p">{</span><span class="mi">2</span><span class="o">:</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="p">{</span><span class="nx">$splice</span><span class="o">:</span> <span class="p">[[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">14</span><span class="p">]]}}});</span>
<span class="c1">// =&gt; [1, 2, {a: [12, 13, 14, 15]}]</span>
</code></pre></div>
<p>This accesses <code>collection</code>&#39;s index <code>2</code>, key <code>a</code>, and does a splice of one item starting from index <code>1</code> (to remove <code>17</code>) while inserting <code>13</code> and <code>14</code>.</p>
<h3><a class="anchor" name="updating-a-value-based-on-its-current-one"></a>Updating a value based on its current one <a class="hash-link" href="#updating-a-value-based-on-its-current-one">#</a></h3><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
<h3><a class="anchor" name="updating-a-value-based-on-its-current-one"></a>Updating a value based on its current one <a class="hash-link" href="#updating-a-value-based-on-its-current-one">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
<span class="kd">var</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$apply</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;}}});</span>
<span class="c1">// =&gt; {a: 5, b: 6}</span>
<span class="c1">// This is equivalent, but gets verbose for deeply nested collections:</span>
<span class="kd">var</span> <span class="nx">newObj2</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="p">{</span><span class="nx">$set</span><span class="o">:</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">b</span> <span class="o">*</span> <span class="mi">2</span><span class="p">}});</span>
</code></pre></div><h3><a class="anchor" name="shallow-merge"></a>(Shallow) merge <a class="hash-link" href="#shallow-merge">#</a></h3><div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
</code></pre></div><h3><a class="anchor" name="shallow-merge"></a>(Shallow) merge <a class="hash-link" href="#shallow-merge">#</a></h3><div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span><span class="nx">a</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">3</span><span class="p">};</span>
<span class="kd">var</span> <span class="nx">newObj</span> <span class="o">=</span> <span class="nx">update</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="p">{</span><span class="nx">$merge</span><span class="o">:</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="mi">6</span><span class="p">,</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">7</span><span class="p">}});</span> <span class="c1">// =&gt; {a: 5, b: 6, c: 7}</span>
</code></pre></div>
docs/working-with-the-browser.html
+1 -1
View File
@@ -454,7 +454,7 @@
</blockquote>
<p>In order to get a reference to a React component, you can either use <code>this</code> to get the current React component, or you can use refs to refer to a component you own. They work like this:</p>
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
downloads.html
+8 -8
View File
@@ -75,35 +75,35 @@
<p>If you&#39;re just starting out, make sure to use the development version.</p>
<h2><a class="anchor" name="individual-downloads"></a>Individual Downloads <a class="hash-link" href="#individual-downloads">#</a></h2><h4><a class="anchor" name="react-0.11.1-development"></a><a href="http://fb.me/react-0.11.1.js">React 0.11.1 (development)</a> <a class="hash-link" href="#react-0.11.1-development">#</a></h4>
<p>The uncompressed, development version of React core with inline documentation.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-0.11.1-production"></a><a href="http://fb.me/react-0.11.1.min.js">React 0.11.1 (production)</a> <a class="hash-link" href="#react-0.11.1-production">#</a></h4>
<p>The compressed, production version of React core.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.1-development"></a><a href="http://fb.me/react-with-addons-0.11.1.js">React with Add-Ons 0.11.1 (development)</a> <a class="hash-link" href="#react-with-add-ons-0.11.1-development">#</a></h4>
<p>The uncompressed, development version of React with <a href="/react/docs/addons.html">add-ons</a>.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.11.1-production"></a><a href="http://fb.me/react-with-addons-0.11.1.min.js">React with Add-Ons 0.11.1 (production)</a> <a class="hash-link" href="#react-with-add-ons-0.11.1-production">#</a></h4>
<p>The compressed, production version of React with <a href="/react/docs/addons.html">add-ons</a>.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/react-with-addons-0.11.1.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div><h4><a class="anchor" name="jsx-transformer"></a><a href="http://fb.me/JSXTransformer-0.11.1.js">JSX Transformer</a> <a class="hash-link" href="#jsx-transformer">#</a></h4>
<p>The JSX transformer used to support <a href="/react/docs/jsx-in-depth.html">XML syntax</a> in JavaScript.</p>
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://fb.me/JSXTransformer-0.11.1.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre></div>
<p>All scripts are also available via <a href="http://cdnjs.com/libraries/react/">CDNJS</a>.</p>
<h2><a class="anchor" name="npm"></a>npm <a class="hash-link" href="#npm">#</a></h2>
<p>To install the JSX transformer on your computer, run:</p>
<div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>npm install -g react-tools
<div class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="nv">$ </span>npm install -g react-tools
</code></pre></div>
<p>For more info about the <code>jsx</code> binary, see the <a href="/react/docs/getting-started.html#offline-transform">Getting Started</a> guide.</p>
<p>If you&#39;re using an npm-compatible packaging system like browserify or webpack, you can use the <code>react</code> package. After installing it using <code>npm install react</code> or adding <code>react</code> to <code>package.json</code>, you can use React:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react&#39;</span><span class="p">);</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(...);</span>
</code></pre></div>
<p>If you&#39;d like to use any <a href="/react/docs/addons.html">add-ons</a>, use <code>var React = require(&#39;react/addons&#39;);</code> instead.</p>
<p><strong>Note:</strong> by default, React will be in development mode. To use React in production mode, set the environment variable <code>NODE_ENV</code> to <code>production</code>. A minifier that performs dead-code elimination such as <a href="https://github.com/mishoo/UglifyJS2">UglifyJS</a> is recommended to completely remove the extra code present in development mode.</p>
<h2><a class="anchor" name="bower"></a>Bower <a class="hash-link" href="#bower">#</a></h2><div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>bower install --save react
<h2><a class="anchor" name="bower"></a>Bower <a class="hash-link" href="#bower">#</a></h2><div class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="nv">$ </span>bower install --save react
</code></pre></div>
<div class="docs-prevnext">
feed.xml
+24 -22
View File
@@ -10,7 +10,7 @@
<title>Community Round-up #21</title>
<description>&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;react-router&quot;&gt;&lt;/a&gt;React Router &lt;a class=&quot;hash-link&quot; href=&quot;#react-router&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://ryanflorence.com/&quot;&gt;Ryan Florence&lt;/a&gt; and &lt;a href=&quot;http://twitter.com/mjackson&quot;&gt;Michael Jackson&lt;/a&gt; ported Ember&amp;#39;s router to React in a project called &lt;a href=&quot;https://github.com/rackt/react-router&quot;&gt;React Router&lt;/a&gt;. This is a very good example of both communities working together to make the web better!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;((&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;renderComponent&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;((&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Routes&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Route&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;name&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;s2&quot;&gt;&amp;quot;about&amp;quot;&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;handler&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;About&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;
@@ -46,7 +46,7 @@
&lt;/ul&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;referencing-dynamic-children&quot;&gt;&lt;/a&gt;Referencing Dynamic Children &lt;a class=&quot;hash-link&quot; href=&quot;#referencing-dynamic-children&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;While Matt Zabriskie was working on &lt;a href=&quot;https://www.npmjs.org/package/react-tabs&quot;&gt;react-tabs&lt;/a&gt; he discovered how to use React.Children.map and React.addons.cloneWithProps in order to &lt;a href=&quot;http://www.mattzabriskie.com/blog/react-referencing-dynamic-children&quot;&gt;reference dynamic children&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;App&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;map&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;props&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;children&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;index&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;addons&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;cloneWithProps&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;child&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
@@ -71,7 +71,7 @@
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;html-parser2-react&quot;&gt;&lt;/a&gt;HTML Parser2 React &lt;a class=&quot;hash-link&quot; href=&quot;#html-parser2-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;http://browniefed.github.io/&quot;&gt;Jason Brown&lt;/a&gt; adapted htmlparser2 to React: &lt;a href=&quot;https://www.npmjs.org/package/htmlparser2-react&quot;&gt;htmlparser2-react&lt;/a&gt;. That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;div data-id=&amp;quot;1&amp;quot; class=&amp;quot;hey this is a class&amp;quot; &amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;html&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;div data-id=&amp;quot;1&amp;quot; class=&amp;quot;hey this is a class&amp;quot; &amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;style=&amp;quot;width:100%;height: 100%;&amp;quot;&amp;gt;&amp;lt;article id=&amp;quot;this-article&amp;quot;&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;p&amp;gt;hey this is a paragraph&amp;lt;/p&amp;gt;&amp;lt;div&amp;gt;&amp;lt;ul&amp;gt;&amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt;&amp;lt;li&amp;gt;2&amp;lt;/li&amp;gt;&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;+&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;&amp;lt;li&amp;gt;3&amp;lt;/li&amp;gt;&amp;lt;/ul&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/article&amp;gt;&amp;lt;/div&amp;gt;&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -106,7 +106,7 @@ This is not the intended way to use React but can be useful as last resort if yo
&lt;p&gt;&lt;img src=&quot;/react/img/blog/flux-diagram.png&quot; style=&quot;width: 100%;&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;why-we-need-a-dispatcher&quot;&gt;&lt;/a&gt;Why We Need a Dispatcher &lt;a class=&quot;hash-link&quot; href=&quot;#why-we-need-a-dispatcher&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &amp;quot;I need to wait for Store B to finish processing this action.&amp;quot; The dispatcher provides this functionality through its waitFor() method. &lt;/p&gt;
&lt;p&gt;As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, &amp;quot;I need to wait for Store B to finish processing this action.&amp;quot; The dispatcher provides this functionality through its waitFor() method.&lt;/p&gt;
&lt;p&gt;The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.&lt;/p&gt;
@@ -140,7 +140,7 @@ This is not the intended way to use React but can be useful as last resort if yo
&lt;iframe src=&quot;//player.vimeo.com/video/100010922&quot; width=&quot;650&quot; height=&quot;315&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactintl-mixin-by-yahoo&quot;&gt;&lt;/a&gt;ReactIntl Mixin by Yahoo &lt;a class=&quot;hash-link&quot; href=&quot;#reactintl-mixin-by-yahoo&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;There are a couple of React-related projects that recently appeared on Yahoo&amp;#39;s GitHub, the first one being an &lt;a href=&quot;https://github.com/yahoo/react-intl&quot;&gt;internationalization mixin&lt;/a&gt;. It&amp;#39;s great to see them getting excited about React and contributing back to the community.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;MyComponent&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;mixins&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ReactIntlMixin&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;
@@ -157,9 +157,9 @@ This is not the intended way to use React but can be useful as last resort if yo
&lt;span class=&quot;nb&quot;&gt;document&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;getElementById&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;example&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;thinking-and-learning-react&quot;&gt;&lt;/a&gt;Thinking and Learning React &lt;a class=&quot;hash-link&quot; href=&quot;#thinking-and-learning-react&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post &lt;a href=&quot;http://icelab.com.au/articles/thinking-and-learning-reactjs/&quot;&gt;“Thinking and Learning React.js”&lt;/a&gt; to share her experience with elements they had to use. You&amp;#39;ll learn about routing, event dispatch, touchable components, and basic animations. &lt;/p&gt;
&lt;p&gt;Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post &lt;a href=&quot;http://icelab.com.au/articles/thinking-and-learning-reactjs/&quot;&gt;“Thinking and Learning React.js”&lt;/a&gt; to share her experience with elements they had to use. You&amp;#39;ll learn about routing, event dispatch, touchable components, and basic animations.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;london-react-meetup&quot;&gt;&lt;/a&gt;London React Meetup &lt;a class=&quot;hash-link&quot; href=&quot;#london-react-meetup&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you missed the last &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/events/191406572/&quot;&gt;London React Meetup&lt;/a&gt;, the video is available, with lots of great content. &lt;/p&gt;
&lt;p&gt;If you missed the last &lt;a href=&quot;http://www.meetup.com/London-React-User-Group/events/191406572/&quot;&gt;London React Meetup&lt;/a&gt;, the video is available, with lots of great content.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;What&amp;#39;s new in React 0.11 and how to improve performance by guaranteeing immutability&lt;/li&gt;
@@ -179,7 +179,7 @@ This is not the intended way to use React but can be useful as last resort if yo
&lt;p&gt;Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a &lt;a href=&quot;https://github.com/RReverser/acorn-jsx&quot;&gt;JSX parser&lt;/a&gt; that&amp;#39;s 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it&amp;#39;s always a good thing to get competition on performance!&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;reactscriptloader&quot;&gt;&lt;/a&gt;ReactScriptLoader &lt;a class=&quot;hash-link&quot; href=&quot;#reactscriptloader&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Yariv Sadan created &lt;a href=&quot;https://github.com/yariv/ReactScriptLoader&quot;&gt;ReactScriptLoader&lt;/a&gt; to make it easier to write components that require an external script.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;javascript language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Foo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-javascript&quot; data-lang=&quot;javascript&quot;&gt;&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;Foo&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;React&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;createClass&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;mixins&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;[&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;ReactScriptLoaderMixin&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;],&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;getScriptURL&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;http://d3js.org/d3.v3.min.js&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -194,7 +194,7 @@ This is not the intended way to use React but can be useful as last resort if yo
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;setState&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;({&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoading&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;false&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;scriptLoadError&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kc&quot;&gt;true&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;});&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;},&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;message&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;message&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoading&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading script...&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;scriptLoadError&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;?&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading failed&amp;#39;&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;:&lt;/span&gt;
&lt;span class=&quot;s1&quot;&gt;&amp;#39;Loading succeeded&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -285,7 +285,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;p&gt;Starting in React 0.11, &lt;code&gt;getDefaultProps()&lt;/code&gt; is called only once when &lt;code&gt;React.createClass()&lt;/code&gt; is called, instead of each time a component is rendered. This means that &lt;code&gt;getDefaultProps()&lt;/code&gt; can no longer vary its return value based on &lt;code&gt;this.props&lt;/code&gt; and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rendering-to-null&quot;&gt;&lt;/a&gt;Rendering to &lt;code&gt;null&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#rendering-to-null&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since React&amp;#39;s release, people have been using work arounds to &amp;quot;render nothing&amp;quot;. Usually this means returning an empty &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;span/&amp;gt;&lt;/code&gt;. Some people even got clever and started returning &lt;code&gt;&amp;lt;noscript/&amp;gt;&lt;/code&gt; to avoid extraneous DOM nodes. We finally provided a &amp;quot;blessed&amp;quot; solution that allows developers to write meaningful code. Returning &lt;code&gt;null&lt;/code&gt; is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; element, though in the future we hope to not put anything in the document. In the mean time, &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; elements do not affect layout in any way, so you can feel safe using &lt;code&gt;null&lt;/code&gt; today!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;visible&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -302,7 +302,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-namespacing&quot;&gt;&lt;/a&gt;JSX Namespacing &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-namespacing&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Another feature request we&amp;#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&amp;#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as &lt;code&gt;&amp;lt;Namespace.Component/&amp;gt;&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -320,7 +320,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;improved-keyboard-event-normalization&quot;&gt;&lt;/a&gt;Improved keyboard event normalization &lt;a class=&quot;hash-link&quot; href=&quot;#improved-keyboard-event-normalization&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Keyboard events now contain a normalized &lt;code&gt;e.key&lt;/code&gt; value according to the &lt;a href=&quot;http://www.w3.org/TR/DOM-Level-3-Events/#keys-special&quot;&gt;DOM Level 3 Events spec&lt;/a&gt;, allowing you to write simpler key handling code that works in all browsers, such as:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Enter&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle enter key&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39; &amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
@@ -428,7 +428,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;p&gt;Starting in React 0.11, &lt;code&gt;getDefaultProps()&lt;/code&gt; is called only once when &lt;code&gt;React.createClass()&lt;/code&gt; is called, instead of each time a component is rendered. This means that &lt;code&gt;getDefaultProps()&lt;/code&gt; can no longer vary its return value based on &lt;code&gt;this.props&lt;/code&gt; and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.&lt;/p&gt;
&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;rendering-to-null&quot;&gt;&lt;/a&gt;Rendering to &lt;code&gt;null&lt;/code&gt; &lt;a class=&quot;hash-link&quot; href=&quot;#rendering-to-null&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Since React&amp;#39;s release, people have been using work arounds to &amp;quot;render nothing&amp;quot;. Usually this means returning an empty &lt;code&gt;&amp;lt;div/&amp;gt;&lt;/code&gt; or &lt;code&gt;&amp;lt;span/&amp;gt;&lt;/code&gt;. Some people even got clever and started returning &lt;code&gt;&amp;lt;noscript/&amp;gt;&lt;/code&gt; to avoid extraneous DOM nodes. We finally provided a &amp;quot;blessed&amp;quot; solution that allows developers to write meaningful code. Returning &lt;code&gt;null&lt;/code&gt; is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; element, though in the future we hope to not put anything in the document. In the mean time, &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; elements do not affect layout in any way, so you can feel safe using &lt;code&gt;null&lt;/code&gt; today!&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;nx&quot;&gt;render&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;()&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;!&lt;/span&gt;&lt;span class=&quot;k&quot;&gt;this&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;state&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;visible&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;return&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;span&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;/&amp;gt;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -445,7 +445,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;jsx-namespacing&quot;&gt;&lt;/a&gt;JSX Namespacing &lt;a class=&quot;hash-link&quot; href=&quot;#jsx-namespacing&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Another feature request we&amp;#39;ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn&amp;#39;t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as &lt;code&gt;&amp;lt;Namespace.Component/&amp;gt;&lt;/code&gt;.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;c1&quot;&gt;// Before&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;require&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;s1&quot;&gt;&amp;#39;UI&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;);&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UILayout&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Layout&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;kd&quot;&gt;var&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UIButton&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;nx&quot;&gt;UI&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;Button&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;
@@ -463,7 +463,7 @@ Minified build for production: &lt;a href=&quot;http://fb.me/react-with-addons-0
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2&gt;&lt;a class=&quot;anchor&quot; name=&quot;improved-keyboard-event-normalization&quot;&gt;&lt;/a&gt;Improved keyboard event normalization &lt;a class=&quot;hash-link&quot; href=&quot;#improved-keyboard-event-normalization&quot;&gt;#&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Keyboard events now contain a normalized &lt;code&gt;e.key&lt;/code&gt; value according to the &lt;a href=&quot;http://www.w3.org/TR/DOM-Level-3-Events/#keys-special&quot;&gt;DOM Level 3 Events spec&lt;/a&gt;, allowing you to write simpler key handling code that works in all browsers, such as:&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;js language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-js&quot; data-lang=&quot;js&quot;&gt;&lt;span class=&quot;nx&quot;&gt;handleKeyDown&lt;/span&gt;&lt;span class=&quot;o&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;kd&quot;&gt;function&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39;Enter&amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
&lt;span class=&quot;c1&quot;&gt;// Handle enter key&lt;/span&gt;
&lt;span class=&quot;p&quot;&gt;}&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;else&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;nx&quot;&gt;key&lt;/span&gt; &lt;span class=&quot;o&quot;&gt;===&lt;/span&gt; &lt;span class=&quot;s1&quot;&gt;&amp;#39; &amp;#39;&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;{&lt;/span&gt;
@@ -632,14 +632,16 @@ in .NET applications, focusing specifically on ASP.NET MVC web applications.
It has several purposes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.&lt;/p&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;html language-html&quot; data-lang=&quot;html&quot;&gt;&lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;@Url.Content(&amp;quot;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;Scripts&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;HelloWorld&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;jsx&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;quot;)&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;JSX to JavaScript compilation via popular minification/combination libraries
&lt;li&gt;On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
will be compiled and cached server-side.&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&quot;highlight&quot;&gt;&lt;pre&gt;&lt;code class=&quot;language-html&quot; data-lang=&quot;html&quot;&gt; &lt;span class=&quot;nt&quot;&gt;&amp;lt;script &lt;/span&gt;&lt;span class=&quot;na&quot;&gt;src=&lt;/span&gt;&lt;span class=&quot;s&quot;&gt;&amp;quot;@Url.Content(&amp;quot;&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;Scripts&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;/&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;HelloWorld&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;na&quot;&gt;jsx&lt;/span&gt;&lt;span class=&quot;err&quot;&gt;&amp;quot;)&amp;quot;&lt;/span&gt;&lt;span class=&quot;nt&quot;&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;JSX to JavaScript compilation via popular minification/combination libraries
(Cassette and ASP.NET Bundling and Minification). This is suggested for
production websites.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Server-side component rendering to make your initial render super fast.&lt;/p&gt;&lt;/li&gt;
production websites.&lt;/li&gt;
&lt;li&gt;Server-side component rendering to make your initial render super fast.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
tips/children-props-type.html
+2 -2
View File
@@ -434,7 +434,7 @@
<h1>Type of the Children props</h1>
<div class="subHeader"></div>
<p>Usually, a component&#39;s children (<code>this.props.children</code>) is an array of components:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">GenericWrapper</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -452,7 +452,7 @@
<span class="p">);</span>
</code></pre></div>
<p>However, when there is only a single child, <code>this.props.children</code> will be the single child component itself <em>without the array wrapper</em>. This saves an array allocation.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">GenericWrapper</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
tips/children-undefined.html
+1 -1
View File
@@ -434,7 +434,7 @@
<h1>this.props.children undefined</h1>
<div class="subHeader"></div>
<p>You can&#39;t access the children of your component through <code>this.props.children</code>. <code>this.props.children</code> designates the children being <strong>passed onto you</strong> by the owner:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
tips/communicate-between-components.html
+1 -1
View File
@@ -437,7 +437,7 @@
<p>For child-parent communication:
Say your <code>GroceryList</code> component has a list of items generated through an array. When a list item is clicked, you want to display its name:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">GroceryList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
tips/controlled-input-null-value.html
+1 -1
View File
@@ -438,7 +438,7 @@
<p>You might have run into a problem where <code>value</code> is specified, but the input can still be changed without consent. In this case, you might have accidentally set <code>value</code> to <code>undefined</code> or <code>null</code>.</p>
<p>The snippet below shows this phenomenon; after a second, the text becomes editable.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">value</span><span class="o">=</span><span class="s2">&quot;hi&quot;</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
tips/dom-event-listeners.html
+1 -1
View File
@@ -440,7 +440,7 @@
</blockquote>
<p>Try to resize the window:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">Box</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
tips/expose-component-functions.html
+1 -1
View File
@@ -436,7 +436,7 @@
<p>There&#39;s another (uncommon) way of <a href="/react/tips/communicate-between-components.html">communicating between components</a>: simply expose a method on the child component for the parent to call.</p>
<p>Say a list of todos, which upon clicking get removed. If there&#39;s only one unfinished todo left, animate it:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">Todo</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
tips/false-in-jsx.html
+3 -3
View File
@@ -436,15 +436,15 @@
<p>Here&#39;s how <code>false</code> renders in different contexts:</p>
<p>Renders as <code>id=&quot;false&quot;</code>:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>String <code>&quot;false&quot;</code> as input value:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>No child:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;, mountNode);</span>
</code></pre></div>
<p>The reason why this one doesn&#39;t render as the string <code>&quot;false&quot;</code> as a <code>div</code> child is to allow the more common use-case: <code>&lt;div&gt;{x &gt; 1 &amp;&amp; &#39;You have more than one item&#39;}&lt;/div&gt;</code>.</p>
tips/if-else-in-JSX.html
+3 -3
View File
@@ -434,7 +434,7 @@
<h1>If-Else in JSX</h1>
<div class="subHeader"></div>
<p><code>if-else</code> statements don&#39;t work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="c1">// This JSX:</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&quot;msg&quot;</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;, mountNode);</span>
@@ -443,7 +443,7 @@
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span><span class="s2">&quot;msg&quot;</span><span class="p">},</span> <span class="s2">&quot;Hello World!&quot;</span><span class="p">),</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>This means that <code>if</code> statements don&#39;t fit in. Take this example:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="c1">// This JSX:</span>
<span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span> <span class="s1">&#39;msg&#39;</span> <span class="p">}}</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;</span>
@@ -452,7 +452,7 @@
<span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span> <span class="s1">&#39;msg&#39;</span> <span class="p">}},</span> <span class="s2">&quot;Hello World!&quot;</span><span class="p">);</span>
</code></pre></div>
<p>That&#39;s not valid JS. You probably want to make use of a ternary expression:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">id</span><span class="o">=</span><span class="p">{</span><span class="nx">condition</span> <span class="o">?</span> <span class="s1">&#39;msg&#39;</span> <span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;, mountNode);</span>
</code></pre></div>
tips/initial-ajax.html
+1 -1
View File
@@ -438,7 +438,7 @@
<p>When processing the response of an asynchronous request, be sure to check that the component is still mounted before updating its state by using <code>this.isMounted()</code>.</p>
<p>This example fetches the desired Github user&#39;s latest gist:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">UserGist</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
tips/inline-styles.html
+1 -1
View File
@@ -434,7 +434,7 @@
<h1>Inline Styles</h1>
<div class="subHeader"></div>
<p>In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style&#39;s value, usually a string (<a href="/react/tips/style-props-value-px.html">more on that later</a>):</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">divStyle</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">color</span><span class="o">:</span> <span class="s1">&#39;white&#39;</span><span class="p">,</span>
tips/props-in-getInitialState-as-anti-pattern.html
+3 -3
View File
@@ -442,7 +442,7 @@
<p>Using props, passed down from parent, to generate state in <code>getInitialState</code> often leads to duplication of &quot;source of truth&quot;, i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don&#39;t get out of sync later on and cause maintenance trouble.</p>
<p><strong>Bad example:</strong></p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">MessageBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
@@ -457,7 +457,7 @@
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MessageBox</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&quot;Rogers&quot;</span><span class="o">/&gt;</span><span class="p">,</span> <span class="nx">mountNode</span><span class="p">);</span>
</code></pre></div>
<p>Better:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">MessageBox</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</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>
@@ -470,7 +470,7 @@
<p>(For more complex logic, simply isolate the computation in a method.)</p>
<p>However, it&#39;s <strong>not</strong> an anti-pattern if you make it clear that synchronization&#39;s not the goal here:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
tips/references-to-components.html
+2 -2
View File
@@ -434,12 +434,12 @@
<h1>References to Components</h1>
<div class="subHeader"></div>
<p>If you&#39;re using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. <code>React.renderComponent</code> returns a reference to the mounted component:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">myComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="o">/&gt;</span><span class="p">,</span> <span class="nx">myContainer</span><span class="p">);</span>
</code></pre></div>
<p>Keep in mind, however, that the &quot;constructor&quot; of a component doesn&#39;t return a component instance! It&#39;s just a <strong>descriptor</strong>: a lightweight representation that tells React what the mounted component should look like.</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">myComponent</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="o">/&gt;</span><span class="p">;</span> <span class="c1">// This is just a descriptor.</span>
tips/style-props-value-px.html
+1 -1
View File
@@ -434,7 +434,7 @@
<h1>Shorthand for Specifying Pixel Values in style props</h1>
<div class="subHeader"></div>
<p>When specifying a pixel value for your inline <code>style</code> prop, React automatically appends the string &quot;px&quot; for you after your number value, so this works:</p>
<div class="highlight"><pre><code class="js language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="cm">/** @jsx React.DOM */</span>
<span class="kd">var</span> <span class="nx">divStyle</span> <span class="o">=</span> <span class="p">{</span><span class="nx">height</span><span class="o">:</span> <span class="mi">10</span><span class="p">};</span> <span class="c1">// rendered as &quot;height:10px&quot;</span>
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">div</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">divStyle</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Hello</span> <span class="nx">World</span><span class="o">!&lt;</span><span class="err">/div&gt;, mountNode);</span>