mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
784e29fd65
See https://twitter.com/amorgner/status/852660573364002816, there are issues with unpkg right now.
585 lines
23 KiB
HTML
585 lines
23 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="/react/js/html5shiv.min.js"></script>
|
|
<script src="/react/js/es5-shim.min.js"></script>
|
|
<script src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
|
<script src="/react/js/codemirror.js"></script>
|
|
<script src="/react/js/javascript.js"></script>
|
|
<script src="/react/js/xml.js"></script>
|
|
<script src="/react/js/jsx.js"></script>
|
|
<script src="/react/js/react.js"></script>
|
|
<script src="/react/js/react-dom.js"></script>
|
|
<script src="/react/js/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">v15.5.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;
|
|
}
|
|
.toggler a {
|
|
display: inline-block;
|
|
padding: 10px 5px;
|
|
margin: 2px;
|
|
border: 1px solid #05A5D1;
|
|
border-radius: 3px;
|
|
text-decoration: none !important;
|
|
}
|
|
</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 a {
|
|
display: inline-block;
|
|
padding: 10px 5px;
|
|
margin: 2px;
|
|
border: 1px solid #05A5D1;
|
|
border-radius: 3px;
|
|
text-decoration: none !important;
|
|
color: #05A5D1;
|
|
}
|
|
.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 />
|
|
<a href="javascript:void(0);" class="button-fiddle" onclick="display('target', 'fiddle')">Try React</a>
|
|
<a href="javascript:void(0);" class="button-newapp" onclick="display('target', 'newapp')">Create a New App</a>
|
|
<a href="javascript:void(0);" class="button-existingapp" onclick="display('target', 'existingapp')">Add React to an Existing App</a>
|
|
</div>
|
|
|
|
<p><block 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 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><block 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>
|
|
|
|
<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>
|
|
|
|
<h3>Development and Production Versions</h3>
|
|
|
|
<p>By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.</p>
|
|
|
|
<h4>Brunch</h4>
|
|
|
|
<p>To create an optimized production build with Brunch, just add the <code>-p</code> flag to the build command. See the <a href="http://brunch.io/docs/commands">Brunch docs</a> for more details.</p>
|
|
|
|
<h4>Browserify</h4>
|
|
|
|
<p>Run Browserify with <code>NODE_ENV</code> environment variable set to <code>production</code> and use <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a> as the last build step so that development-only code gets stripped out.</p>
|
|
|
|
<h4>Create React App</h4>
|
|
|
|
<p>If you use <a href="https://github.com/facebookincubator/create-react-app">Create React App</a>, <code>npm run build</code> will create an optimized build of your app in the <code>build</code> folder.</p>
|
|
|
|
<h4>Rollup</h4>
|
|
|
|
<p>Use <a href="https://github.com/rollup/rollup-plugin-replace">rollup-plugin-replace</a> plugin together with <a href="https://github.com/rollup/rollup-plugin-commonjs">rollup-plugin-commonjs</a> (in that order) to remove development-only code. <a href="https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0">See this gist</a> for a complete setup example.</p>
|
|
|
|
<h4>Webpack</h4>
|
|
|
|
<p>Include both <code>DefinePlugin</code> and <code>UglifyJsPlugin</code> into your production Webpack configuration as described in <a href="https://webpack.js.org/guides/production-build/">this guide</a>.</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 display(type, 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/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/web-components.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/higher-order-components.html">Higher-Order Components</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>
|
|
|
|
</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>
|