mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Dan Abramov
546 lines
19 KiB
HTML
546 lines
19 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>Language Tooling | React</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="Language Tooling | React">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://facebook.github.io/react/docs/language-tooling.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/index.html">
|
|
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
|
React
|
|
</a>
|
|
<ul class="nav-site nav-site-internal">
|
|
<li><a href="/react/docs/getting-started.html" class="active">Docs</a></li>
|
|
<li><a href="/react/support.html">Support</a></li>
|
|
<li><a href="/react/downloads.html">Download</a></li>
|
|
<li><a href="/react/blog/">Blog</a></li>
|
|
<li>
|
|
<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://facebook.github.io/react-native/">React Native</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/getting-started.html">Getting Started</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tutorial.html">Tutorial</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Community Resources</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/conferences.html">Conferences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/videos.html">Videos</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" class="external">Complementary Tools</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/facebook/react/wiki/Examples" class="external">Examples</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/why-react.html">Why React?</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/displaying-data.html">Displaying Data</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">JSX in Depth</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-gotchas.html">JSX Gotchas</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/interactivity-and-dynamic-uis.html">Interactivity and Dynamic UIs</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/multiple-components.html">Multiple Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reusable-components.html">Reusable Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/transferring-props.html">Transferring Props</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">Forms</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/working-with-the-browser.html">Working With the Browser</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/more-about-refs.html">Refs to Components</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tooling-integration.html">Tooling Integration</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/language-tooling.html" class="active">Language Tooling</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/package-management.html">Package Management</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/environments.html">Server-side Environments</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">Add-Ons</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">Animation</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">Two-Way Binding Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/test-utils.html">Test Utilities</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/clone-with-props.html">Cloning Elements</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/create-fragment.html">Keyed Fragments</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/update.html">Immutability Helpers</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/pure-render-mixin.html">PureRenderMixin</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/perf.html">Performance Tools</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/shallow-compare.html">Shallow Compare</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/advanced-performance.html">Advanced Performance</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/context.html">Context</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/top-level-api.html">Top-Level API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-api.html">Component API</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-specs.html">Component Specs and Lifecycle</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tags-and-attributes.html">Supported Tags and Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html">Event System</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-differences.html">DOM Differences</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/special-non-dom-attributes.html">Special Non-DOM Attributes</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">Reconciliation</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/webcomponents.html">Web Components</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/glossary.html">React (Virtual) DOM Terminology</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Tips Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Tips</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/tips/introduction.html">Introduction</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/expose-component-functions.html">Expose Component Functions</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-undefined.html">this.props.children undefined</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/use-react-with-other-libraries.html">Use React with Other Libraries</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dangerously-set-inner-html.html">Dangerously Set innerHTML</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/design-principles.html">Design Principles</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/docs/09.1-language-tooling.md" target="_blank">Edit on GitHub</a>
|
|
<h1>
|
|
Language Tooling
|
|
</h1>
|
|
<div class="subHeader"></div>
|
|
|
|
<h2><a class="anchor" name="es2015-with-jsx"></a>ES2015 with JSX <a class="hash-link" href="#es2015-with-jsx">#</a></h2><h3><a class="anchor" name="in-browser-jsx-transform"></a>In-browser JSX Transform <a class="hash-link" href="#in-browser-jsx-transform">#</a></h3>
|
|
<p>If you like using JSX, Babel 5 provided an in-browser ES2015 and JSX transformer for development called browser.js that can be included from <a href="https://cdnjs.com/libraries/babel-core/5.8.34">CDNJS</a>. Include a <code><script type="text/babel"></code> tag to engage the JSX transformer.</p>
|
|
|
|
<blockquote>
|
|
<p>Note:</p>
|
|
|
|
<p>The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="productionizing-precompiled-jsx"></a>Productionizing: Precompiled JSX <a class="hash-link" href="#productionizing-precompiled-jsx">#</a></h3>
|
|
<p>If you have <a href="https://www.npmjs.com/">npm</a>, you can run <code>npm install -g babel-cli</code>. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent <code>React.createElement(...)</code>, <code>displayName</code> is automatically inferred and added to all <code>React.createClass</code> calls.</p>
|
|
|
|
<p>This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: <code>babel --watch src/ --out-dir lib/</code>.</p>
|
|
|
|
<p>Beginning with Babel 6, there are no transforms included by default. This means that options must be specified when running the <code>babel</code> command, or a <code>.babelrc</code> must specify options. Additional packages must also be installed which bundle together a number of transforms, called presets. The most common use when working with React will be to include the <code>es2015</code> and <code>react</code> presets. More information about the changes to Babel can be found in <a href="http://babeljs.io/blog/2015/10/29/6.0.0">their blog post announcing Babel 6</a>.</p>
|
|
|
|
<p>Here is an example of what you will do if using ES2015 syntax and React:</p>
|
|
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install babel-preset-es2015 babel-preset-react
|
|
babel --presets es2015,react --watch src/ --out-dir lib/
|
|
</code></pre></div>
|
|
<p>By default JSX files with a <code>.js</code> extension are transformed. Run <code>babel --help</code> for more information on how to use Babel.</p>
|
|
|
|
<p>Example output:</p>
|
|
<div class="highlight"><pre><code class="language-text" data-lang="text">$ cat test.js
|
|
function HelloMessage(props) {
|
|
return <div>Hello {props.name}</div>;
|
|
}
|
|
|
|
ReactDOM.render(<HelloMessage name="John" />, mountNode);
|
|
|
|
$ babel test.js
|
|
"use strict";
|
|
|
|
function HelloMessage(props) {
|
|
return React.createElement(
|
|
"div",
|
|
null,
|
|
"Hello ",
|
|
props.name
|
|
);
|
|
}
|
|
|
|
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
|
|
</code></pre></div><h3><a class="anchor" name="helpful-open-source-projects"></a>Helpful Open-Source Projects <a class="hash-link" href="#helpful-open-source-projects">#</a></h3>
|
|
<p>The open-source community has built tools that integrate JSX with several editors and build systems. See <a href="https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations">JSX integrations</a> for the full list.</p>
|
|
<h2><a class="anchor" name="flow"></a>Flow <a class="hash-link" href="#flow">#</a></h2>
|
|
<p>Flow is a JavaScript type checker released by Facebook, and it supports JSX. For more info, checkout the <a href="http://flowtype.org/">Flow homepage</a>.</p>
|
|
<h2><a class="anchor" name="typescript"></a>TypeScript <a class="hash-link" href="#typescript">#</a></h2>
|
|
<p>TypeScript is a type-checker and transpiler that supports type-checking React and JSX.
|
|
For more info, check out their guide on <a href="https://www.typescriptlang.org/docs/handbook/react-&-webpack.html">getting started with React and Webpack</a>, or learn more about <a href="https://www.typescriptlang.org/docs/handbook/jsx.html">TypeScript's JSX support</a>.</p>
|
|
|
|
<p>To learn more about TypeScript in general, visit the <a href="https://www.typescriptlang.org/">TypeScript homepage</a>.</p>
|
|
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/tooling-integration.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/package-management.html">Next →</a>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">
|
|
A Facebook & Instagram collaboration.<br>
|
|
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
|
</div>
|
|
<div class="right">
|
|
© 2013–2016 Facebook Inc.<br>
|
|
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<div id="fb-root"></div>
|
|
|
|
<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>
|