mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
598 lines
32 KiB
HTML
598 lines
32 KiB
HTML
|
|
|
|
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>React Without ES6 - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="React Without ES6 - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/react-without-es6.html">
|
|
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
|
<meta property="fb:app_id" content="623268441017527">
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script>try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
|
|
<script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script src="https://unpkg.com/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/javascript/javascript.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/xml/xml.js"></script>
|
|
<script src="https://unpkg.com/codemirror@5.15.2/mode/jsx/jsx.js"></script>
|
|
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
|
|
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
|
|
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
|
|
<script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
|
|
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
|
|
<script src="/react/js/live_editor.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<div class="nav-lists">
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/hello-world.html" class="active">Docs</a></li>
|
|
<li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
|
|
<li><a href="/react/community/support.html">Community</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li class="nav-site-search">
|
|
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
|
</li>
|
|
</ul>
|
|
<ul class="nav-site nav-site-external">
|
|
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
|
<li><a href="https://github.com/facebook/react/releases">v16.0.0</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/react-without-es6.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
React Without ES6
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<p>Normally you would define a React component as a plain JavaScript class:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Greeting</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/h1>;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>If you don't use ES6 yet, you may use the <code>create-react-class</code> module instead:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">createReactClass</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'create-react-class'</span><span class="p">);</span>
|
|
<span class="kd">var</span> <span class="nx">Greeting</span> <span class="o">=</span> <span class="nx">createReactClass</span><span class="p">({</span>
|
|
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o"><</span><span class="err">/h1>;</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
<p>The API of ES6 classes is similar to <code>createReactClass()</code> with a few exceptions.</p>
|
|
|
|
<h2>Declaring Default Props</h2>
|
|
|
|
<p>With functions and ES6 classes <code>defaultProps</code> is defined as a property on the component itself:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Greeting</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="c1">// ...</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">Greeting</span><span class="p">.</span><span class="nx">defaultProps</span> <span class="o">=</span> <span class="p">{</span>
|
|
<span class="nx">name</span><span class="o">:</span> <span class="s1">'Mary'</span>
|
|
<span class="p">};</span>
|
|
</code></pre></div>
|
|
<p>With <code>createReactClass()</code>, you need to define <code>getDefaultProps()</code> as a function on the passed object:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Greeting</span> <span class="o">=</span> <span class="nx">createReactClass</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">name</span><span class="o">:</span> <span class="s1">'Mary'</span>
|
|
<span class="p">};</span>
|
|
<span class="p">},</span>
|
|
|
|
<span class="c1">// ...</span>
|
|
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
<h2>Setting the Initial State</h2>
|
|
|
|
<p>In ES6 classes, you can define the initial state by assigning <code>this.state</code> in the constructor:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Counter</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
|
|
<span class="p">}</span>
|
|
<span class="c1">// ...</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>With <code>createReactClass()</code>, you have to provide a separate <code>getInitialState</code> method that returns the initial state:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="nx">createReactClass</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">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">initialCount</span><span class="p">};</span>
|
|
<span class="p">},</span>
|
|
<span class="c1">// ...</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
<h2>Autobinding</h2>
|
|
|
|
<p>In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind <code>this</code> to the instance. You'll have to explicitly use <code>.bind(this)</code> in the constructor:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">SayHello</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
|
<span class="c1">// This line is important!</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span> <span class="o">=</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="p">}</span>
|
|
|
|
<span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// Because `this.handleClick` is bound, we can use it as an event handler.</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</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">handleClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="nx">Say</span> <span class="nx">hello</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>With <code>createReactClass()</code>, this is not necessary because it binds all methods:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SayHello</span> <span class="o">=</span> <span class="nx">createReactClass</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">message</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</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>
|
|
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">message</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">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">handleClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="nx">Say</span> <span class="nx">hello</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
<p>This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.</p>
|
|
|
|
<p>If the boilerplate code is too unattractive to you, you may enable the <strong>experimental</strong> <a href="https://babeljs.io/docs/plugins/transform-class-properties/">Class Properties</a> syntax proposal with Babel:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">SayHello</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
|
|
<span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
|
<span class="p">}</span>
|
|
<span class="c1">// WARNING: this syntax is experimental!</span>
|
|
<span class="c1">// Using an arrow here binds the method:</span>
|
|
<span class="nx">handleClick</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
|
|
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</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">handleClick</span><span class="p">}</span><span class="o">></span>
|
|
<span class="nx">Say</span> <span class="nx">hello</span>
|
|
<span class="o"><</span><span class="err">/button></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Please note that the syntax above is <strong>experimental</strong> and the syntax may change, or the proposal might not make it into the language.</p>
|
|
|
|
<p>If you'd rather play it safe, you have a few options:</p>
|
|
|
|
<ul>
|
|
<li>Bind methods in the constructor.</li>
|
|
<li>Use arrow functions, e.g. <code>onClick={(e) => this.handleClick(e)}</code>.</li>
|
|
<li>Keep using <code>createReactClass</code>.</li>
|
|
</ul>
|
|
|
|
<h2>Mixins</h2>
|
|
|
|
<blockquote>
|
|
<p><strong>Note:</strong></p>
|
|
|
|
<p>ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.</p>
|
|
|
|
<p><strong>We also found numerous issues in codebases using mixins, <a href="/react/blog/2016/07/13/mixins-considered-harmful.html">and don't recommend using them in the new code</a>.</strong></p>
|
|
|
|
<p>This section exists only for the reference.</p>
|
|
</blockquote>
|
|
|
|
<p>Sometimes very different components may share some common functionality. These are sometimes called <a href="https://en.wikipedia.org/wiki/Cross-cutting_concern">cross-cutting concerns</a>. <a href="/react/docs/top-level-api.html#react.createclass"><code>createReactClass</code></a> lets you use a legacy <code>mixins</code> system for that.</p>
|
|
|
|
<p>One common use case is a component wanting to update itself on a time interval. It's easy to use <code>setInterval()</code>, but it's important to cancel your interval when you don'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'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="language-javascript" data-lang="javascript"><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>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">setInterval</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">setInterval</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">));</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">clearInterval</span><span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">};</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">createReactClass</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'create-react-class'</span><span class="p">);</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">TickTock</span> <span class="o">=</span> <span class="nx">createReactClass</span><span class="p">({</span>
|
|
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">SetIntervalMixin</span><span class="p">],</span> <span class="c1">// Use the mixin</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">seconds</span><span class="o">:</span> <span class="mi">0</span><span class="p">};</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>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span> <span class="c1">// Call a method on the mixin</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">tick</span><span class="o">:</span> <span class="kd">function</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">seconds</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">seconds</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
|
<span class="p">},</span>
|
|
<span class="nx">render</span><span class="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">p</span><span class="o">></span>
|
|
<span class="nx">React</span> <span class="nx">has</span> <span class="nx">been</span> <span class="nx">running</span> <span class="k">for</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">seconds</span><span class="p">}</span> <span class="nx">seconds</span><span class="p">.</span>
|
|
<span class="o"><</span><span class="err">/p></span>
|
|
<span class="p">);</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
|
|
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">TickTock</span> <span class="o">/></span><span class="p">,</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
</code></pre></div>
|
|
<p>If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.</p>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/installation.html">Installation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/hello-world.html">Hello World</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/introducing-jsx.html">Introducing JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/rendering-elements.html">Rendering Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/components-and-props.html">Components and Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/state-and-lifecycle.html">State and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/handling-events.html">Handling Events</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/conditional-rendering.html">Conditional Rendering</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lists-and-keys.html">Lists and Keys</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/lifting-state-up.html">Lifting State Up</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/composition-vs-inheritance.html">Composition vs Inheritance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking In React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Advanced Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX In Depth</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/typechecking-with-proptypes.html">Typechecking With PropTypes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/refs-and-the-dom.html">Refs and the DOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/uncontrolled-components.html">Uncontrolled Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/optimizing-performance.html">Optimizing Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-es6.html" class="active">React Without ES6</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-without-jsx.html">React Without JSX</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/portals.html">Portals</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/web-components.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/higher-order-components.html">Higher-Order Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/integrating-with-other-libraries.html">Integrating with Other Libraries</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/accessibility.html">Accessibility</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-api.html">React</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-component.html">React.Component</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom.html">ReactDOM</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/react-dom-server.html">ReactDOMServer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-elements.html">DOM Elements</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">SyntheticEvent</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-renderer.html">Shallow Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-renderer.html">Test Renderer</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/javascript-environment-requirements.html">JS Environment Requirements</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Contributing Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Contributing</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/contributing/how-to-contribute.html">How to Contribute</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/codebase-overview.html">Codebase Overview</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/implementation-notes.html">Implementation Notes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/contributing/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="nav-footer">
|
|
<section class="sitemap">
|
|
<a href="/react/" class="nav-home">
|
|
</a>
|
|
<div>
|
|
<h5><a href="/react/docs/">Docs</a></h5>
|
|
<a href="/react/docs/hello-world.html">Quick Start</a>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
<a href="/react/tutorial/tutorial.html">Tutorial</a>
|
|
<a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Community</a></h5>
|
|
<a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
|
|
<a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
|
|
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
|
|
<a href="https://www.facebook.com/react" target="_blank">Facebook</a>
|
|
<a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
|
|
</div>
|
|
<div>
|
|
<h5><a href="/react/community/support.html">Resources</a></h5>
|
|
<a href="/react/community/conferences.html">Conferences</a>
|
|
<a href="/react/community/videos.html">Videos</a>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
|
|
</div>
|
|
<div>
|
|
<h5>More</h5>
|
|
<a href="/react/blog/">Blog</a>
|
|
<a href="https://github.com/facebook/react" target="_blank">GitHub</a>
|
|
<a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
</section>
|
|
<a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
|
|
<img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
|
|
</a>
|
|
<section class="copyright">
|
|
Copyright © 2017 Facebook Inc.
|
|
</section>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<div id="fb-root"></div>
|
|
<script src="/react/js/anchor-links.js"></script>
|
|
<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/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
docsearch({
|
|
apiKey: '36221914cce388c46d0420343e0bb32e',
|
|
indexName: 'react',
|
|
inputSelector: '#algolia-doc-search'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|