mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
722 lines
29 KiB
HTML
722 lines
29 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>Installation - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="Installation - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/installation.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/installation.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Installation
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<style>
|
|
.tab-hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
<p>React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.</p>
|
|
|
|
<div class="toggler">
|
|
<style>
|
|
.toggler li {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: 1px;
|
|
padding: 10px;
|
|
margin: 0px 2px 0px 2px;
|
|
border: 1px solid #05A5D1;
|
|
border-bottom-color: transparent;
|
|
border-radius: 3px 3px 0px 0px;
|
|
color: #05A5D1;
|
|
background-color: transparent;
|
|
font-size: 0.99em;
|
|
cursor: pointer;
|
|
}
|
|
.toggler li:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.toggler li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.toggler ul {
|
|
display: inline-block;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
border-bottom: 1px solid #05A5D1;
|
|
cursor: default;
|
|
}
|
|
@media screen and (max-width: 960px) {
|
|
.toggler li,
|
|
.toggler li:first-child,
|
|
.toggler li:last-child {
|
|
display: block;
|
|
border-bottom-color: #05A5D1;
|
|
border-radius: 3px;
|
|
margin: 2px 0px 2px 0px;
|
|
}
|
|
.toggler ul {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
.display-target-fiddle .toggler .button-fiddle:focus,
|
|
.display-target-newapp .toggler .button-newapp:focus,
|
|
.display-target-existingapp .toggler .button-existingapp:focus {
|
|
background-color: #046E8B;
|
|
color: white;
|
|
}
|
|
.display-target-fiddle .toggler .button-fiddle,
|
|
.display-target-newapp .toggler .button-newapp,
|
|
.display-target-existingapp .toggler .button-existingapp {
|
|
background-color: #05A5D1;
|
|
color: white;
|
|
}
|
|
block {
|
|
display: none;
|
|
}
|
|
.display-target-fiddle .fiddle,
|
|
.display-target-newapp .newapp,
|
|
.display-target-existingapp .existingapp {
|
|
display: block;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.querySelector('.toggler').parentElement.className += ' display-target-fiddle';
|
|
</script>
|
|
<span>Which of these options best describes what you want to do?</span>
|
|
<br />
|
|
<br />
|
|
<ul role="tablist" >
|
|
<li id="fiddle" class="button-fiddle" aria-selected="false" role="tab" tabindex="0" aria-controls="fiddletab"
|
|
onclick="display('target', 'fiddle')" onkeyup="keyToggle(event, 'fiddle', 'existingapp', 'newapp')">
|
|
Try React
|
|
</li>
|
|
<li id="newapp" class="button-newapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="newapptab"
|
|
onclick="display('target', 'newapp')" onkeyup="keyToggle(event, 'newapp', 'fiddle', 'existingapp')">
|
|
Create a New App
|
|
</li>
|
|
<li id="existingapp" class="button-existingapp" aria-selected="false" role="tab" tabindex="-1" aria-controls="existingapptab"
|
|
onclick="display('target', 'existingapp')" onkeyup="keyToggle(event, 'existingapp', 'newapp', 'fiddle')">
|
|
Add React to an Existing App
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p><block id="fiddletab" role="tabpanel" class="fiddle" /></p>
|
|
|
|
<h2>Trying Out React</h2>
|
|
|
|
<p>If you're just interested in playing around with React, you can use CodePen. Try starting from <a href="http://codepen.io/gaearon/pen/rrpgNB?editors=0010">this Hello World example code</a>. You don't need to install anything; you can just modify the code and see if it works.</p>
|
|
|
|
<p>If you prefer to use your own text editor, you can also <a href="/react/downloads/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.</p>
|
|
|
|
<p>If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.</p>
|
|
|
|
<p><block id="newapptab" role="tabpanel" class="newapp" /></p>
|
|
|
|
<h2>Creating a New Application</h2>
|
|
|
|
<p><a href="http://github.com/facebookincubator/create-react-app">Create React App</a> is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.</p>
|
|
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install -g create-react-app
|
|
create-react-app my-app
|
|
|
|
<span class="nb">cd </span>my-app
|
|
npm start
|
|
</code></pre></div>
|
|
<p>Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration.</p>
|
|
|
|
<p>When you're ready to deploy to production, running <code>npm run build</code> will create an optimized build of your app in the <code>build</code> folder. You can learn more about Create React App <a href="https://github.com/facebookincubator/create-react-app#create-react-app-">from its README</a> and the <a href="https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents">User Guide</a>.</p>
|
|
|
|
<p><block id="existingapptab" role="tabpanel" class="existingapp" /></p>
|
|
|
|
<h2>Adding React to an Existing Application</h2>
|
|
|
|
<p>You don't need to rewrite your app to start using React.</p>
|
|
|
|
<p>We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.</p>
|
|
|
|
<p>While React <a href="/react/docs/react-without-es6.html">can be used</a> without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:</p>
|
|
|
|
<ul>
|
|
<li>A <strong>package manager</strong>, such as <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a>. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.</li>
|
|
<li>A <strong>bundler</strong>, such as <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a>. It lets you write modular code and bundle it together into small packages to optimize load time.</li>
|
|
<li>A <strong>compiler</strong> such as <a href="http://babeljs.io/">Babel</a>. It lets you write modern JavaScript code that still works in older browsers.</li>
|
|
</ul>
|
|
|
|
<h3>Installing React</h3>
|
|
|
|
<blockquote>
|
|
<p><strong>Note:</strong></p>
|
|
|
|
<p>Once installed, we strongly recommend setting up a <a href="/react/docs/optimizing-performance.html#use-the-production-build">production build process</a> to ensure you're using the fast version of React in production.</p>
|
|
</blockquote>
|
|
|
|
<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you're new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p>
|
|
|
|
<p>To install React with Yarn, run:</p>
|
|
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn init
|
|
yarn add react react-dom
|
|
</code></pre></div>
|
|
<p>To install React with npm, run:</p>
|
|
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm init
|
|
npm install --save react react-dom
|
|
</code></pre></div>
|
|
<p>Both Yarn and npm download packages from the <a href="http://npmjs.com/">npm registry</a>.</p>
|
|
|
|
<h3>Enabling ES6 and JSX</h3>
|
|
|
|
<p>We recommend using React with <a href="http://babeljs.io/">Babel</a> to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.</p>
|
|
|
|
<p>The <a href="https://babeljs.io/docs/setup/">Babel setup instructions</a> explain how to configure Babel in many different build environments. Make sure you install <a href="http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-"><code>babel-preset-react</code></a> and <a href="http://babeljs.io/docs/plugins/preset-es2015/#basic-setup-with-the-cli-"><code>babel-preset-es2015</code></a> and enable them in your <a href="http://babeljs.io/docs/usage/babelrc/"><code>.babelrc</code> configuration</a>, and you're good to go.</p>
|
|
|
|
<h3>Hello World with ES6 and JSX</h3>
|
|
|
|
<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p>
|
|
|
|
<p>The smallest React example looks like this:</p>
|
|
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">'react'</span><span class="p">;</span>
|
|
<span class="kr">import</span> <span class="nx">ReactDOM</span> <span class="nx">from</span> <span class="s1">'react-dom'</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">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/h1>,</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'root'</span><span class="p">)</span>
|
|
<span class="p">);</span>
|
|
</code></pre></div>
|
|
<p>This code renders into a DOM element with the id of <code>root</code> so you need <code><div id="root"></div></code> somewhere in your HTML file.</p>
|
|
|
|
<p>Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.</p>
|
|
|
|
<p><a href="/react/docs/integrating-with-other-libraries.html#integrating-with-other-view-libraries">Learn more about integrating React with existing code.</a></p>
|
|
|
|
<h3>Development and Production Versions</h3>
|
|
|
|
<p>By default, React includes many helpful warnings. These warnings are very useful in development.</p>
|
|
|
|
<p><strong>However, they make the development version of React larger and slower so you should use the production version when you deploy the app.</strong></p>
|
|
|
|
<p>Learn <a href="/react/docs/optimizing-performance.html#use-the-production-build">how to tell if your website is serving the right version of React</a>, and how to configure the production build process most efficiently:</p>
|
|
|
|
<ul>
|
|
<li><a href="/react/docs/optimizing-performance.html#create-react-app">Creating a Production Build with Create React App</a></li>
|
|
<li><a href="/react/docs/optimizing-performance.html#single-file-builds">Creating a Production Build with Single-File Builds</a></li>
|
|
<li><a href="/react/docs/optimizing-performance.html#brunch">Creating a Production Build with Brunch</a></li>
|
|
<li><a href="/react/docs/optimizing-performance.html#browserify">Creating a Production Build with Browserify</a></li>
|
|
<li><a href="/react/docs/optimizing-performance.html#rollup">Creating a Production Build with Rollup</a></li>
|
|
<li><a href="/react/docs/optimizing-performance.html#webpack">Creating a Production Build with webpack</a></li>
|
|
</ul>
|
|
|
|
<h3>Using a CDN</h3>
|
|
|
|
<p>If you don't want to use npm to manage client packages, the <code>react</code> and <code>react-dom</code> npm packages also provide single-file distributions in <code>umd</code> folders, which are hosted on a CDN:</p>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">crossorigin</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react@16/umd/react.development.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">crossorigin</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react-dom@16/umd/react-dom.development.js"</span><span class="nt">></script></span>
|
|
</code></pre></div>
|
|
<p>The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:</p>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">crossorigin</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react@16/umd/react.production.min.js"</span><span class="nt">></script></span>
|
|
<span class="nt"><script </span><span class="na">crossorigin</span> <span class="na">src=</span><span class="s">"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"</span><span class="nt">></script></span>
|
|
</code></pre></div>
|
|
<p>To load a specific version of <code>react</code> and <code>react-dom</code>, replace <code>16</code> with the version number.</p>
|
|
|
|
<p>If you use Bower, React is available via the <code>react</code> package.</p>
|
|
|
|
<h4>Why the <code>crossorigin</code> Attribute?</h4>
|
|
|
|
<p>If you serve React from a CDN, we recommend to keep the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes"><code>crossorigin</code></a> attribute set:</p>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">crossorigin</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">></script></span>
|
|
</code></pre></div>
|
|
<p>We also recommend to verify that the CDN you are using sets the <code>Access-Control-Allow-Origin: *</code> HTTP header:</p>
|
|
|
|
<p><img src="/react/img/docs/cdn-cors-header.png" alt="Access-Control-Allow-Origin: *"></p>
|
|
|
|
<p>This enables a better <a href="/react/blog/2017/07/26/error-handling-in-react-16.html">error handling experience</a> in React 16 and later.</p>
|
|
|
|
<script>
|
|
/**
|
|
* The code below is based on a snippet from React Native Getting Started page.
|
|
*/
|
|
|
|
// Convert <div>...<span><block /></span>...</div>
|
|
// Into <div>...<block />...</div>
|
|
var blocks = document.getElementsByTagName('block');
|
|
for (var i = 0; i < blocks.length; ++i) {
|
|
var block = blocks[i];
|
|
var span = blocks[i].parentNode;
|
|
var container = span.parentNode;
|
|
container.insertBefore(block, span);
|
|
container.removeChild(span);
|
|
}
|
|
// Convert <div>...<block />content<block />...</div>
|
|
// Into <div>...<block>content</block><block />...</div>
|
|
blocks = document.getElementsByTagName('block');
|
|
for (var i = 0; i < blocks.length; ++i) {
|
|
var block = blocks[i];
|
|
while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') {
|
|
block.appendChild(block.nextSibling);
|
|
}
|
|
}
|
|
|
|
function setSelected(value){
|
|
var tabs = document.querySelectorAll('li[role="tab"]');
|
|
for (var i = 0; i < tabs.length; ++i) {
|
|
var tab = tabs[i];
|
|
if (tab.className === 'button-' + value) {
|
|
tabs[i].setAttribute('aria-selected', 'true');
|
|
tabs[i].setAttribute('tabindex', '0');
|
|
} else {
|
|
tabs[i].setAttribute('aria-selected', 'false');
|
|
tabs[i].setAttribute('tabindex', '-1');
|
|
}
|
|
}
|
|
}
|
|
|
|
function keyToggle(e, value, prevTab, nextTab){
|
|
if (e.keyCode === 37) {
|
|
document.getElementById(prevTab).focus();
|
|
display('target', prevTab);
|
|
}
|
|
if (e.keyCode === 39) {
|
|
document.getElementById(nextTab).focus();
|
|
display('target', nextTab);
|
|
}
|
|
}
|
|
|
|
function display(type, value) {
|
|
setSelected(value);
|
|
var container = document.getElementsByTagName('block')[0].parentNode;
|
|
container.className = 'display-' + type + '-' + value + ' ' +
|
|
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
|
}
|
|
|
|
// If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
|
|
// us as close as possible to the correct platform and dev os using the hashtag and block walk up.
|
|
var foundHash = false;
|
|
if (window.location.hash !== '' && window.location.hash !== 'content') { // content is default
|
|
// Hash links are added a bit later so we wait for them.
|
|
window.addEventListener('DOMContentLoaded', selectTabForHashLink);
|
|
}
|
|
|
|
function selectTabForHashLink() {
|
|
var hashLinks = document.querySelectorAll('a.hash-link');
|
|
for (var i = 0; i < hashLinks.length && !foundHash; ++i) {
|
|
if (hashLinks[i].hash === window.location.hash) {
|
|
var parent = hashLinks[i].parentElement;
|
|
while (parent) {
|
|
if (parent.tagName === 'BLOCK') {
|
|
var target = null;
|
|
if (parent.className.indexOf('fiddle') > -1) {
|
|
target = 'fiddle';
|
|
} else if (parent.className.indexOf('newapp') > -1) {
|
|
target = 'newapp';
|
|
} else if (parent.className.indexOf('existingapp') > -1) {
|
|
target = 'existingapp';
|
|
} else {
|
|
break; // assume we don't have anything.
|
|
}
|
|
display('target', target);
|
|
foundHash = true;
|
|
break;
|
|
}
|
|
parent = parent.parentElement;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/hello-world.html">Next →</a>
|
|
|
|
</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" class="active">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">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>
|