mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Merge in latest docs changes
This commit is contained in:
Paul O’Shannessy
+1
-1
@@ -502,7 +502,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
<a href="/react/blog/page2" class="next">
|
||||
<a href="/react/blog/page2/" class="next">
|
||||
Next Page »
|
||||
</a>
|
||||
|
||||
|
||||
@@ -433,12 +433,12 @@
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
<a href="/react/blog/index.html" class="previous">
|
||||
<a href="/react//blog/index.html" class="previous">
|
||||
« Previous Page
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/react/blog/page3" class="next">
|
||||
<a href="/react/blog/page3/" class="next">
|
||||
Next Page »
|
||||
</a>
|
||||
|
||||
|
||||
@@ -339,12 +339,12 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
<a href="/react/blog/page2" class="previous">
|
||||
<a href="/react//blog/page2/" class="previous">
|
||||
« Previous Page
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/react/blog/page4" class="next">
|
||||
<a href="/react/blog/page4/" class="next">
|
||||
Next Page »
|
||||
</a>
|
||||
|
||||
|
||||
@@ -378,12 +378,12 @@
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
<a href="/react/blog/page3" class="previous">
|
||||
<a href="/react//blog/page3/" class="previous">
|
||||
« Previous Page
|
||||
</a>
|
||||
|
||||
|
||||
<a href="/react/blog/page5" class="next">
|
||||
<a href="/react/blog/page5/" class="next">
|
||||
Next Page »
|
||||
</a>
|
||||
|
||||
|
||||
@@ -245,7 +245,7 @@ nuts and bolts
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
<a href="/react/blog/page4" class="previous">
|
||||
<a href="/react//blog/page4/" class="previous">
|
||||
« Previous Page
|
||||
</a>
|
||||
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -401,6 +405,15 @@
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="o"><</span><span class="nx">textarea</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"description"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"This is a description."</span> <span class="o">/></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><option></code> in an HTML <code><select></code> is normally specified through that option'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"><</span><span class="nx">select</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"A"</span><span class="o">></span><span class="nx">Apple</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"B"</span><span class="o">></span><span class="nx">Banana</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="nx">option</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"C"</span><span class="o">></span><span class="nx">Cranberry</span><span class="o"><</span><span class="err">/option></span>
|
||||
<span class="o"><</span><span class="err">/select></span>
|
||||
</code></pre></div>
|
||||
<p>To make an uncontrolled component, <code>defaultValue</code> is used instead.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -347,7 +351,7 @@
|
||||
<p>With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with <a href="http://www.w3.org/TR/DOM-Level-3-Events/">the W3C spec</a>, regardless of which browser you're using.</p>
|
||||
|
||||
<p>If you'd like to use React on a touch device (i.e. a phone or tablet), simply call <code>React.initializeTouchEvents(true);</code> to turn them on.</p>
|
||||
<h2><a class="anchor" name="under-the-hood-autobind-and-event-delegation"></a>Under the Hood: autoBind and Event Delegation <a class="hash-link" href="#under-the-hood-autobind-and-event-delegation">#</a></h2>
|
||||
<h2><a class="anchor" name="under-the-hood-autobinding-and-event-delegation"></a>Under the Hood: Autobinding and Event Delegation <a class="hash-link" href="#under-the-hood-autobinding-and-event-delegation">#</a></h2>
|
||||
<p>Under the hood React does a few things to keep your code performant and easy to understand.</p>
|
||||
|
||||
<p><strong>Autobinding:</strong> When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of <code>this</code> is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!</p>
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -70,6 +70,12 @@
|
||||
</code></pre></div><h4><a class="anchor" name="react-core-0.5.1-development"></a><a href="http://fb.me/react-0.5.1.js">React Core 0.5.1 (development)</a> <a class="hash-link" href="#react-core-0.5.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"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.5.1.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.5.1-production"></a><a href="http://fb.me/react-with-addons-0.5.1.min.js">React With Add-Ons 0.5.1 (production)</a> <a class="hash-link" href="#react-with-add-ons-0.5.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"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-with-addons-0.5.1.min.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4><a class="anchor" name="react-with-add-ons-0.5.1-development"></a><a href="http://fb.me/react-with-addons-0.5.1.js">React With Add-Ons 0.5.1 (development)</a> <a class="hash-link" href="#react-with-add-ons-0.5.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"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-with-addons-0.5.1.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4><a class="anchor" name="jsx-transform"></a><a href="http://fb.me/JSXTransformer-0.5.1.js">JSX Transform</a> <a class="hash-link" href="#jsx-transform">#</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"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.5.1.js"</span><span class="nt">></script></span>
|
||||
|
||||
@@ -78,7 +78,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<p><img src="/react/img/blog/steve_reverse.gif" style="float: right;" />
|
||||
<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>&mdash; Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div></p>
|
||||
</description>
|
||||
<pubDate>2013-11-18T00:00:00+01:00</pubDate>
|
||||
<pubDate>2013-11-18T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/11/18/community-roundup-11.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/11/18/community-roundup-11.html</guid>
|
||||
</item>
|
||||
@@ -194,7 +194,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
|
||||
<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&amp;src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&amp;src=hash">#reactjs</a></p>&mdash; Eldar Djafarov &#x30C3; (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
|
||||
</description>
|
||||
<pubDate>2013-11-06T00:00:00+01:00</pubDate>
|
||||
<pubDate>2013-11-06T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/11/06/community-roundup-10.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/11/06/community-roundup-10.html</guid>
|
||||
</item>
|
||||
@@ -340,7 +340,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<h2><a class="anchor" name="and-thats-it"></a>And that&#39;s it <a class="hash-link" href="#and-thats-it">#</a></h2>
|
||||
<p>Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you&#39;re used to, remember that code is read far more than it&#39;s written, and it&#39;s extremely easy to read this modular, explicit code. As you start to build large libraries of components you&#39;ll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)</p>
|
||||
</description>
|
||||
<pubDate>2013-11-05T00:00:00+01:00</pubDate>
|
||||
<pubDate>2013-11-05T00:00:00-08:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html</guid>
|
||||
</item>
|
||||
@@ -360,7 +360,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<li>Fixed bug with transition and animation event detection.</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-10-29T00:00:00+01:00</pubDate>
|
||||
<pubDate>2013-10-29T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/10/29/react-v0-5-1.html</guid>
|
||||
</item>
|
||||
@@ -409,7 +409,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-10-16T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-10-16T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</guid>
|
||||
</item>
|
||||
@@ -494,7 +494,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<p><a href="http://www.phpied.com/reactive-table/">Read the full article...</a></p>
|
||||
</blockquote>
|
||||
</description>
|
||||
<pubDate>2013-10-03T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-10-03T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/10/03/community-roundup-9.html</guid>
|
||||
</item>
|
||||
@@ -555,7 +555,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
|
||||
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
</description>
|
||||
<pubDate>2013-09-24T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-09-24T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/09/24/community-roundup-8.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/09/24/community-roundup-8.html</guid>
|
||||
</item>
|
||||
@@ -636,7 +636,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<p><a href="https://github.com/facebook/react-page/">Try it out ...</a></p>
|
||||
</blockquote>
|
||||
</description>
|
||||
<pubDate>2013-08-26T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-08-26T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/08/26/community-roundup-7.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/08/26/community-roundup-7.html</guid>
|
||||
</item>
|
||||
@@ -677,7 +677,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
|
||||
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
|
||||
</description>
|
||||
<pubDate>2013-08-19T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-08-19T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html</guid>
|
||||
</item>
|
||||
@@ -749,7 +749,7 @@ Is this some sort of template language? Specifically no. This might have been th
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
</description>
|
||||
<pubDate>2013-08-05T00:00:00+02:00</pubDate>
|
||||
<pubDate>2013-08-05T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/08/05/community-roundup-6.html</guid>
|
||||
</item>
|
||||
|
||||
+11
-9
@@ -70,23 +70,25 @@
|
||||
<p><section class="light home-section">
|
||||
<div class="marketing-row">
|
||||
<div class="marketing-col">
|
||||
<h3>Declarative</h3>
|
||||
<h3>Just the UI</h3>
|
||||
<p>
|
||||
React uses a declarative paradigm that makes it easier to reason about
|
||||
your application.
|
||||
Lots of people use React as the V in MVC.
|
||||
Since React makes no assumptions about the rest of your technology stack,
|
||||
it's easy to try it out on a small feature in an existing project.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Efficient</h3>
|
||||
<h3>Virtual DOM</h3>
|
||||
<p>
|
||||
React computes the minimal set of changes necessary to keep your DOM
|
||||
up-to-date.
|
||||
React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also
|
||||
render on the server using Node.js — no heavy browser DOM required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Flexible</h3>
|
||||
<h3>Data flow</h3>
|
||||
<p>
|
||||
React works with the libraries and frameworks that you already know.
|
||||
React implements one-way reactive data flow which reduces boilerplate and is
|
||||
easier to reason about than traditional data binding.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,7 +125,7 @@
|
||||
This example uses <code>state</code> to track the current list of items as well as
|
||||
the text that the user has entered. Although event handlers appear to be
|
||||
rendered inline, they will be collected and implemented using event
|
||||
delegation.
|
||||
delegation.
|
||||
</p>
|
||||
<div id="todoExample"></div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ var Timer = React.createClass({\n\
|
||||
},\n\
|
||||
render: function() {\n\
|
||||
return React.DOM.div({},\n\
|
||||
'Seconds Elapsed: ' + this.state.secondsElapsed\n\
|
||||
'Seconds Elapsed: ', this.state.secondsElapsed\n\
|
||||
);\n\
|
||||
}\n\
|
||||
});\n\
|
||||
|
||||
+6
-4
@@ -22,7 +22,8 @@ var CodeMirrorEditor = React.createClass({displayName: 'CodeMirrorEditor',
|
||||
mode: 'javascript',
|
||||
lineNumbers: false,
|
||||
matchBrackets: true,
|
||||
theme: 'solarized-light'
|
||||
theme: 'solarized-light',
|
||||
readOnly: this.props.readOnly
|
||||
});
|
||||
this.editor.on('change', this.onChange);
|
||||
this.onChange();
|
||||
@@ -82,7 +83,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
} else if (this.state.mode === this.MODES.JS) {
|
||||
content =
|
||||
React.DOM.div( {className:"playgroundJS playgroundStage"},
|
||||
this.getDesugaredCode()
|
||||
this.getDesugaredCode()
|
||||
);
|
||||
}
|
||||
|
||||
@@ -111,13 +112,14 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
} catch (e) { }
|
||||
|
||||
try {
|
||||
var desugaredCode = this.getDesugaredCode();
|
||||
if (this.props.renderCode) {
|
||||
React.renderComponent(
|
||||
React.DOM.pre(null, this.getDesugaredCode()),
|
||||
CodeMirrorEditor( {codeText:desugaredCode, readOnly:true} ),
|
||||
mountNode
|
||||
);
|
||||
} else {
|
||||
eval(this.getDesugaredCode());
|
||||
eval(desugaredCode);
|
||||
}
|
||||
} catch (e) {
|
||||
React.renderComponent(
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Communicate Between Components</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Communicate Between Components" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/tips/communicate-between-components.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
<meta property="fb:app_id" content="623268441017527" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<!-- Docs Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html">
|
||||
Getting Started
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">
|
||||
Tutorial
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html">
|
||||
Why React?
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/displaying-data.html">
|
||||
Displaying Data
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">
|
||||
JSX in Depth
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-gotchas.html">
|
||||
JSX Gotchas
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html">
|
||||
Interactivity and Dynamic UIs
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/multiple-components.html">
|
||||
Multiple Components
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">
|
||||
Reusable Components
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html">
|
||||
Working With the Browser
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling Integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-Ons
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/animation.html">
|
||||
Animation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/two-way-binding-helpers.html">
|
||||
Two-Way Binding Helpers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/class-name-manipulation.html">
|
||||
Class Name Manipulation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">
|
||||
Top-Level API
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">
|
||||
Component API
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">
|
||||
Component Specs and Lifecycle
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">
|
||||
Supported Tags and Attributes
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">
|
||||
Event System
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">
|
||||
DOM Differences
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Tips Nav -->
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Tips</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/introduction.html">Introduction</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html" class="active">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Communicate Between Components</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>For parent-child communication, simply <a href="/react/docs/multiple-components.html">pass props</a>.</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'You clicked: '</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">items</span><span class="p">[</span><span class="nx">i</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="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</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">items</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">item</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</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="nx">i</span><span class="p">)}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">i</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">item</span><span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span> <span class="k">this</span><span class="p">)}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</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="o"><</span><span class="nx">GroceryList</span> <span class="nx">items</span><span class="o">=</span><span class="p">{[</span><span class="s1">'Apple'</span><span class="p">,</span> <span class="s1">'Banana'</span><span class="p">,</span> <span class="s1">'Cranberry'</span><span class="p">]}</span> <span class="o">/></span><span class="p">,</span> <span class="nx">mountNode</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>Notice the use of <code>bind(this, arg1, arg2, ...)</code>: we're simply passing more arguments to <code>handleClick</code>. This is not a new React concept; it's just JavaScript.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/tips/false-in-jsx.html">← Prev</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/tips/communicate-between-components.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -354,6 +358,8 @@
|
||||
</code></pre></div>
|
||||
<p><code>componentDidMount</code> is called after the component is mounted and has a DOM representation. This is often a place where you would attach generic DOM events.</p>
|
||||
|
||||
<p>Notice that the event callback is bound to the react component and not the original element. React automatically binds methods to the current component instance for you through a process of <a href="../docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation">autobinding</a>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html" class="active">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -341,6 +345,8 @@
|
||||
<a class="docs-prev" href="/react/tips/initial-ajax.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/tips/communicate-between-components.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/tips/false-in-jsx.html"></div>
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -321,7 +325,7 @@
|
||||
<div class="subHeader"></div>
|
||||
<p>Fetch data in <code>componentDidMount</code>. When the response arrives, store the data in state, triggering a render to update your UI.</p>
|
||||
|
||||
<p>This example fetches the desired Github user's lastest gist:</p>
|
||||
<p>This example fetches the desired Github user's latest gist:</p>
|
||||
<div class="highlight"><pre><code class="js 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>
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -310,6 +310,10 @@
|
||||
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user