mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
v0.4.0
This commit is contained in:
Paul O’Shannessy
+149
-66
@@ -53,35 +53,124 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html" class="active">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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" class="active">
|
||||
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/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -106,19 +195,19 @@
|
||||
<li><strong>Markdown formatting:</strong> users can use Markdown to format their text</li>
|
||||
</ul>
|
||||
|
||||
<h2>Want to skip all this and just see the source?</h2>
|
||||
<h3>Want to skip all this and just see the source?</h3>
|
||||
|
||||
<p><a href="https://github.com/petehunt/react-tutorial">It's all on GitHub.</a></p>
|
||||
|
||||
<h2>Getting started</h2>
|
||||
<h3>Getting started</h3>
|
||||
|
||||
<p>For this tutorial we'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"><!-- template.html --></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.4.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.4.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">></div></span>
|
||||
@@ -133,7 +222,7 @@
|
||||
</code></pre></div>
|
||||
<p>For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.</p>
|
||||
|
||||
<h2>Your first component</h2>
|
||||
<h3>Your first component</h3>
|
||||
|
||||
<p>React is all about modular, composable components. For our comment box example, we'll have the following component structure:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">- CommentBox
|
||||
@@ -157,7 +246,7 @@
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3>JSX Syntax</h3>
|
||||
<h4>JSX Syntax</h4>
|
||||
|
||||
<p>The first thing you'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>
|
||||
@@ -178,7 +267,7 @@
|
||||
</code></pre></div>
|
||||
<p>Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the <a href="syntax.html">JSX Syntax article</a>.</p>
|
||||
|
||||
<h3>What's going on</h3>
|
||||
<h4>What's going on</h4>
|
||||
|
||||
<p>We pass some methods in a JavaScript object to <code>React.createClass()</code> to create a new React component. The most important of these methods is called <code>render</code> which returns a tree of React components that will eventually render to HTML.</p>
|
||||
|
||||
@@ -188,7 +277,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>
|
||||
|
||||
<h1>Composing components</h1>
|
||||
<h2>Composing components</h2>
|
||||
|
||||
<p>Let's build skeletons for <code>CommentList</code> and <code>CommentForm</code> which will, again, be simple <code><div></code>s:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial2.js</span>
|
||||
@@ -228,7 +317,7 @@
|
||||
</code></pre></div>
|
||||
<p>Notice how we're mixing HTML tags and components we'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 "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.</p>
|
||||
|
||||
<h2>Component Properties</h2>
|
||||
<h3>Component Properties</h3>
|
||||
|
||||
<p>Let'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'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>
|
||||
@@ -245,7 +334,7 @@
|
||||
</code></pre></div>
|
||||
<p>Note that we have passed some data from the parent <code>CommentList</code> component to the child <code>Comment</code> component as both XML-like children and attributes. Data passed from parent to child is called <strong>props</strong>, short for properties.</p>
|
||||
|
||||
<h2>Using props</h2>
|
||||
<h3>Using props</h3>
|
||||
|
||||
<p>Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial5.js</span>
|
||||
@@ -264,7 +353,7 @@
|
||||
</code></pre></div>
|
||||
<p>By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on <code>this.props</code> and any nested elements as <code>this.props.children</code>.</p>
|
||||
|
||||
<h2>Adding Markdown</h2>
|
||||
<h3>Adding Markdown</h3>
|
||||
|
||||
<p>Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.</p>
|
||||
|
||||
@@ -311,7 +400,7 @@
|
||||
|
||||
<p><strong>Remember:</strong> by using this feature you're relying on Showdown to be secure.</p>
|
||||
|
||||
<h2>Hook up the data model</h2>
|
||||
<h3>Hook up the data model</h3>
|
||||
|
||||
<p>So far we've been inserting the comments directly in the source code. Instead, let'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>
|
||||
@@ -356,7 +445,7 @@
|
||||
</code></pre></div>
|
||||
<p>That's it!</p>
|
||||
|
||||
<h2>Fetching from the server</h2>
|
||||
<h3>Fetching from the server</h3>
|
||||
|
||||
<p>Let'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>
|
||||
@@ -367,7 +456,7 @@
|
||||
</code></pre></div>
|
||||
<p>This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.</p>
|
||||
|
||||
<h2>Reactive state</h2>
|
||||
<h3>Reactive state</h3>
|
||||
|
||||
<p>So far, each component has rendered itself once based on its props. <code>props</code> are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable <strong>state</strong> to the component. <code>this.state</code> is private to the component and can be changed by calling <code>this.setState()</code>. When the state is updated, the component re-renders itself.</p>
|
||||
|
||||
@@ -392,7 +481,7 @@
|
||||
</code></pre></div>
|
||||
<p><code>getInitialState()</code> executes exactly once during the lifecycle of the component and sets up the initial state of the component.</p>
|
||||
|
||||
<h3>Updating state</h3>
|
||||
<h4>Updating state</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>
|
||||
@@ -469,7 +558,7 @@
|
||||
</code></pre></div>
|
||||
<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 5 seconds after that. Try running this in your browser and changing the <code>comments.json</code> file; within 5 seconds, the changes will show!</p>
|
||||
|
||||
<h2>Adding new comments</h2>
|
||||
<h3>Adding new comments</h3>
|
||||
|
||||
<p>Now it'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>
|
||||
@@ -488,7 +577,7 @@
|
||||
<p>Let'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's listen for the form'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>
|
||||
<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="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="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>
|
||||
</span><span class="hll"> <span class="kd">var</span> <span class="nx">text</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">text</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>
|
||||
</span><span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">text</span> <span class="o">||</span> <span class="o">!</span><span class="nx">author</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -498,7 +587,7 @@
|
||||
</span><span class="hll"> <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="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span><span class="hll"> <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="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
@@ -514,19 +603,17 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>Events</h4>
|
||||
<h5>Events</h5>
|
||||
|
||||
<p>React attaches event handlers to components using a camelCase naming convention. We attach an <code>onSubmit</code> handler to the form that clears the form fields when the form is submitted with valid input.</p>
|
||||
|
||||
<p>We always return <code>false</code> from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call <code>preventDefault()</code> on it – read more about <a href="event-handling.html">event handling</a>.)</p>
|
||||
|
||||
<p><code>React.autoBind()</code> is a simple way to ensure that a method is always bound to its component. Inside the method, <code>this</code> will be bound to the component instance.</p>
|
||||
|
||||
<h4>Refs</h4>
|
||||
<h5>Refs</h5>
|
||||
|
||||
<p>We use the <code>ref</code> attribute to assign a name to a child component and <code>this.refs</code> to reference the component. We can call <code>getDOMNode()</code> on a component to get the native browser DOM element.</p>
|
||||
|
||||
<h4>Callbacks as props</h4>
|
||||
<h5>Callbacks as props</h5>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -543,9 +630,9 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleCommentSubmit</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">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="c1">// TODO: submit to the server and refresh the list</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</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>
|
||||
<span class="p">},</span>
|
||||
@@ -572,14 +659,14 @@
|
||||
<p>Let'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>
|
||||
<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="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="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>
|
||||
<span class="kd">var</span> <span class="nx">text</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">text</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>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onCommentSubmit</span><span class="p">({</span><span class="nx">author</span><span class="o">:</span> <span class="nx">author</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="nx">text</span><span class="p">});</span>
|
||||
</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="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</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">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
@@ -608,7 +695,7 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</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">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
</span><span class="hll"> <span class="nx">url</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">url</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">data</span><span class="o">:</span> <span class="nx">comment</span><span class="p">,</span>
|
||||
@@ -618,7 +705,7 @@
|
||||
</span><span class="hll"> <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="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
</span><span class="hll"> <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
</span><span class="hll"> <span class="p">});</span>
|
||||
</span> <span class="p">}),</span>
|
||||
</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>
|
||||
<span class="p">},</span>
|
||||
@@ -642,7 +729,7 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Optimization: optimistic updates</h2>
|
||||
<h3>Optimization: optimistic updates</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>
|
||||
@@ -657,7 +744,7 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</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">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">comments</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">data</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="nx">comments</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">comment</span><span class="p">);</span>
|
||||
</span><span class="hll"> <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="o">:</span> <span class="nx">comments</span><span class="p">});</span>
|
||||
@@ -670,7 +757,7 @@
|
||||
<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="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}),</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>
|
||||
<span class="p">},</span>
|
||||
@@ -694,17 +781,13 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Congrats!</h2>
|
||||
<h3>Congrats!</h3>
|
||||
|
||||
<p>You have just built a comment box in a few simple steps. Learn more about React in the <a href="syntax.html">reference</a> or start hacking! Good luck!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/getting-started.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/common-questions.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user