mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
697 lines
31 KiB
HTML
697 lines
31 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>Accessibility - React</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:title" content="Accessibility - React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/accessibility.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/accessibility.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Accessibility
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<h2>Why Accessibility?</h2>
|
|
|
|
<p>Web accessibility (also referred to as <a href="https://en.wiktionary.org/wiki/a11y"><strong>a11y</strong></a>) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.</p>
|
|
|
|
<p>React fully supports building accessible websites, often by using standard HTML techniques.</p>
|
|
|
|
<h2>Standards and Guidelines</h2>
|
|
|
|
<h3>WCAG</h3>
|
|
|
|
<p>The <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines</a> provides guidelines for creating accessible web sites.</p>
|
|
|
|
<p>The following WCAG checklists provide an overview:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.wuhcag.com/wcag-checklist/">WCAG checklist from Wuhcag</a></li>
|
|
<li><a href="http://webaim.org/standards/wcag/checklist">WCAG checklist from WebAIM</a></li>
|
|
<li><a href="http://a11yproject.com/checklist.html">Checklist from The A11Y Project</a></li>
|
|
</ul>
|
|
|
|
<h3>WAI-ARIA</h3>
|
|
|
|
<p>The <a href="https://www.w3.org/WAI/intro/aria">Web Accessibility Initiative - Accessible Rich Internet Applications</a> document contains techniques for building fully accessible JavaScript widgets.</p>
|
|
|
|
<p>Note that all <code>aria-*</code> HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be lowercased:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">input</span>
|
|
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
|
<span class="hll"> <span class="nx">aria</span><span class="o">-</span><span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="nx">labelText</span><span class="p">}</span>
|
|
</span><span class="hll"> <span class="nx">aria</span><span class="o">-</span><span class="nx">required</span><span class="o">=</span><span class="s2">"true"</span>
|
|
</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">onchangeHandler</span><span class="p">}</span>
|
|
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">inputValue</span><span class="p">}</span>
|
|
<span class="nx">name</span><span class="o">=</span><span class="s2">"name"</span>
|
|
<span class="o">/></span>
|
|
</code></pre></div>
|
|
<h2>Accessible Forms</h2>
|
|
|
|
<h3>Labeling</h3>
|
|
|
|
<p>Every HTML form control, such as <code><input></code> and <code><textarea></code>, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.</p>
|
|
|
|
<p>The following resources show us how to do this:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.w3.org/WAI/tutorials/forms/labels/">The W3C shows us how to label elements</a></li>
|
|
<li><a href="http://webaim.org/techniques/forms/controls">WebAIM shows us how to label elements</a></li>
|
|
<li><a href="https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">The Paciello Group explains accessible names</a></li>
|
|
</ul>
|
|
|
|
<p>Although these standard HTML practices can be directly used in React, note that the <code>for</code> attribute is written as <code>htmlFor</code> in JSX:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="hll"><span class="o"><</span><span class="nx">label</span> <span class="nx">htmlFor</span><span class="o">=</span><span class="s2">"namedInput"</span><span class="o">></span><span class="nx">Name</span><span class="o">:<</span><span class="err">/label></span>
|
|
</span><span class="o"><</span><span class="nx">input</span> <span class="nx">id</span><span class="o">=</span><span class="s2">"namedInput"</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"name"</span><span class="o">/></span>
|
|
</code></pre></div>
|
|
<h3>Notifying the user of errors</h3>
|
|
|
|
<p>Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.w3.org/WAI/tutorials/forms/notifications/">The W3C demonstrates user notifications</a></li>
|
|
<li><a href="http://webaim.org/techniques/formvalidation/">WebAIM looks at form validation</a></li>
|
|
</ul>
|
|
|
|
<h2>Focus Control</h2>
|
|
|
|
<p>Ensure that your web application can be fully operated with the keyboard only: </p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/techniques/keyboard/">WebAIM talks about keyboard accessibility</a></li>
|
|
</ul>
|
|
|
|
<h3>Keyboard focus and focus outline</h3>
|
|
|
|
<p>Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:</p>
|
|
|
|
<p><img src="/react/img/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." /></p>
|
|
|
|
<p>Only ever use CSS that removes this outline, for example by setting <code>outline: 0</code>, if you are replacing it with another focus outline implementation.</p>
|
|
|
|
<h3>Mechanisms to skip to desired content</h3>
|
|
|
|
<p>Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.</p>
|
|
|
|
<p>Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
|
|
internal page anchors and some styling:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/techniques/skipnav/">WebAIM - Skip Navigation Links</a></li>
|
|
</ul>
|
|
|
|
<p>Also use landmark elements and roles, such as <code><main></code> and <code><aside></code>, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.</p>
|
|
|
|
<p>Read more about the use of these elements to enhance accessibility here:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html">Deque University - HTML 5 and ARIA Landmarks</a></li>
|
|
</ul>
|
|
|
|
<h3>Programmatically managing focus</h3>
|
|
|
|
<p>Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
|
|
we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.</p>
|
|
|
|
<p>The Mozilla Developer Network takes a look at this and describes how we can build <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">keyboard-navigable JavaScript widgets</a>.</p>
|
|
|
|
<p>To set focus in React, we can use <a href="refs-and-the-dom.html">Refs to Components</a>.</p>
|
|
|
|
<p>Using this, we first create a ref to an element in the JSX of a component class:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="hll"> <span class="c1">// Use the `ref` callback to store a reference to the text input DOM</span>
|
|
</span><span class="hll"> <span class="c1">// element in an instance field (for example, this.textInput).</span>
|
|
</span> <span class="k">return</span> <span class="p">(</span>
|
|
<span class="o"><</span><span class="nx">input</span>
|
|
<span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span>
|
|
<span class="hll"> <span class="nx">ref</span><span class="o">=</span><span class="p">{(</span><span class="nx">input</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">textInput</span> <span class="o">=</span> <span class="nx">input</span><span class="p">;</span> <span class="p">}}</span> <span class="o">/></span>
|
|
</span> <span class="p">);</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>Then we can focus it elsewhere in our component when needed:</p>
|
|
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">focus</span><span class="p">()</span> <span class="p">{</span>
|
|
<span class="c1">// Explicitly focus the text input using the raw DOM API</span>
|
|
<span class="k">this</span><span class="p">.</span><span class="nx">textInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<p>A great focus management example is the <a href="https://github.com/davidtheclark/react-aria-modal">react-aria-modal</a>. This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
|
|
the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
|
|
initially triggered the modal.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<p>While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
|
|
users want to use applications.</p>
|
|
</blockquote>
|
|
|
|
<h2>More Complex Widgets</h2>
|
|
|
|
<p>A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
|
|
even the most complex widget can be coded accessibly.</p>
|
|
|
|
<p>Here we require knowledge of <a href="https://www.w3.org/TR/wai-aria/roles">ARIA Roles</a> as well as <a href="https://www.w3.org/TR/wai-aria/states_and_properties">ARIA States and Properties</a>.
|
|
These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.</p>
|
|
|
|
<p>Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.w3.org/TR/wai-aria-practices/#aria_ex">WAI-ARIA Authoring Practices - Design Patterns and Widgets</a></li>
|
|
<li><a href="http://heydonworks.com/practical_aria_examples/">Heydon Pickering - ARIA Examples</a></li>
|
|
<li><a href="https://inclusive-components.design/">Inclusive Components</a></li>
|
|
</ul>
|
|
|
|
<h2>Other Points for Consideration</h2>
|
|
|
|
<h3>Setting the language</h3>
|
|
|
|
<p>Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/techniques/screenreader/#language">WebAIM - Document Language</a></li>
|
|
</ul>
|
|
|
|
<h3>Setting the document title</h3>
|
|
|
|
<p>Set the document <code><title></code> to correctly describe the current page content as this ensures that the user remains aware of the current page context:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">WCAG - Understanding the Document Title Requirement</a></li>
|
|
</ul>
|
|
|
|
<p>We can set this in React using the <a href="https://github.com/gaearon/react-document-title">React Document Title Component</a>.</p>
|
|
|
|
<h3>Color contrast</h3>
|
|
|
|
<p>Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG - Understanding the Color Contrast Requirement</a></li>
|
|
<li><a href="https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/">Everything About Color Contrast And Why You Should Rethink It</a></li>
|
|
<li><a href="http://a11yproject.com/posts/what-is-color-contrast/">A11yProject - What is Color Contrast</a></li>
|
|
</ul>
|
|
|
|
<p>It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can <a href="http://jxnblk.com/colorable/">calculate an entire accessible color palette with Colorable</a>.</p>
|
|
|
|
<p>Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.</p>
|
|
|
|
<p>If you want to extend your contrast testing abilities you can use these tools:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/resources/contrastchecker/">WebAIM - Color Contrast Checker</a></li>
|
|
<li><a href="https://www.paciellogroup.com/resources/contrastanalyser/">The Paciello Group - Color Contrast Analyzer</a></li>
|
|
</ul>
|
|
|
|
<h2>Development and Testing Tools</h2>
|
|
|
|
<p>There are a number of tools we can use to assist in the creation of accessible web applications.</p>
|
|
|
|
<h3>The keyboard</h3>
|
|
|
|
<p>By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:</p>
|
|
|
|
<ol>
|
|
<li>Plugging out your mouse.</li>
|
|
<li>Using <code>Tab</code> and <code>Shift+Tab</code> to browse.</li>
|
|
<li>Using <code>Enter</code> to activate elements.</li>
|
|
<li>Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns. </li>
|
|
</ol>
|
|
|
|
<h3>Development assistance</h3>
|
|
|
|
<p>We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
|
|
have access to the following tool:</p>
|
|
|
|
<h4>eslint-plugin-jsx-a11y</h4>
|
|
|
|
<p>The <a href="https://github.com/evcohen/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
|
|
IDE's allow you to integrate these findings directly into code analysis and source code windows.</p>
|
|
|
|
<p><a href="https://github.com/facebookincubator/create-react-app">Create React App</a> has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
|
|
you can create an <code>.eslintrc</code> file in the root of your project with this content:</p>
|
|
<div class="highlight"><pre><code class="language-json" data-lang="json"> <span class="p">{</span>
|
|
<span class="nt">"extends"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"react-app"</span><span class="p">,</span> <span class="s2">"plugin:jsx-a11y/recommended"</span><span class="p">],</span>
|
|
<span class="nt">"plugins"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"jsx-a11y"</span><span class="p">]</span>
|
|
<span class="p">}</span>
|
|
</code></pre></div>
|
|
<h3>Testing accessibility in the browser</h3>
|
|
|
|
<p>A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
|
|
test the technical accessibility of your HTML.</p>
|
|
|
|
<h4>aXe, aXe-core and react-axe</h4>
|
|
|
|
<p>Deque Systems offers <a href="https://www.deque.com/products/axe-core/">aXe-core</a> for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.</p>
|
|
|
|
<p><a href="https://www.deque.com/products/axe/">The Accessibility Engine</a> or aXe, is an accessibility inspector browser extension built on <code>aXe-core</code>.</p>
|
|
|
|
<p>You can also use the <a href="https://github.com/dylanb/react-axe">react-axe</a> module to report these accessibility findings directly to the console while developing and debugging.</p>
|
|
|
|
<h4>WebAIM WAVE</h4>
|
|
|
|
<p>The <a href="http://wave.webaim.org/extension/">Web Accessibility Evaluation Tool</a> is another accessibility browser extension.</p>
|
|
|
|
<h4>Accessibility inspectors and the Accessibility Tree</h4>
|
|
|
|
<p><a href="https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/">The Accessibility Tree</a> is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
|
|
to assistive technology, such as screen readers.</p>
|
|
|
|
<p>In some browsers we can easily view the accessibility information for each element in the accessibility tree:</p>
|
|
|
|
<ul>
|
|
<li><a href="https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a">Activate the Accessibility Inspector in Chrome</a></li>
|
|
<li><a href="https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html">Using the Accessibility Inspector in OS X Safari</a></li>
|
|
</ul>
|
|
|
|
<h3>Screen readers</h3>
|
|
|
|
<p>Testing with a screen reader should form part of your accessibility tests.</p>
|
|
|
|
<p>Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.</p>
|
|
|
|
<h4>NVDA in Firefox</h4>
|
|
|
|
<p><a href="https://www.nvaccess.org/">NonVisual Desktop Access</a> or NVDA is an open source Windows screen reader that is widely used.</p>
|
|
|
|
<p>Refer to the following guides on how to best use NVDA:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/articles/nvda/">WebAIM - Using NVDA to Evaluate Web Accessibility</a></li>
|
|
<li><a href="https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts">Deque - NVDA Keyboard Shortcuts</a></li>
|
|
</ul>
|
|
|
|
<h4>VoiceOver in Safari</h4>
|
|
|
|
<p>VoiceOver is an integrated screen reader on Apple devices. </p>
|
|
|
|
<p>Refer to the following guides on how activate and use VoiceOver:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/articles/voiceover/">WebAIM - Using VoiceOver to Evaluate Web Accessibility</a></li>
|
|
<li><a href="https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts">Deque - VoiceOver for OSX Keyboard Shortcuts</a></li>
|
|
<li><a href="https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts">Deque - VoiceOver for iOS Shortcuts</a></li>
|
|
</ul>
|
|
|
|
<h4>JAWS in Internet Explorer</h4>
|
|
|
|
<p><a href="http://www.freedomscientific.com/Products/Blindness/JAWS">Job Access With Speech</a> or JAWS, is a prolifically used screen reader on Windows. </p>
|
|
|
|
<p>Refer to the following guides on how to best use JAWS:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://webaim.org/articles/jaws/">WebAIM - Using JAWS to Evaluate Web Accessibility</a></li>
|
|
<li><a href="https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts">Deque - JAWS Keyboard Shortcuts</a></li>
|
|
</ul>
|
|
|
|
|
|
<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">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" class="active">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>
|