mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
v0.4.0
This commit is contained in:
Paul O’Shannessy
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html" class="active">Community Round-up #4</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html" class="active">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | React v0.4.0</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | React v0.4.0" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/07/17/react-v0-4-0.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">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/" class="active">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap blogContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html" class="active">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React v0.4.0</h1>
|
||||
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Over the past 2 months we've been taking feedback and working hard to make React even better. We've also added several features that awe didn't finish in time for the v0.3 launch, and are proud to announce the availability of React v0.4 today!</p>
|
||||
|
||||
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="http://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!</p>
|
||||
|
||||
<p>React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.</p>
|
||||
|
||||
<p>When you're ready, <a href="/react/downloads.html">go download it</a>!</p>
|
||||
|
||||
<h3>React</h3>
|
||||
|
||||
<ul>
|
||||
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
|
||||
<li>Support for more DOM elements and attributes (e.g., <code><canvas></code>)</li>
|
||||
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(<component>, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
|
||||
<li><code>prop</code> improvements: validation and default values. <a href="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
|
||||
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="http://facebook.github.io/react/docs/multiple-components.html">Read the docs for details...</a></li>
|
||||
<li>Removed <code>React.autoBind</code>. <a href="http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
|
||||
<li>Improvements to forms. We've written wrappers around <code><input></code>, <code><textarea></code>, <code><option></code>, and <code><select></code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="http://facebook.github.io/react/docs/forms.html">Read the docs for details...</a></li>
|
||||
<li>We've implemented an improved synthetic event system that conforms to the W3C spec.</li>
|
||||
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as it's second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
|
||||
</ul>
|
||||
|
||||
<h3>JSX</h3>
|
||||
|
||||
<ul>
|
||||
<li>Support for comment nodes <code><div>{/* this is a comment and won't be rendered */}</div></code></li>
|
||||
<li>Children are now transformed directly into arguments instead of being wrapped in an array
|
||||
E.g. <code><div><Component1/><Component2></div></code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
|
||||
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
|
||||
If you were using React without JSX previously, your code should still work.</li>
|
||||
</ul>
|
||||
|
||||
<h3>react-tools</h3>
|
||||
|
||||
<ul>
|
||||
<li>Fixed a number of bugs when transforming directories</li>
|
||||
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2013/07/17/react-v0-4-0.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
@@ -81,6 +83,23 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></h1>
|
||||
<p class="meta">July 17, 2013 by Paul O'Shannessy</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Over the past 2 months we've been taking feedback and working hard to make React even better. We've also added several features that awe didn't finish in time for the v0.3 launch, and are proud to announce the availability of React v0.4 today!</p>
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/react/blog/2013/07/17/react-v0-4-0.html">Continue Reading →</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></h1>
|
||||
<p class="meta">July 11, 2013 by Paul O'Shannessy</p>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Goals of the documentation</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Goals of the documentation" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/OUTLINE.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Goals of the documentation</h1>
|
||||
<div class="subHeader"></div>
|
||||
<ul>
|
||||
<li>Flow of docs should mimic progression of questions a new user would ask</li>
|
||||
<li>High information density -- assume the reader is adept at JS</li>
|
||||
<li>Talk about best practices</li>
|
||||
<li>JSFiddles for all code samples</li>
|
||||
<li>Provide background for some of the design decisions</li>
|
||||
<li>Less words less words less words!</li>
|
||||
</ul>
|
||||
|
||||
<h2>Outline</h2>
|
||||
|
||||
<p>Motivation / Why React?
|
||||
- Declarative (simple)
|
||||
- Components (separation of concerns)
|
||||
- Give it 5 minutes</p>
|
||||
|
||||
<p>Displaying data
|
||||
- Hello world example
|
||||
- Reactive updates
|
||||
- Components are just functions
|
||||
- JSX syntax (link to separate doc?)
|
||||
- JSX gotchas</p>
|
||||
|
||||
<p>Interactivity and dynamic UIs
|
||||
- Click handler example
|
||||
- Event handlers / synthetic events (link to w3c docs)
|
||||
- Under the hood: autoBind and event delegation (IE8 notes)
|
||||
- React is a state machine
|
||||
- How state works
|
||||
- What components should have state?
|
||||
- What should go in state?
|
||||
- What shouldn't go in state?</p>
|
||||
|
||||
<p>Scaling up: using multiple components
|
||||
- Motivation: separate concerns
|
||||
- Composition example
|
||||
- Ownership (and owner vs. parent)
|
||||
- Children
|
||||
- Data flow (one-way data binding)
|
||||
- A note on performance</p>
|
||||
|
||||
<p>Building effective reusable components
|
||||
- You should build a reusable component library (CSS, testing etc)
|
||||
- Prop validation
|
||||
- Transferring props: a shortcut
|
||||
- Mixins
|
||||
- Testing</p>
|
||||
|
||||
<p>Forms</p>
|
||||
|
||||
<p>Working with the browser
|
||||
- The mock DOM
|
||||
- Refs / getDOMNode()
|
||||
- More about refs
|
||||
- Component lifecycle
|
||||
- Browser support and polyfills</p>
|
||||
|
||||
<p>Working with your environment
|
||||
- CDN-hosted React
|
||||
- Using master
|
||||
- In-browser JSX transform
|
||||
- Productionizing: precompiled JSX
|
||||
- Helpful open-source projects</p>
|
||||
|
||||
<p>Integrating with other UI libraries
|
||||
- Using jQuery plugins
|
||||
- Letting jQuery manage React components
|
||||
- Using with Backbone.View
|
||||
- CoffeeScript
|
||||
- Moving from Handlebars to React: an example</p>
|
||||
|
||||
<p>Server / static rendering
|
||||
- Motivation
|
||||
- Simple example
|
||||
- How does it work? (No DOM)
|
||||
- Rendr + React</p>
|
||||
|
||||
<p>Big ideas
|
||||
- Animation
|
||||
- Bootstrap bindings (responsive grids)
|
||||
- Reactive CSS
|
||||
- Web workers
|
||||
- Native views</p>
|
||||
|
||||
<p>Case studies
|
||||
- Comment box tutorial from scratch
|
||||
- From HTML mock to application: React one-hour email
|
||||
- Jordan's LikeToggler example</p>
|
||||
|
||||
<p>Reference
|
||||
- API
|
||||
- DOM differences</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/09.1-tutorial.html">← Prev</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/OUTLINE.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,248 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Advanced Components</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Advanced Components" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/advanced-components.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html" class="active">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Advanced Components</h1>
|
||||
<div class="subHeader">How to build advanced composite components.</div>
|
||||
<p>Composite components extend a <code>ReactCompositeComponent</code> base class that provides
|
||||
a very powerful API that makes React flexible and able to easily work with other
|
||||
libraries and frameworks.</p>
|
||||
|
||||
<h2>Lifecycle Methods</h2>
|
||||
|
||||
<p>Composite components can optionally implement lifecycle methods that are invoked
|
||||
at various stages in the <a href="component-lifecycle.html">component lifecycle</a> that
|
||||
each have unique guarantees.</p>
|
||||
|
||||
<h3>Mounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>getInitialState(): object</code> is invoked before a component is mounted.
|
||||
Stateful components should implement this and return the initial state data.</li>
|
||||
<li><code>componentWillMount()</code> is invoked immediately before mounting occurs.</li>
|
||||
<li><code>componentDidMount(DOMElement rootNode)</code> is invoked immediately after
|
||||
mounting occurs. Initialization that requires DOM nodes should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Updating</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillReceiveProps(object nextProps)</code> is invoked when a mounted
|
||||
component receives new props. This method should be used to compare
|
||||
<code>this.props</code> and <code>nextProps</code> to perform state transitions using
|
||||
<code>this.setState()</code>.</li>
|
||||
<li><code>shouldComponentUpdate(object nextProps, object nextState): boolean</code> is
|
||||
invoked when a component decides whether any changes warrant an update to the
|
||||
DOM. Implement this as an optimization to compare <code>this.props</code> with
|
||||
<code>nextProps</code> and <code>this.state</code> with <code>nextState</code> and return false if React
|
||||
should skip updating.</li>
|
||||
<li><code>componentWillUpdate(object nextProps, object nextState)</code> is invoked
|
||||
immediately before updating occurs. You cannot call <code>this.setState()</code> here.</li>
|
||||
<li><code>componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)</code>
|
||||
is invoked immediately after updating occurs.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Unmounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillUnmount()</code> is invoked immediately before a component is
|
||||
unmounted and destroyed. Cleanup should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Mounted Methods</h2>
|
||||
|
||||
<p><em>Mounted</em> composite components also support the following methods:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>getDOMNode(): DOMElement</code> can be invoked on any mounted component in order
|
||||
to obtain a reference to its rendered DOM node.</li>
|
||||
<li><code>forceUpdate()</code> can be invoked on any mounted component when you know that
|
||||
some deeper aspect of the component's state has changed without using
|
||||
<code>this.setState()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>DOMElement rootNode</code> argument of <code>componentDidMount()</code> and
|
||||
<code>componentDidUpdate()</code> is a convenience. The same node can be obtained by
|
||||
calling <code>this.getDOMNode()</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Component Refs</h2>
|
||||
|
||||
<p>A common use case of event callbacks or the lifecycle methods is to operate on a
|
||||
component returned by <code>render()</code>. For example, consider a search component that
|
||||
should auto-focus the input once mounted:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SearchForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="nx">action</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">action</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"search"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Search..."</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rootNode</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">searchInput</span> <span class="o">=</span> <span class="nx">rootNode</span><span class="p">.</span><span class="nx">firstChild</span><span class="p">;</span>
|
||||
<span class="nx">searchInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Although this implementation works, it is fragile because <code>componentDidMount()</code>
|
||||
now relies on <code>render()</code> returning a particular DOM structure.</p>
|
||||
|
||||
<p>React provides a better way for composite components to reference components
|
||||
that it constructs in its <code>render()</code> method through the use of refs. A component
|
||||
can assign a <code>ref</code> to any component it constructs. This will create a reference
|
||||
to those components on <code>this.refs</code>. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SearchForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="nx">action</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">action</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"search"</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">"Search..."</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">"searchInput"</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="err">/form></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">rootNode</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">searchInput</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">searchInput</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">();</span>
|
||||
</span> <span class="nx">searchInput</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, <code>this.refs.searchInput</code> will reference the <code><input></code> component
|
||||
and is available in most lifecycle methods and event callbacks. We obtain a
|
||||
reference to the <code><input></code>'s DOM node using <code>getDOMNode()</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If you want to preserve compatibility with Google Closure Compiler's
|
||||
property crushing in <code>ADVANCED_OPTIMIZATIONS</code> mode, make sure to use string
|
||||
literals with <code>this.refs</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/event-handling.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/mixins.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/advanced-components.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,152 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Common Questions</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Common Questions" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/common-questions.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html" class="active">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Common Questions</h1>
|
||||
<div class="subHeader"></div>
|
||||
<h3>What browsers does React support?</h3>
|
||||
|
||||
<p>React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.</p>
|
||||
|
||||
<h3>How do I get React to support Internet Explorer 8?</h3>
|
||||
|
||||
<p>React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the <a href="https://github.com/kriskowal/es5-shim">ES5 Shims</a> to implement these shims.</p>
|
||||
|
||||
<h3>Who uses React?</h3>
|
||||
|
||||
<p>The <a href="http://instagram.com/">Instagram</a> website is built entirely in React. The <a href="https://www.facebook.com/">Facebook</a> website is also increasingly using React, including the common commenting plugin across the site.</p>
|
||||
|
||||
<h3>I don't get it. React is confusing!</h3>
|
||||
|
||||
<p><a href="http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood">This blog post by a member of the React team</a> talks about some of the reasons
|
||||
why React is designed the way that it is.</p>
|
||||
|
||||
<h3>Can I integrate with other JavaScript libraries?</h3>
|
||||
|
||||
<p>Absolutely! In fact, we encourage it! See <a href="http://github.com/facebook/react/">our GitHub repo</a> for a <a href="https://github.com/facebook/react/tree/master/examples/todomvc-backbone">TodoMVC example using Backbone</a> and a <a href="https://github.com/facebook/react/tree/master/examples/jquery-bootstrap">jQuery + Bootstrap modal demo</a>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/tutorial.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/syntax.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/common-questions.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,191 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Basics</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Basics" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-basics.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html" class="active">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Basics</h1>
|
||||
<div class="subHeader">What are components?</div>
|
||||
<p><em>Components</em> are the basic units of composition in React. Components encapsulate
|
||||
the logic necessary to take input parameters and render markup. Components can
|
||||
be rendered into an existing DOM element on the page by using
|
||||
<code>React.renderComponent</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Replaces everything in `document.body` with <div>Hello, world!</div>;</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</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">/div>, document.body);</span>
|
||||
</code></pre></div>
|
||||
<p>Keep in mind that <code><div></code> is <strong>not</strong> a DOM element! Keep reading...</p>
|
||||
|
||||
<h2>Types of Components</h2>
|
||||
|
||||
<p>There are two types of components:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Composite Components</strong></li>
|
||||
<li><strong>DOM Components</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3>Composite Components <small>such as <code>TodoApp</code> and <code>Typeahead</code>.</small></h3>
|
||||
|
||||
<p>The majority of your React code will be implementing composite components.</p>
|
||||
|
||||
<p>Composite components are higher-level components with custom rendering logic
|
||||
that may compose other composite components or DOM components.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="kd">var</span> <span class="nx">LinkButton</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"btn"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">myButton</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LinkButton</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>This example defines a <code>LinkButton</code> component class using <code>React.createClass()</code>,
|
||||
and its <code>render()</code> method composes the <code><a></code> DOM component.</p>
|
||||
|
||||
<h3>DOM Components <small>such as <code>div</code> and <code>span</code>.</small></h3>
|
||||
|
||||
<p>DOM components are the set of classes that correspond to browser DOM elements.
|
||||
They are defined in <code>React.DOM</code> and can be brought "into scope" by setting
|
||||
<code>@jsx React.DOM</code> in the docblock. See <a href="syntax.html">JSX Syntax</a> for more
|
||||
details.</p>
|
||||
|
||||
<p>Although <code>React.DOM</code> components look like browser DOM elements, they differ in a
|
||||
few ways:</p>
|
||||
|
||||
<ul>
|
||||
<li>All property names, including event handlers, are camelCased.</li>
|
||||
<li>JavaScript identifiers should be used, namely <code>className</code> and <code>htmlFor</code>.</li>
|
||||
<li>The <code>style</code> prop expects an object instead of a string. The object should map
|
||||
camelCased style properties to values, e.g. <code>{backgroundColor: '#fff'}</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Here is an example of a React link styled as a button with a click handler:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="kd">var</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><span class="nx">alert</span><span class="p">(</span><span class="s1">'Clicked!'</span><span class="p">);};</span>
|
||||
<span class="kd">var</span> <span class="nx">inlineStyle</span> <span class="o">=</span> <span class="p">{</span><span class="nx">textDecoration</span><span class="o">:</span> <span class="s1">'none'</span><span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">myLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"btn"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span> <span class="nx">style</span><span class="o">=</span><span class="p">{</span><span class="nx">inlineStyle</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/syntax.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-data.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/component-basics.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,261 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Data</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Data" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-data.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html" class="active">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Data</h1>
|
||||
<div class="subHeader">How is data passed into a component?</div>
|
||||
<h2>Props</h2>
|
||||
|
||||
<p>Components use data to determine what should be rendered. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">myLikeLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, <code>LikeLink</code> takes <code>liked</code> as boolean data. This type of data
|
||||
that is passed in is called a "prop". Examples of props on DOM components
|
||||
include <code>className</code> and <code>onClick</code>.</p>
|
||||
|
||||
<p>Whenever a component's props change, its <code>render()</code> function will be
|
||||
re-evaluated and the DOM will be updated. React will ensure that the DOM is
|
||||
always kept up-to-date.</p>
|
||||
|
||||
<h2>State</h2>
|
||||
|
||||
<p>Let's build a small <code>LikeApp</code> application that makes use of the <code><LikeLink></code>
|
||||
component from above. It should start off unliked and we should be able to like
|
||||
it by clicking the link:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">isClicked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="nx">isClicked</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Somehow update `isClicked`.</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This renders a <code><LikeLink></code> with a click listener. However, it is not clear how
|
||||
<code>handleClick</code> should update <code>isClicked</code> to true. <code>LikeApp</code> needs a way to store
|
||||
<strong>state</strong> about whether or not it has been clicked.</p>
|
||||
|
||||
<h3>State vs. Props</h3>
|
||||
|
||||
<p>State is data that is managed <em>internally</em> by a composite component. Like props,
|
||||
the <code>render()</code> function will be re-evaluated whenever state changes. Props and
|
||||
state differ in that:</p>
|
||||
|
||||
<ul>
|
||||
<li>Props are passed in from the creator.</li>
|
||||
<li>State is private to and managed by the component.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Managing State</h3>
|
||||
|
||||
<p>Let's update our <code>LikeApp</code> component using state:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="p">{</span><span class="nx">isClicked</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">isClicked</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isClicked</span><span class="p">;</span>
|
||||
</span> <span class="k">return</span> <span class="o"><</span><span class="nx">LikeLink</span> <span class="nx">liked</span><span class="o">=</span><span class="p">{</span><span class="nx">isClicked</span><span class="p">}</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isClicked</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>There's a lot going on here, so let's work our way from top to bottom:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>getInitialState()</code> describes what state data looks like when the component
|
||||
is created.</li>
|
||||
<li>In <code>render()</code>, state data can be accessed via <code>this.state</code>.</li>
|
||||
<li>When the link is clicked, we update state using <code>setState()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Now when we click the link, the <code><LikeLink></code> will get updated, right? Wrong.</p>
|
||||
|
||||
<h2>Transferring Props</h2>
|
||||
|
||||
<p>If you have been following carefully, you may have noticed that although we pass
|
||||
a click handler into <code><LikeLink></code> as a prop, <code>LikeLink</code> does not do anything
|
||||
with <code>this.props.onClick</code>! Let's fix that.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Although this works, realize that this would quickly become tedious if we wanted
|
||||
to also transfer <code>href</code>, <code>title</code>, <code>target</code>, and other events from <code>this</code> to the
|
||||
rendered <code><a></code>. React provides a convenience method, <code>transferPropsTo()</code>, for
|
||||
transferring props:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">LikeLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'Liked'</span> <span class="o">:</span> <span class="s1">'Like'</span><span class="p">;</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">transferPropsTo</span><span class="p">(</span><span class="o"><</span><span class="nx">a</span><span class="o">></span><span class="p">{</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/a>);</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This will transfer all props from <code>this</code> to the specified component (including
|
||||
<code>onClick</code>).</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
|
||||
<p>Now we are done. <code>LikeApp</code> renders an unliked link which, when clicked, will:</p>
|
||||
|
||||
<ol>
|
||||
<li>Update the internal state of <code>LikeApp</code>.</li>
|
||||
<li>Change the props passed into <code>LikeLink</code>.</li>
|
||||
<li>Change the return value of <code>render()</code>.</li>
|
||||
<li>Trigger an update to the DOM.</li>
|
||||
</ol>
|
||||
|
||||
<p>It's worth noting that React will handle new return values of <code>render()</code> by
|
||||
making the minimal set of mutations necessary to bring the DOM up-to-date. In
|
||||
this case, only the <code>textContent</code> of the rendered link will be mutated.</p>
|
||||
|
||||
<p>In summary:</p>
|
||||
|
||||
<ul>
|
||||
<li>Props are passed in whereas state is managed internally by a component.</li>
|
||||
<li>Never mutate <code>this.props</code> or <code>this.state</code>. You should pass props into other
|
||||
components and mutate state using <code>setState()</code>.</li>
|
||||
<li>State is private. Never read <code>state</code> or call <code>setState()</code> on
|
||||
anything but <code>this</code>.</li>
|
||||
<li>Whenever props or state changes, <code>render()</code> will be re-evaluated and the DOM
|
||||
updated. Also, <code>render()</code> should not depend on anything besides <code>this.props</code>
|
||||
and <code>this.state</code>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-basics.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-lifecycle.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/component-data.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,202 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Component Lifecycle</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Component Lifecycle" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/component-lifecycle.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html" class="active">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Component Lifecycle</h1>
|
||||
<div class="subHeader">What happens when I render a React component?</div>
|
||||
<h2>Mounting</h2>
|
||||
|
||||
<p><a href="component-basics.html">We have previously seen</a> how to render components into
|
||||
existing DOM elements on the page:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</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">/div>, document.body);</span>
|
||||
</code></pre></div>
|
||||
<p>In this one simple line, we have accomplished the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>A <code><div></code> (defined by <code>React.DOM.div</code>) component is instantiated.</li>
|
||||
<li>The component is <strong>mounted</strong> into <code>document.body</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Mounting</strong> is the process of initializing a React component by creating its
|
||||
DOM nodes and inserting them into a supplied container node.</p>
|
||||
|
||||
<p>At this point, the entire page consists of a single <code><div></code> with "Hello,
|
||||
world!".</p>
|
||||
|
||||
<h2>Updating</h2>
|
||||
|
||||
<p>Let's add a second call to <code>React.renderComponent()</code> after three
|
||||
seconds:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</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">/div>, document.body);</span>
|
||||
<span class="hll"><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Goodbye</span><span class="p">,</span> <span class="nx">world</span><span class="p">.</span><span class="o"><</span><span class="err">/div>, document.body);</span>
|
||||
</span><span class="hll"><span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
|
||||
</span></code></pre></div>
|
||||
<p>The second call to <code>React.renderComponent()</code> will trigger the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code><div></code> component will check the new props to see if anything changed.</li>
|
||||
<li>The set of changes are used to <strong>update</strong> the DOM node as necessary.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Updating</strong> is the process of mutating the rendered DOM nodes and occurs
|
||||
whenever either props or state has changed. This ensures that the rendered DOM
|
||||
is consistent with the data.</p>
|
||||
|
||||
<h2>Unmounting</h2>
|
||||
|
||||
<p>Let's add one final call to <code>React.renderComponent()</code> after another three
|
||||
seconds:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</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">/div>, document.body);</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">Goodbye</span><span class="p">,</span> <span class="nx">world</span><span class="p">.</span><span class="o"><</span><span class="err">/div>, document.body);</span>
|
||||
<span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
|
||||
<span class="hll"><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span><span class="o"><</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">"/images/fin.png"</span> <span class="o">/></span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</span><span class="hll"><span class="p">},</span> <span class="mi">6000</span><span class="p">);</span>
|
||||
</span></code></pre></div>
|
||||
<p>The third call to <code>React.renderComponent()</code> will trigger the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>An <code><img></code> (defined by <code>React.DOM.img</code>) component is instantiated.</li>
|
||||
<li>React will compare the <code><div></code> component with the <code><img></code> component.</li>
|
||||
<li>Since the component class is different, the <code><div></code> component will be
|
||||
<strong>unmounted</strong>.</li>
|
||||
<li>The <code><img></code> component will then be mounted into <code>document.body</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Unmounting</strong> is the process of releasing resources that have been allocated by
|
||||
a component. This allows user interfaces built with React to live long without
|
||||
memory leaks.</p>
|
||||
|
||||
<p>Components can also be unmounted using
|
||||
<code>React.unmountAndReleaseReactRootNode()</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">unmountAndReleaseReactRootNode</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>This will unmount any components mounted immediately within <code>document.body</code>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-data.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/event-handling.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/component-lifecycle.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Displaying Data</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Displaying Data" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/displaying-data.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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" class="active">
|
||||
Displaying Data
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/jsx-in-depth.html">
|
||||
JSX in Depth
|
||||
</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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Displaying Data</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.</p>
|
||||
|
||||
<h2>Getting Started</h2>
|
||||
|
||||
<p>Let's look at a really simple example. Create a <code>hello-react.html</code> file with the following code:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.4.0.min.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.4.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"example"</span><span class="nt">></div></span>
|
||||
<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/jsx"</span><span class="nt">></span>
|
||||
|
||||
<span class="c1">// ** Your code goes here! **</span>
|
||||
|
||||
<span class="nt"></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span>
|
||||
</code></pre></div>
|
||||
<p>For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">HelloWorld</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span>
|
||||
<span class="nx">Hello</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="nx">placeholder</span><span class="o">=</span><span class="s2">"Your name here"</span> <span class="o">/>!</span>
|
||||
<span class="nx">It</span> <span class="nx">is</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">date</span><span class="p">.</span><span class="nx">toTimeString</span><span class="p">()}</span>
|
||||
<span class="o"><</span><span class="err">/p></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">HelloWorld</span> <span class="nx">date</span><span class="o">=</span><span class="p">{</span><span class="k">new</span> <span class="nb">Date</span><span class="p">()}</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span> <span class="mi">500</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Reactive Updates</h2>
|
||||
|
||||
<p>Open <code>hello-react.html</code> in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.</p>
|
||||
|
||||
<p>The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. <strong>It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.</strong></p>
|
||||
|
||||
<p>The inputs to this component are called <code>props</code> — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, <strong>never write to <code>this.props</code></strong>.</p>
|
||||
|
||||
<h2>Components are Just Like Functions</h2>
|
||||
|
||||
<p>React components are very simple. You can think of them as simple function that take in <code>props</code> and <code>state</code> (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p><strong>One limitation</strong>: React components can only render a single root node. If you want to return multiple nodes they <em>must</em> be wrapped in a single root.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>JSX Syntax</h2>
|
||||
|
||||
<p>We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.</p>
|
||||
|
||||
<p>We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, <strong>optional</strong> HTML-like syntax for the function calls that generate markup called JSX.</p>
|
||||
|
||||
<p><strong>JSX lets you write JavaScript function calls with HTML syntax.</strong> To generate a link in React using pure JavaScript you'd write: <code>React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')</code>. With JSX this becomes <code><a href="http://facebook.github.io/react/">Hello React!</a></code>. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so <strong>JSX is not required to use React.</strong></p>
|
||||
|
||||
<p>JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see <a href="./jsx-in-depth.html">JSX in depth</a>. Or see the transform in action in <a href="/react/jsx-compiler.html">our live JSX compiler</a>.</p>
|
||||
|
||||
<p>JSX is similar to HTML, but not exactly the same. See <a href="./jsx-gotchas.html">JSX gotchas</a> for some key differences.</p>
|
||||
|
||||
<p>The easiest way to get started with JSX is to use the in-browser <code>JSXTransformer</code>. We strongly recommend that you don't use this in production. You can precompile your code using our command-line <a href="http://npmjs.org/package/react-tools">react-tools</a> package.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/why-react.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/jsx-in-depth.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/displaying-data.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,330 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Event Handling</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Event Handling" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/event-handling.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html" class="active">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Event Handling</h1>
|
||||
<div class="subHeader">How do events work with React components?</div>
|
||||
<p>Events in React work the way they do with HTML, except the event names are
|
||||
camelCased.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="s1">'You clicked me!'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>When <code><Clicker></code> is clicked, the <code>handleClick()</code> function will get fired. Under
|
||||
the hood, React uses top-level event delegation to achieve high performance.</p>
|
||||
|
||||
<h2>Automatically Binding Callbacks</h2>
|
||||
|
||||
<p>Just like any callback in JavaScript, if you want to refer to the component as
|
||||
<code>this</code> from the callback, you need to bind the callback to the component:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">handleClick</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
|
||||
</span> <span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ALERT_MESSAGE</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">ALERT_MESSAGE</span><span class="o">:</span> <span class="s1">'You clicked me!'</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>React provides a convenient and <em>efficient</em> way to bind methods using
|
||||
<code>React.autoBind()</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
</span> <span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">ALERT_MESSAGE</span><span class="p">);</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span> <span class="nx">ALERT_MESSAGE</span><span class="o">:</span> <span class="s1">'You clicked me!'</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>Binding a function allocates memory to create a new bound function. Since
|
||||
<code>render()</code> may be invoked many times, it is a bad place to bind functions.
|
||||
<code>React.autoBind()</code> sidesteps this issue by only binding once at instantiation
|
||||
time.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>DOM Events</h2>
|
||||
|
||||
<p>React uses <a href="http://davidwalsh.name/event-delegate">top-level event delegation</a>
|
||||
to achieve high performance when implementing DOM events. For each type of DOM
|
||||
event, React adds a single top-level listener and determines which event
|
||||
handlers to execute by simulating event capturing and bubbling.</p>
|
||||
|
||||
<p>DOM event handlers are called with a normalized <code>AbstractEvent</code> object that has
|
||||
cross-browser compatible implementations of <code>stopPropagation</code> and
|
||||
<code>preventDefault()</code>. If you need access to the raw browser event, you can use the
|
||||
<code>nativeEvent</code> property.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>AbstractEvent</code> object is JSON serializable so that React applications can
|
||||
be executed inside web workers.</p>
|
||||
</blockquote>
|
||||
|
||||
<h3>Touch Events</h3>
|
||||
|
||||
<p>If you want to use touch events, you must configure React's event system to
|
||||
initialize them:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Invoke before calling `React.renderComponent()`.</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">initializeTouchEvents</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Custom Events</h2>
|
||||
|
||||
<p>Notice that event listeners are attached by simply passing them into components
|
||||
as props. For DOM components, events are handled using top-level event
|
||||
delegation. For composite components, event handling is up to the component's
|
||||
implementation.</p>
|
||||
|
||||
<p>Here is an example of a toggle link that fires a custom <code>onToggle</code> event:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ToggleLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">isEnabled</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Toggle</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">willEnable</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">isEnabled</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onToggle</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onToggle</span><span class="p">(</span><span class="nx">willEnable</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isEnabled</span><span class="o">:</span> <span class="nx">willEnable</span><span class="p">});</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">handleToggle</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">enabled</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">alert</span><span class="p">(</span><span class="nx">enabled</span> <span class="o">?</span> <span class="s1">'Enabled.'</span> <span class="o">:</span> <span class="s1">'Disabled.'</span><span class="p">);</span>
|
||||
<span class="p">};</span>
|
||||
<span class="kd">var</span> <span class="nx">myToggleLink</span> <span class="o">=</span> <span class="o"><</span><span class="nx">ToggleLink</span> <span class="nx">onToggle</span><span class="o">=</span><span class="p">{</span><span class="nx">handleToggle</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</code></pre></div>
|
||||
<h3>Common Patterns</h3>
|
||||
|
||||
<p>With React your event handlers should be quite small. Large event handlers may
|
||||
be symptomatic of code that should be moved into helpers or into <code>render()</code>.
|
||||
Here are some common usage patterns for event handlers.</p>
|
||||
|
||||
<h4>Updating State</h4>
|
||||
|
||||
<p>The most common thing to do in response to a user action is to call
|
||||
<code>this.setState()</code> to update the component's state, which will in turn trigger
|
||||
an update to the rendered component.</p>
|
||||
|
||||
<h4>Server Requests</h4>
|
||||
|
||||
<p>Many event handlers will issue a server request to read or write some data in
|
||||
response to an event. The response handler for the request will often call
|
||||
<code>this.setState()</code>.</p>
|
||||
|
||||
<h4>Invoke a Callback</h4>
|
||||
|
||||
<p>Your component will often be a small, reusable building block that does not know
|
||||
how to respond to a user action. In these situations, we delegate the
|
||||
responsibility to the owner by exposing a handler on <code>this.props</code>. This is what
|
||||
the <code>ToggleLink</code> example above is doing.</p>
|
||||
|
||||
<h4>Inter-component Communication</h4>
|
||||
|
||||
<p>A common scenario involves communicating to <strong>Component A</strong> that a user action
|
||||
has occurred on <strong>Component B</strong>. To solve this problem, a common parent to
|
||||
both components should listen for the event on <strong>Component B</strong>, update its
|
||||
internal state, and pass that data into <strong>Component A</strong>.</p>
|
||||
|
||||
<p>For example, say we have two components: <strong>Clicker</strong>, a component that fires an
|
||||
<code>onCountChange</code> custom event, and <strong>ClickCountLabel</strong>, a component that displays
|
||||
the number of clicks that have happened:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Clicker</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">span</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span><span class="nx">Click</span> <span class="nx">me</span><span class="o">!<</span><span class="err">/span>;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onCountChange</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onCountChange</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ClickCountLabel</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">p</span><span class="o">></span><span class="nx">You</span> <span class="nx">have</span> <span class="nx">clicked</span> <span class="o"><</span><span class="nx">strong</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">count</span><span class="p">}</span><span class="o"><</span><span class="err">/strong> times.</p>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ClickApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Clicker</span> <span class="nx">onCountChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleCountChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">ClickCountLabel</span> <span class="nx">count</span><span class="o">=</span><span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCountChange</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="c1">// Somehow update `count`.</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In order to communicate the click count from <code>Clicker</code> to <code>ClickCountLabel</code>, we
|
||||
modify <code>ClickApp</code> to maintain state that will be passed into <code>ClickCountLabel</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ClickApp</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="p">{</span><span class="nx">count</span><span class="o">:</span> <span class="mi">0</span><span class="p">};</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">count</span><span class="p">;</span>
|
||||
</span> <span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">Clicker</span> <span class="nx">onCountChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleCountChange</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">ClickCountLabel</span> <span class="nx">count</span><span class="o">=</span><span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCountChange</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">count</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span> <span class="nx">count</span><span class="p">});</span>
|
||||
</span> <span class="p">})</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Now when <code>Clicker</code> fires the <code>onCountChange</code> event, the <code>ClickCountLabel</code> will
|
||||
get updated!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/component-lifecycle.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/advanced-components.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/event-handling.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+315
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Forms</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Forms" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/forms.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/forms.html" class="active">
|
||||
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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Forms</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Form components such as <code><input></code>, <code><textarea></code>, and <code><option></code> differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.</p>
|
||||
|
||||
<h2>Interactive Props</h2>
|
||||
|
||||
<p>Form components support a few props that are affected via user interactions:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>value</code>, supported by <code><input></code> and <code><textarea></code> components.</li>
|
||||
<li><code>checked</code>, supported by <code><input></code> components of type <code>checkbox</code> or <code>radio</code>.</li>
|
||||
<li><code>selected</code>, supported by <code><option></code> components.</li>
|
||||
</ul>
|
||||
|
||||
<p>In HTML, the value of <code><textarea></code> is set via children. In React, you should use <code>value</code> instead.</p>
|
||||
|
||||
<p>Form components allow listening for changes by setting a callback to the <code>onChange</code> prop. The <code>onChange</code> prop works across browsers to fire in response to user interactions when:</p>
|
||||
|
||||
<ul>
|
||||
<li>The <code>value</code> of <code><input></code> or <code><textarea></code> changes.</li>
|
||||
<li>The <code>checked</code> state of <code><input></code> changes.</li>
|
||||
<li>The <code>selected</code> state of <code><option></code> changes.</li>
|
||||
</ul>
|
||||
|
||||
<p>Like all DOM events, the <code>onChange</code> prop is supported on all native components and can be used to listen to bubbled change events.</p>
|
||||
|
||||
<h2>Controlled Components</h2>
|
||||
|
||||
<p>An <code><input></code> with <code>value</code> set is a <em>controlled</em> component. In a controlled <code><input></code>, the value of the rendered element will always reflect the <code>value</code> prop. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This will render an input that always has a value of <code>Hello!</code>. Any user input will have no effect on the rendered element because React has declared the value to be <code>Hello!</code>. If you wanted to update the value in response to user input, you could use the <code>onChange</code> event:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
|
||||
<span class="k">return</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="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">value</span><span class="p">}</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, we are simply accepting the newest value provided by the user and updating the <code>value</code> prop of the <code><input></code> component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">value</span><span class="o">:</span> <span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">140</span><span class="p">)});</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This would accept user input but truncate the value to the first 140 characters.</p>
|
||||
|
||||
<h2>Uncontrolled Components</h2>
|
||||
|
||||
<p>An <code><input></code> that does not supply a <code>value</code> (or sets it to <code>null</code>) is an <em>uncontrolled</em> component. In an uncontrolled <code><input></code>, the value of the rendered element will reflect the user's input. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the <code>onChange</code> event just like you can with controlled components.</p>
|
||||
|
||||
<p>If you want to initialize the component with a non-empty value, you can supply a <code>defaultValue</code> prop. For example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">"text"</span> <span class="nx">defaultValue</span><span class="o">=</span><span class="s2">"Hello!"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>This example will function much like the <strong>Controlled Components</strong> example above.</p>
|
||||
|
||||
<p>Likewise, <code><input></code> supports <code>defaultChecked</code> and <code><option></code> supports <code>defaultSelected</code>.</p>
|
||||
|
||||
<h2>Advanced Topics</h2>
|
||||
|
||||
<h3>Why Controlled Components?</h3>
|
||||
|
||||
<p>Using form components such as <code><input></code> in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"title"</span> <span class="na">value=</span><span class="s">"Untitled"</span> <span class="nt">/></span>
|
||||
</code></pre></div>
|
||||
<p>This renders an input <em>initialized</em> with the value, <code>Untitled</code>. When the user updates the input, the node's value <em>property</em> will change. However, <code>node.getAttribute('value')</code> will still return the value used at initialization time, <code>Untitled</code>.</p>
|
||||
|
||||
<p>Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">input</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">"title"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"Untitled"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Since this method describes the view at any point in time, the value of the text input should <em>always</em> be <code>Untitled</code>.</p>
|
||||
|
||||
<h3>Why Textarea Value?</h3>
|
||||
|
||||
<p>In HTML, the value of <code><textarea></code> is usually set using its children:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"> <span class="c"><!-- counterexample: DO NOT DO THIS! --></span>
|
||||
<span class="nt"><textarea</span> <span class="na">name=</span><span class="s">"description"</span><span class="nt">></span>This is the description.<span class="nt"></textarea></span>
|
||||
</code></pre></div>
|
||||
<p>For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use <code>\n</code> if we want newlines. In a world where we have <code>value</code> and <code>defaultValue</code>, it is ambiguous what role children play. For this reason, you should not use children when setting <code><textarea></code> values:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="o"><</span><span class="nx">textarea</span> <span class="nx">name</span><span class="o">=</span><span class="s2">"description"</span> <span class="nx">value</span><span class="o">=</span><span class="s2">"This is a description."</span> <span class="o">/></span>
|
||||
</code></pre></div>
|
||||
<p>If you <em>do</em> decide to use children, they will behave like <code>defaultValue</code>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/reusable-components.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/working-with-the-browser.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/forms.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+120
-31
@@ -53,35 +53,124 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html" class="active">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Quick Start</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/getting-started.html" class="active">
|
||||
Getting Started
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tutorial.html">
|
||||
Tutorial
|
||||
</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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -102,8 +191,8 @@
|
||||
<p>Download the starter kit to get started.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.3.3.zip" class="button">
|
||||
Download Starter Kit 0.3.3
|
||||
<a href="/react/downloads/react-0.4.0.zip" class="button">
|
||||
Download Starter Kit 0.4.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,293 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Interactivity and Dynamic UIs</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Interactivity and Dynamic UIs" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-gotchas.html">
|
||||
JSX Gotchas
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/interactivity-and-dynamic-uis.html" class="active">
|
||||
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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Interactivity and Dynamic UIs</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>You've already <a href="./displaying-data.html">learned how to display data</a> with React. Now let's look at how to make our UIs interactive.</p>
|
||||
|
||||
<h2>A Simple Example</h2>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">LikeButton</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">liked</span><span class="o">:</span> <span class="kc">false</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">liked</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">liked</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">liked</span> <span class="o">?</span> <span class="s1">'like'</span> <span class="o">:</span> <span class="s1">'unlike'</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">p</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">You</span> <span class="p">{</span><span class="nx">text</span><span class="p">}</span> <span class="k">this</span><span class="p">.</span> <span class="nx">Click</span> <span class="nx">to</span> <span class="nx">toggle</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/p></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">LikeButton</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Event Handling and Synthetic Events</h2>
|
||||
|
||||
<p>With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with <a href="http://www.w3.org/TR/DOM-Level-3-Events/">the W3C spec</a>, regardless of which browser you're using.</p>
|
||||
|
||||
<p>If you'd like to use React on a touch device (i.e. a phone or tablet), simply call <code>React.initializeTouchEvents(true);</code> to turn them on.</p>
|
||||
|
||||
<h2>Under the Hood: autoBind and Event Delegation</h2>
|
||||
|
||||
<p>Under the hood React does a few things to keep your code performant and easy to understand.</p>
|
||||
|
||||
<p><strong>Autobinding:</strong> When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of <code>this</code> is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!</p>
|
||||
|
||||
<p><strong>Event delegation:</strong> React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see <a href="http://davidwalsh.name/event-delegate">David Walsh's excellent blog post</a>.</p>
|
||||
|
||||
<h2>Components are Just State Machines</h2>
|
||||
|
||||
<p>React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.</p>
|
||||
|
||||
<p>In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.</p>
|
||||
|
||||
<h2>How State Works</h2>
|
||||
|
||||
<p>A common way to inform React of a data change is by calling <code>setState(data, callback)</code>. This method merges <code>data</code> into <code>this.state</code> and re-renders the component. When the component finishes re-rendering, the optional <code>callback</code> is called. Most of the time you'll never need to provide a <code>callback</code> since React will take care of keeping your UI up-to-date for you.</p>
|
||||
|
||||
<h2>What Components Should Have State?</h2>
|
||||
|
||||
<p>Most of your components should simply take some data from <code>props</code> and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.</p>
|
||||
|
||||
<p><strong>Try to keep as many of your components as possible stateless.</strong> By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.</p>
|
||||
|
||||
<p>A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via <code>props</code>. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.</p>
|
||||
|
||||
<h2>What <em>Should</em> Go in State?</h2>
|
||||
|
||||
<p><strong>State should contain data that a component's event handlers may change to trigger a UI update.</strong> In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in <code>this.state</code>. Inside of <code>render()</code> simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.</p>
|
||||
|
||||
<h2>What <em>Shouldn't</em> Go in State?</h2>
|
||||
|
||||
<p><code>this.state</code> should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Computed data:</strong> Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within <code>render()</code>. For example, if you have an array of list items in state and you want to render the count as a string, simply render <code>this.state.listItems.length + ' list items'</code> in your <code>render()</code> method rather than storing it on state.</li>
|
||||
<li><strong>React components:</strong> Build them in <code>render()</code> based on underlying props and state.</li>
|
||||
<li><strong>Duplicated data from props:</strong> Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/jsx-gotchas.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/multiple-components.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,11 +3,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | JSX is not HTML</title>
|
||||
<title>React | JSX Gotchas</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | JSX is not HTML" />
|
||||
<meta property="og:title" content="React | JSX Gotchas" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/jsx-is-not-html.html" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/jsx-gotchas.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
@@ -53,44 +53,133 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html" class="active">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</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-gotchas.html" class="active">
|
||||
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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>JSX is not HTML</h1>
|
||||
<div class="subHeader">Differences between JSX and HTML.</div>
|
||||
<h1>JSX Gotchas</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>JSX looks like HTML but there are some important differences you may run into.</p>
|
||||
|
||||
<h2>Whitespace removal</h2>
|
||||
<h2>Whitespace Removal</h2>
|
||||
|
||||
<p>JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add <code>{' '}</code>.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span> <span class="p">{</span><span class="s1">' '</span><span class="p">}</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">surname</span><span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
@@ -119,22 +208,6 @@
|
||||
<p>As a last resort, you always have the ability to insert raw HTML.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">div</span> <span class="nx">dangerouslySetInnerHTML</span><span class="o">=</span><span class="p">{{</span><span class="nx">__html</span><span class="o">:</span> <span class="s1">'First &middot; Second'</span><span class="p">}}</span> <span class="o">/></span>
|
||||
</code></pre></div>
|
||||
<h2>Comments</h2>
|
||||
|
||||
<p>JSX supports both single-line and multi-line JavaScript comments within a tag declaration:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">div</span> <span class="c1">// This is a single-line comment:</span>
|
||||
<span class="cm">/*</span>
|
||||
<span class="cm"> And a multi-line</span>
|
||||
<span class="cm"> comment</span>
|
||||
<span class="cm"> */</span>
|
||||
<span class="o">/></span>
|
||||
</code></pre></div>
|
||||
<p>As of React 0.3, there is no good way to insert comments within the children section. <a href="https://github.com/facebook/react/issues/82">Issue #82</a> is tracking progress to enable the following:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Note: This is not implemented yet!</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="cm">/* This is a comment */</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div>
|
||||
<h2>Custom HTML Attributes</h2>
|
||||
|
||||
<p>If you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them. If you want to use a custom attribute, you should prefix it with <code>data-</code>.</p>
|
||||
@@ -146,12 +219,14 @@
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/api.html">← Prev</a>
|
||||
<a class="docs-prev" href="/react/docs/jsx-in-depth.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/interactivity-and-dynamic-uis.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/jsx-is-not-html.html"></div>
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/jsx-gotchas.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | JSX Syntax</title>
|
||||
<title>React | JSX in Depth</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | JSX Syntax" />
|
||||
<meta property="og:title" content="React | JSX in Depth" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/syntax.html" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/jsx-in-depth.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
@@ -53,48 +53,135 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html" class="active">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</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" class="active">
|
||||
JSX in Depth
|
||||
</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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>JSX Syntax</h1>
|
||||
<div class="subHeader">Writing JavaScript with XML syntax.</div>
|
||||
<p>JSX is a JavaScript XML syntax transform recommended (but not required) for use
|
||||
<h1>JSX in Depth</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>JSX is a JavaScript XML syntax transform recommended for use
|
||||
with React.</p>
|
||||
|
||||
<h2>Why JSX?</h2>
|
||||
|
||||
<p>First of all, <strong>don't use JSX if you don't like it!</strong></p>
|
||||
|
||||
<p>React works out of the box without JSX. Simply construct your markup using the
|
||||
functions on <code>React.DOM</code>. For example, here's how to construct a simple link:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">a</span><span class="p">({</span><span class="nx">href</span><span class="o">:</span> <span class="s1">'http://facebook.github.io/react'</span><span class="p">},</span> <span class="s1">'React'</span><span class="p">);</span>
|
||||
@@ -109,13 +196,13 @@ functions on <code>React.DOM</code>. For example, here's how to construct a
|
||||
|
||||
<h2>The Transform</h2>
|
||||
|
||||
<p>JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
|
||||
attributes into function calls and objects, respectively.</p>
|
||||
<p>JSX transforms from an XML-like syntax into native JavaScript. XML elements and
|
||||
attributes are transformed into function calls and objects, respectively.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Nav</span><span class="p">;</span>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">"blue"</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">'blue'</span><span class="p">},</span> <span class="kc">null</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s2">"blue"</span><span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Notice that in order to use <code><Nav /></code>, the <code>Nav</code> variable must be in scope.</p>
|
||||
|
||||
@@ -124,7 +211,7 @@ attributes into function calls and objects, respectively.</p>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span> <span class="nx">color</span><span class="o">=</span><span class="s2">"blue"</span><span class="o">><</span><span class="nx">Profile</span><span class="o">></span><span class="nx">click</span><span class="o"><</span><span class="err">/Profile></Nav>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s1">'blue'</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">({</span><span class="nx">color</span><span class="o">:</span><span class="s2">"blue"</span><span class="p">},</span> <span class="nx">Profile</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s2">"click"</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<p>Use the <a href="/react/jsx-compiler.html">JSX Compiler</a> to try out JSX and see how it
|
||||
desugars into native JavaScript.</p>
|
||||
@@ -150,13 +237,13 @@ React in mind. The two valid uses of JSX are:</p>
|
||||
<code>React.createClass()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>React DOM Components</strong></p>
|
||||
<h3>React DOM Components</h3>
|
||||
|
||||
<p>To construct a <code><div></code> is to create a variable that refers to <code>React.DOM.div</code>.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">div</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="o"><</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"appClass"</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">React</span><span class="o">!<</span><span class="err">/div>;</span>
|
||||
</code></pre></div>
|
||||
<p><strong>React Component Components</strong></p>
|
||||
<h3>React Component Components</h3>
|
||||
|
||||
<p>To construct an instance of a composite component, create a variable that
|
||||
references the class.</p>
|
||||
@@ -186,7 +273,7 @@ will use that field to find DOM components.</p>
|
||||
<span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Nav</span><span class="o">><</span><span class="nx">span</span> <span class="o">/><</span><span class="err">/Nav>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">span</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">tree</span> <span class="o">=</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">span</span><span class="p">(</span><span class="kc">null</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Remember:</p>
|
||||
@@ -198,7 +285,7 @@ used elements. In general, JSX has no notion of the DOM.</p>
|
||||
|
||||
<h2>JavaScript Expressions</h2>
|
||||
|
||||
<h4>Attribute Expressions</h4>
|
||||
<h3>Attribute Expressions</h3>
|
||||
|
||||
<p>To use a JavaScript expression as an attribute value, wrap the expression in a
|
||||
pair of curly braces (<code>{}</code>) instead of quotes (<code>""</code>).</p>
|
||||
@@ -207,13 +294,18 @@ pair of curly braces (<code>{}</code>) instead of quotes (<code>""</co
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">Person</span><span class="p">({</span><span class="nx">name</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">name</span> <span class="o">:</span> <span class="s1">''</span><span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>Child Expressions</h4>
|
||||
<h3>Child Expressions</h3>
|
||||
|
||||
<p>Likewise, JavaScript expressions may be used to express children:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// Input (JSX):</span>
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Container</span><span class="o">></span><span class="p">{</span><span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="o"><</span><span class="nx">Nav</span> <span class="o">/></span> <span class="o">:</span> <span class="o"><</span><span class="nx">Login</span> <span class="o">/></span><span class="p">}</span><span class="o"><</span><span class="err">/Container>;</span>
|
||||
<span class="c1">// Output (JS):</span>
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">)</span> <span class="o">:</span> <span class="nx">Login</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">Container</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">isLoggedIn</span> <span class="o">?</span> <span class="nx">Nav</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="o">:</span> <span class="nx">Login</span><span class="p">(</span><span class="kc">null</span><span class="p">));</span>
|
||||
</code></pre></div>
|
||||
<h3>Comments</h3>
|
||||
|
||||
<p>It's easy to add comments within your JSX; they're just JS expressions:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="o"><</span><span class="nx">Container</span><span class="o">></span><span class="p">{</span><span class="cm">/* this is a comment */</span><span class="p">}</span><span class="o"><</span><span class="nx">Nav</span> <span class="o">/><</span><span class="err">/Container>;</span>
|
||||
</code></pre></div>
|
||||
<h2>Tooling</h2>
|
||||
|
||||
@@ -238,17 +330,19 @@ efforts include:</p>
|
||||
<li>JSX does not alter or add to the semantics of JavaScript.</li>
|
||||
</ul>
|
||||
|
||||
<p>JSX is similar to HTML, but not exactly the same. See <a href="./jsx-gotchas.html">JSX gotchas</a> for some key differences.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/common-questions.html">← Prev</a>
|
||||
<a class="docs-prev" href="/react/docs/displaying-data.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/component-basics.html">Next →</a>
|
||||
<a class="docs-next" href="/react/docs/jsx-gotchas.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/syntax.html"></div>
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/jsx-in-depth.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,180 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Mixins</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Mixins" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/mixins.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html" class="active">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Mixins</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Mixins allow code to be shared between multiple React components. They are pretty similar to mixins
|
||||
in Python or traits in PHP. Let's look at a simple example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">MyMixin</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">getMessage</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="s1">'hello world'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">MyMixin</span><span class="p">],</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">getMessage</span><span class="p">()}</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however,
|
||||
implement the same <a href="component-lifecycle.html">lifecycle method</a>. In this case, each implementation will be invoked one after another.</p>
|
||||
|
||||
<p>The only exception is the <code>shouldComponentUpdate</code> lifecycle method. This method may only be implemented once
|
||||
(either by a mixin or by the component).</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">Mixin1</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Mixin1.componentDidMount()'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">Mixin2</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'Mixin2.componentDidMount()'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">Mixin1</span><span class="p">,</span> <span class="nx">Mixin2</span><span class="p">],</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="nx">hello</span> <span class="nx">world</span><span class="o"><</span><span class="err">/div>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>When <code>MyComponent</code> is mounted into the page, the following text will print to the console:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">Mixin1.componentDidMount()
|
||||
Mixin2.componentDidMount()
|
||||
</code></pre></div>
|
||||
<h2>When should you use mixins?</h2>
|
||||
|
||||
<p>In general, add a mixin whenever you want a component to share some utility methods, public interface,
|
||||
or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/advanced-components.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/api.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/mixins.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | More About Refs</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | More About Refs" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/more-about-refs.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/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" class="active">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>More About Refs</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent <code>props</code> are sent to each child that is output from <code>render()</code>. However there are a few cases, where it still might be necessary or beneficial.</p>
|
||||
|
||||
<p>Consider the case when you wish to tell an <code><input /></code> element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, <code>''</code>.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleKeyUp</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">userInput</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">clearAndFocusInput</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">});</span> <span class="c1">// Clear the input</span>
|
||||
<span class="c1">// We wish to focus the <input /> now!</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">clearAndFocusInput</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">To</span> <span class="nx">Focus</span> <span class="nx">and</span> <span class="nx">Reset</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">userInput</span><span class="p">}</span>
|
||||
<span class="nx">onKeyUp</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleKeyUp</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Notice how, in this example, we want to "tell" the input something - something that it cannot infer from it's props over time. In this case we want to "tell" it that it should now become focused. However, there are some challenges. What is returned from <code>render()</code>` is not your actual composition of "child" components, it is merely a <em>description</em> of the children at a particular instance in time - a snapshot, if you will.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>Remember, what you return from <code>render()</code> is not your <em>actual</em> rendered children instances. What you return from <code>render()</code> is merely a <em>description</em> of the children instances in your component's sub-hierarchy at a particular moment in time.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>This means that you should never "hold onto" something that you return from <code>render()</code> and then expect it to be anything meaningful.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="c1">// counterexample: DO NOT DO THIS!</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">myInput</span> <span class="o">=</span> <span class="o"><</span><span class="nx">input</span> <span class="o">/></span><span class="p">;</span> <span class="c1">// I'm going to try to call methods on this</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">rememberThisInput</span> <span class="o">=</span> <span class="nx">myInput</span><span class="p">;</span> <span class="c1">// input at some point in the future! YAY!</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">...</span><span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">{</span><span class="nx">myInput</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>In this counterexample, the <code><input /></code> is merely a <em>description</em> of an <code><input /></code>. This description is used to create a <em>real</em> <strong>backing instance</strong> for the <code><input /></code>.</p>
|
||||
|
||||
<p>So how do we talk to the <em>real</em> backing instance of the input?</p>
|
||||
|
||||
<h2>The ref Attribute</h2>
|
||||
|
||||
<p>React supports a very special property that you can attach to any component that is output from <code>render()</code>. This special property allows you to refer to the corresponding <strong>backing instance</strong> of anything returned from <code>render()</code>. It is always guaranteed to be the proper instance, at any point in time.</p>
|
||||
|
||||
<p>It's as simple as:</p>
|
||||
|
||||
<p><strong>1.</strong> Assign a <code>ref</code> attribute to anything returned from <code>render</code> such as:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"> <span class="nt"><input</span> <span class="na">ref=</span><span class="s">"myInput"</span> <span class="nt">/></span>
|
||||
</code></pre></div>
|
||||
<p><strong>2.</strong> In some other code (typically event handler code), access the <strong>backing instance</strong> via <code>this.refs</code> as in:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myInput</span>
|
||||
</code></pre></div>
|
||||
<h2>Completing the Example</h2>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">App</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleKeyUp</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">userInput</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">clearAndFocusInput</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">userInput</span><span class="o">:</span> <span class="s1">''</span><span class="p">});</span> <span class="c1">// Clear the input</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">theInput</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">focus</span><span class="p">();</span> <span class="c1">// Boom! Focused!</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">clearAndFocusInput</span><span class="p">}</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">To</span> <span class="nx">Focus</span> <span class="nx">and</span> <span class="nx">Reset</span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">ref</span><span class="o">=</span><span class="s2">"theInput"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">userInput</span><span class="p">}</span>
|
||||
<span class="nx">onKeyUp</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleKeyUp</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>In this example, our render function returns a description of an <code><input /></code> instance. But the true instance is accessed via <code>this.refs.theInput</code>. As long as a child component with <code>ref="theInput"</code> is returned from render, <code>this.refs.theInput</code> will access the the proper instance. This even works on higher level (non-DOM) components such as <code><Typeahead ref="myTypeahead" /></code>.</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
|
||||
<p>Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive <code>props</code> and <code>state</code>. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save <code>ref</code>s for use cases that are inherently non-reactive.</p>
|
||||
|
||||
<h3>Benefits:</h3>
|
||||
|
||||
<ul>
|
||||
<li>You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as <code>this.refs.myTypeahead.reset()</code>).</li>
|
||||
<li>Performing DOM measurements almost always requires reaching out to a "native" component such as <code><input /></code> and accessing its underlying DOM node via <code>this.refs.myInput.getDOMNode()</code>. Refs are one of the only practical ways of doing this reliably.</li>
|
||||
<li>Refs are automatically book-kept for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).</li>
|
||||
</ul>
|
||||
|
||||
<h3>Cautions:</h3>
|
||||
|
||||
<ul>
|
||||
<li><em>Never</em> access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.</li>
|
||||
<li>If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using <code>this.refs['myRefString']</code> if your ref was defined as <code>ref="myRefString"</code>.</li>
|
||||
<li>If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where <code>state</code> should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use <code>ref</code>s to "make things happen" - instead, the data flow will usually accomplish your goal.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/working-with-the-browser.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/tooling-integration.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/more-about-refs.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,341 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Multiple Components</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Multiple Components" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/multiple-components.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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" class="active">
|
||||
Multiple Components
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reusable-components.html">
|
||||
Reusable Components
|
||||
</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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Multiple Components</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.</p>
|
||||
|
||||
<h2>Motivation: Separation of Concerns</h2>
|
||||
|
||||
<p>By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can <em>separate the different concerns</em> of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.</p>
|
||||
|
||||
<h2>Composition Example</h2>
|
||||
|
||||
<p>Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">Avatar</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">ProfilePic</span> <span class="nx">username</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">ProfileLink</span> <span class="nx">username</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ProfilePic</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="p">{</span><span class="s1">'http://graph.facebook.com/'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</span> <span class="o">+</span> <span class="s1">'/picture'</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">ProfileLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="p">{</span><span class="s1">'http://www.facebook.com/'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">username</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">props</span><span class="p">.</span><span class="nx">username</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/a></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Avatar</span> <span class="nx">username</span><span class="o">=</span><span class="s2">"pwh"</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Ownership</h2>
|
||||
|
||||
<p>In the above example, instances of <code>Avatar</code> <em>own</em> instances of <code>ProfilePic</code> and <code>ProfileLink</code>. In React, <strong>an owner is the component that sets the <code>props</code> of other components</strong>. More formally, if a component <code>X</code> is created in component <code>Y</code>'s <code>render()</code> method, it is said that <code>X</code> is <em>owned by</em> <code>Y</code>. As discussed earlier, a component cannot mutate its <code>props</code> — they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.</p>
|
||||
|
||||
<p>It's important to draw a distinciton between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, <code>Avatar</code> owns the <code>div</code>, <code>ProfilePic</code> and <code>ProfileLink</code> instances, and <code>div</code> is the <strong>parent</strong> (but not owner) of the <code>ProfilePic</code> and <code>ProfileLink</code> instances.</p>
|
||||
|
||||
<h2>Children</h2>
|
||||
|
||||
<p>When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">Parent</span><span class="o">><</span><span class="nx">Child</span> <span class="o">/><</span><span class="err">/Parent></span>
|
||||
</code></pre></div>
|
||||
<p><code>Parent</code> can read its children by accessing the special <code>this.props.children</code> prop.</p>
|
||||
|
||||
<h3>Child Reconciliation</h3>
|
||||
|
||||
<p><strong>Reconciliation is the process by which React updates the DOM with each new render pass.</strong> In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html">// Render Pass 1
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
// Render Pass 2
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
</code></pre></div>
|
||||
<p>Intuitively, <code><p>Paragraph 1</p></code> was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the <em>order</em> of the children.</p>
|
||||
|
||||
<h3>Stateful Children</h3>
|
||||
|
||||
<p>For most components, this is not a big deal. However, for stateful components that maintain data in <code>this.state</code> across render passes, this can be very problematic.</p>
|
||||
|
||||
<p>In most cases, this can be sidestepped by hiding elements instead of destroying them:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html">// Render Pass 1
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
// Render Pass 2
|
||||
<span class="nt"><Card></span>
|
||||
<span class="nt"><p</span> <span class="na">style=</span><span class="s">{{display:</span> <span class="err">'</span><span class="na">none</span><span class="err">'}}</span><span class="nt">></span>Paragraph 1<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Paragraph 2<span class="nt"></p></span>
|
||||
<span class="nt"></Card></span>
|
||||
</code></pre></div>
|
||||
<h3>Dynamic Children</h3>
|
||||
|
||||
<p>The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a <code>key</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">results</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">ol</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">results</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="o">></span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o"><</span><span class="err">/li>;</span>
|
||||
<span class="p">})}</span>
|
||||
<span class="o"><</span><span class="err">/ol></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>When React reconciles the keyed children, it will ensure that any child with <code>key</code> will be reordered (instead of clobbered) or destroyed (instead of reused).</p>
|
||||
|
||||
<h2>Data Flow</h2>
|
||||
|
||||
<p>In React, data flows from owner to owned component through <code>props</code> as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its <code>props</code> or <code>state</code>. Since this process happens recursively, data changes are automatically reflected everywhere they are used.</p>
|
||||
|
||||
<h2>A Note on Performance</h2>
|
||||
|
||||
<p>You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and <code>render()</code> methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.</p>
|
||||
|
||||
<p>However, sometimes you really want to have fine-grained control over your performance. In that case, simply override <code>shouldComponentUpdate()</code> to return false when you want React to skip processing of a subtree. See <a href="./reference.html">the React reference docs</a> for more information.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If <code>shouldComponentUpdate()</code> returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/interactivity-and-dynamic-uis.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/reusable-components.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/multiple-components.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,11 +3,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | React API</title>
|
||||
<title>React | Reference</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | React API" />
|
||||
<meta property="og:title" content="React | Reference" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/api.html" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/reference.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
@@ -53,42 +53,153 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</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/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html" class="active">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html" class="active">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React API</h1>
|
||||
<h1>Reference</h1>
|
||||
<div class="subHeader"></div>
|
||||
<h2>React</h2>
|
||||
<h2>Examples</h2>
|
||||
|
||||
<h3>Production Apps</h3>
|
||||
|
||||
<ul>
|
||||
<li>All of <a href="http://instagram.com/">Instagram.com</a> is built on React.</li>
|
||||
<li>Many components on <a href="http://www.facebook.com/">Facebook.com</a>, including the commenting interface, ads creation flows, and page insights.</li>
|
||||
<li><a href="http://khanacademy.org/">Khan Academy</a> is using React for its question editor.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Sample Code</h3>
|
||||
|
||||
<ul>
|
||||
<li>We've included <a href="./tutorial.html">a step-by-step comment box tutorial</a>.</li>
|
||||
<li><a href="/react/downloads.html">The React starter kit</a> includes several examples which you can <a href="https://github.com/facebook/react/tree/master/examples/">view online in our GitHub repository</a>.</li>
|
||||
<li><a href="https://github.com/jordwalke/reactapp">reactapp</a> is a simple app template to get you up-and-running quickly with React.</li>
|
||||
<li><a href="https://github.com/petehunt/react-one-hour-email/commits/master">React one-hour email</a> goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)</li>
|
||||
<li><a href="https://github.com/petehunt/rendr-react-template/">Rendr + React app template</a> demonstrates how to use React's server rendering capabilities.</li>
|
||||
</ul>
|
||||
|
||||
<h2>API</h2>
|
||||
|
||||
<h3>React</h3>
|
||||
|
||||
<p><code>React</code> is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can <code>require()</code> it.</p>
|
||||
|
||||
@@ -101,41 +212,35 @@
|
||||
</code></pre></div>
|
||||
<p>Configure React's event system to handle touch events on mobile devices.</p>
|
||||
|
||||
<h4>React.autoBind</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span> <span class="nx">method</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Marks the provided function to be automatically bound to each React component instance created. This allows React components to define automatically bound methods and ensure that when called they will always reference their current instance.</p>
|
||||
|
||||
<p>Example:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">click</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">jumping</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Look: no bind!</span>
|
||||
<span class="k">return</span> <span class="o"><</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">click</span><span class="p">}</span><span class="o">></span><span class="nx">Jump</span><span class="o"><</span><span class="err">/a>;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>React.createClass</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">createClass</span><span class="p">(</span><span class="nx">object</span> <span class="nx">specification</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Creates a component given a specification. A component implements a <code>render</code> method which returns <strong>one single</strong> child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.</p>
|
||||
|
||||
<h4>React.renderComponent</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">container</span><span class="p">,</span> <span class="nx">DOMElement</span> <span class="nx">mountPoint</span><span class="p">)</span>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">ReactComponent</span> <span class="nx">renderComponent</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">container</span><span class="p">,</span> <span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Renders a React component into the DOM in the supplied <code>container</code>.</p>
|
||||
|
||||
<p>If the React component was previously rendered into <code>container</code>, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.</p>
|
||||
|
||||
<h2>AbstractEvent</h2>
|
||||
<h4>React.unmountAndReleaseReactRootNode</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">unmountAndReleaseReactRootNode</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">container</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Remove a mounted React component from the DOM and clean up its event handlers and state.</p>
|
||||
|
||||
<h4>React.renderComponentToString</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">renderComponentToString</span><span class="p">(</span><span class="nx">ReactComponent</span> <span class="nx">component</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>Render a component to its initial HTML. This should only be used on the server. React will call <code>callback</code> with an HTML string when the markup is ready. You can use this method to create static site generators, or you can generate HTML on the server and send it down to have a very fast initial page load. If you call <code>React.renderComponent()</code> on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.</p>
|
||||
|
||||
<h3>AbstractEvent</h3>
|
||||
|
||||
<p>Your event handlers will be passed instances of <code>AbstractEvent</code>, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event (such as <code>stopPropagation()</code> and <code>preventDefault()</code>) except they work exactly the same across all browsers.</p>
|
||||
|
||||
<p>If you find that you need the underlying browser event for some reason, simply use the <code>nativeEvent</code> attribute to get it.</p>
|
||||
|
||||
<h2>ReactComponent</h2>
|
||||
<h3>ReactComponent</h3>
|
||||
|
||||
<p>Component classses created by <code>createClass()</code> return instances of <code>ReactComponent</code> when called. Most of the time when you're using React you're either creating or consuming <code>ReactComponent</code>s.</p>
|
||||
|
||||
@@ -149,7 +254,11 @@
|
||||
</code></pre></div>
|
||||
<p>When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with <code>renderComponent()</code>. Simply call <code>setProps()</code> to change its properties and trigger a re-render.</p>
|
||||
|
||||
<p><strong>Note:</strong> This method can only be called on a root-level component. That is, it's only available on the component passed directly to <code>renderComponent()</code> and none of its children. If you're inclined to use <code>setProps()</code> on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in <code>render()</code>.</p>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>This method can only be called on a root-level component. That is, it's only available on the component passed directly to <code>renderComponent()</code> and none of its children. If you're inclined to use <code>setProps()</code> on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in <code>render()</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h4>replaceProps</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">replaceProps</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextProps</span><span class="p">)</span>
|
||||
@@ -162,25 +271,43 @@
|
||||
<p>Transfer properties from this component to a target component that have not already been set on the target component. This is usually used to pass down properties to the returned root component. <code>targetComponent</code>, now updated with some new props is returned as a convenience.</p>
|
||||
|
||||
<h4>setState</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">setState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">setState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
|
||||
</code></pre></div>
|
||||
<p>Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.</p>
|
||||
<p>Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks. In addition, you can supply an optional callback function that is executed once <code>setState</code> is completed.</p>
|
||||
|
||||
<p><strong>Note:</strong> <em>NEVER</em> mutate <code>this.state</code> directly. As calling <code>setState()</code> afterwards may replace the mutation you made. Treat <code>this.state</code> as if it were immutable.</p>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p><strong>Note:</strong> <code>setState()</code> does not immediately mutate <code>this.state</code> but creates a pending state transition. Accessing <code>this.state</code> after calling this method can potentially return the existing value.</p>
|
||||
<p><em>NEVER</em> mutate <code>this.state</code> directly. As calling <code>setState()</code> afterwards may replace the mutation you made. Treat <code>this.state</code> as if it were immutable.</p>
|
||||
|
||||
<p>Note:</p>
|
||||
|
||||
<p><code>setState()</code> does not immediately mutate <code>this.state</code> but creates a pending state transition. Accessing <code>this.state</code> after calling this method can potentially return the existing value.</p>
|
||||
|
||||
<p>Note:</p>
|
||||
|
||||
<p>There is no guarantee of synchronous operation of calls to <code>setState</code> and calls may be batched for performance gains.</p>
|
||||
</blockquote>
|
||||
|
||||
<h4>replaceState</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">replaceState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">)</span>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">replaceState</span><span class="p">(</span><span class="nx">object</span> <span class="nx">nextState</span><span class="p">[,</span> <span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
|
||||
</code></pre></div>
|
||||
<p>Like <code>setState()</code> but deletes any pre-existing state keys that are not in nextState.</p>
|
||||
|
||||
<h4>forceUpdate()</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">forceUpdate</span><span class="p">()</span>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">forceUpdate</span><span class="p">([</span><span class="kd">function</span> <span class="nx">callback</span><span class="p">])</span>
|
||||
</code></pre></div>
|
||||
<p>If your <code>render()</code> method reads from something other than <code>this.props</code> or <code>this.state</code> you'll need to tell React when it needs to re-run <code>render()</code>. Use <code>forceUpdate()</code> to cause React to automatically re-render. This will cause <code>render()</code> to be called on the component and all of its children but React will only update the DOM if the markup changes.</p>
|
||||
|
||||
<p>Normally you should try to avoid all uses of <code>forceUpdate()</code> and only read from <code>this.props</code> and <code>this.state</code> in <code>render()</code>. This makes your application much simpler and more efficient.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>There is no guarantee of synchronous operation of calls to <code>forceUpdate</code> and calls may be batched for performance gains.</p>
|
||||
</blockquote>
|
||||
|
||||
<h4>Lifecycle methods</h4>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">object</span> <span class="nx">getInitialState</span><span class="p">()</span>
|
||||
<span class="nx">componentWillMount</span><span class="p">()</span>
|
||||
<span class="nx">componentDidMount</span><span class="p">(</span><span class="nx">DOMElement</span> <span class="nx">domNode</span><span class="p">)</span>
|
||||
@@ -191,19 +318,29 @@
|
||||
<span class="nx">componentDidUpdate</span><span class="p">(</span><span class="nx">object</span> <span class="nx">prevProps</span><span class="p">,</span> <span class="nx">object</span> <span class="nx">prevState</span><span class="p">,</span> <span class="nx">DOMElement</span> <span class="nx">domNode</span><span class="p">)</span>
|
||||
<span class="nx">componentWillUnmount</span><span class="p">()</span>
|
||||
</code></pre></div>
|
||||
<p>See the <a href="advanced-components.html">advanced components</a> documentation for more details on these lifecycle methods.</p>
|
||||
<p>See the <a href="./working-with-the-browser.html">working with the browser</a> documentation for more details on these lifecycle methods.</p>
|
||||
|
||||
<h2>DOM Differences</h2>
|
||||
|
||||
<p>React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations.</p>
|
||||
|
||||
<ul>
|
||||
<li>All events (including submit) bubble correctly per the W3C spec</li>
|
||||
<li>All event objects conform to the W3C spec</li>
|
||||
<li>All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here, since the spec is inconsistent.</li>
|
||||
<li>The <code>style</code> attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM <code>style</code> JavaScript property, is more efficient, and prevents XSS security holes.</li>
|
||||
<li><code>onChange</code> behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because <code>onChange</code> is a misnomer for its behavior and React relies on this event to react to user input in real time.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/mixins.html">← Prev</a>
|
||||
<a class="docs-prev" href="/react/docs/tooling-integration.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/jsx-is-not-html.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/api.html"></div>
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/reference.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Reusable Components</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Reusable Components" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/reusable-components.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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" class="active">
|
||||
Reusable Components
|
||||
</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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Reusable Components</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.</p>
|
||||
|
||||
<h2>Prop Validation</h2>
|
||||
|
||||
<p>As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify <code>propTypes</code>. <code>React.PropTypes</code> exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, an error will be thrown. Here is an example documenting the different validators provided:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">propTypes</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="c1">// You can declare that a prop is a specific JS primitive. By default, these</span>
|
||||
<span class="c1">// are all optional.</span>
|
||||
<span class="nx">optionalArray</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">array</span><span class="p">,</span>
|
||||
<span class="nx">optionalBool</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">bool</span><span class="p">,</span>
|
||||
<span class="nx">optionalFunc</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span><span class="p">,</span>
|
||||
<span class="nx">optionalNumber</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span>
|
||||
<span class="nx">optionalObject</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">,</span>
|
||||
<span class="nx">optionalString</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// You can ensure that your prop is limited to specific values by treating</span>
|
||||
<span class="c1">// it as an enum.</span>
|
||||
<span class="nx">optionalEnum</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">oneOf</span><span class="p">([</span><span class="s1">'News'</span><span class="p">,</span><span class="s1">'Photos'</span><span class="p">]),</span>
|
||||
|
||||
<span class="c1">// You can also declare that a prop is an instance of a class. This uses</span>
|
||||
<span class="c1">// JS's instanceof operator.</span>
|
||||
<span class="nx">someClass</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">instanceOf</span><span class="p">(</span><span class="nx">SomeClass</span><span class="p">),</span>
|
||||
|
||||
<span class="c1">// You can chain any of the above with isRequired to make sure an error is</span>
|
||||
<span class="c1">// thrown if the prop isn't provide.</span>
|
||||
<span class="nx">requiredFunc</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span><span class="p">.</span><span class="nx">isRequired</span>
|
||||
|
||||
<span class="c1">// You can also specify a custom validator.</span>
|
||||
<span class="nx">customProp</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span> <span class="nx">propName</span><span class="p">,</span> <span class="nx">componentName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="sr">/matchme/</span><span class="p">.</span><span class="nx">test</span><span class="p">(</span><span class="nx">props</span><span class="p">[</span><span class="nx">propName</span><span class="p">]))</span> <span class="p">{</span>
|
||||
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span><span class="s1">'Validation failed!'</span><span class="p">)</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="cm">/* ... */</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Default Prop Values</h2>
|
||||
|
||||
<p>React lets you define default values for your <code>props</code> in a very declarative way:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">ComponentWithDefaultProps</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">getDefaultProps</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">value</span><span class="o">:</span> <span class="s1">'default value'</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="cm">/* ... */</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>The result of <code>getDefaultProps()</code> will be cached and used to ensure that <code>this.props.value</code> will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.</p>
|
||||
|
||||
<h2>Transferring Props: A Shortcut</h2>
|
||||
|
||||
<p>A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides <code>transferPropsTo()</code> to do just this.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">CheckLink</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// transferPropsTo() will take any props pased to CheckLink</span>
|
||||
<span class="c1">// and copy them to <a></span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">transferPropsTo</span><span class="p">(</span><span class="o"><</span><span class="nx">a</span><span class="o">></span><span class="p">{</span><span class="s1">'√ '</span><span class="p">}{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span><span class="o"><</span><span class="err">/a>);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">CheckLink</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"javascript:alert('Hello, world!');"</span><span class="o">></span>
|
||||
<span class="nx">Click</span> <span class="nx">here</span><span class="o">!</span>
|
||||
<span class="o"><</span><span class="err">/CheckLink>,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>Mixins</h2>
|
||||
|
||||
<p>Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called <a href="http://en.wikipedia.org/wiki/Cross-cutting_concern">cross-cutting concerns</a>. React provides <code>mixins</code> to solve this problem.</p>
|
||||
|
||||
<p>One common use case is a component wanting to update itself on a time interval. It's easy to use <code>setInterval()</code>, but it's important to cancel your interval when you don't need it anymore to save memory. React provides <a href="./working-with-the-browser.html">lifecycle methods</a> that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy <code>setInterval()</code> function that will automatically get cleaned up when your component is destroyed.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">SetIntervalMixin</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">componentWillMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">setInterval</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">setInterval</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">));</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">intervals</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">clearInterval</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TickTock</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">SetIntervalMixin</span><span class="p">],</span> <span class="c1">// Use the mixin</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">seconds</span><span class="o">:</span> <span class="mi">0</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tick</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span> <span class="c1">// Call a method on the mixin</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">tick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">seconds</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">seconds</span> <span class="o">+</span> <span class="mi">1</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">p</span><span class="o">></span>
|
||||
<span class="nx">React</span> <span class="nx">has</span> <span class="nx">been</span> <span class="nx">running</span> <span class="k">for</span> <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">seconds</span><span class="p">}</span> <span class="nx">seconds</span><span class="p">.</span>
|
||||
<span class="o"><</span><span class="err">/p></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">TickTock</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/multiple-components.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/forms.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/reusable-components.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Tooling integration</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Tooling integration" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/tooling-integration.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html" class="active">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Tooling integration</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.</p>
|
||||
|
||||
<h2>CDN-hosted React</h2>
|
||||
|
||||
<p>We provide CDN-hosted versions of React <a href="/react/downloads.html">on our download page</a>. These prebuilt files use the UMD module format. Dropping them in with a simple <code><script></code> tag will inject a <code>React</code> global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.</p>
|
||||
|
||||
<h2>Using master</h2>
|
||||
|
||||
<p>We have instructions for building from <code>master</code> <a href="https://github.com/facebook/react">in our GitHub repository</a>. We build a tree of CommonJS modules under <code>build/modules</code> which you can drop into any environment or packaging tool that supports CommonJS.</p>
|
||||
|
||||
<h2>In-browser JSX Transform</h2>
|
||||
|
||||
<p>If you like using JSX, we provide an in-browser JSX transformer for development <a href="/react/downloads.html">on our download page</a>. Simply include a <code><script type="text/jsx"></code> tag to engage the JSX transformer. Be sure to include the <code>/** @jsx React.DOM */</code> comment as well, otherwise the transformer will not run the transforms.</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>
|
||||
|
||||
<h2>Productionizing: Precompiled JSX</h2>
|
||||
|
||||
<p>If you have <a href="http://npmjs.org/">npm</a>, you can simply run <code>npm install -g react-tools</code> to install our command-line <code>jsx</code> tool. 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>jsx --watch src/ build/</code>. Run <code>jsx --help</code> for more information on how to use this tool.</p>
|
||||
|
||||
<h2>Helpful Open-Source Projects</h2>
|
||||
|
||||
<p>The open-source community has built tools that integrate JSX with several build systems.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/andreypopp/reactify">reactify</a> - use JSX with <a href="http://browserify.org/">browserify</a>.</li>
|
||||
<li><a href="https://github.com/ericclemmons/grunt-react">grunt-react</a> - <a href="http://gruntjs.com/">grunt</a> task for JSX</li>
|
||||
<li><a href="https://github.com/seiffert/require-jsx">require-jsx</a> - use JSX with <a href="http://requirejs.org/">require.js</a></li>
|
||||
<li><a href="https://github.com/jordwalke/reactapp">reactapp</a> - a sample project to get up-and-running with React quickly</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/more-about-refs.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/reference.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/tooling-integration.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+149
-66
@@ -53,35 +53,124 @@
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Getting started</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/getting-started.html">Getting Started</a></li>
|
||||
<li><a href="/react/docs/tutorial.html" class="active">Tutorial</a></li>
|
||||
<li><a href="/react/docs/common-questions.html">Common Questions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/syntax.html">JSX Syntax</a></li>
|
||||
<li><a href="/react/docs/component-basics.html">Component Basics</a></li>
|
||||
<li><a href="/react/docs/component-data.html">Component Data</a></li>
|
||||
<li><a href="/react/docs/component-lifecycle.html">Component Lifecycle</a></li>
|
||||
<li><a href="/react/docs/event-handling.html">Event Handling</a></li>
|
||||
<li><a href="/react/docs/advanced-components.html">Advanced Components</a></li>
|
||||
<li><a href="/react/docs/mixins.html">Mixins</a></li>
|
||||
<li><a href="/react/docs/api.html">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Appendix</h3>
|
||||
<ul>
|
||||
<li><a href="/react/docs/jsx-is-not-html.html">JSX is not HTML</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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" class="active">
|
||||
Tutorial
|
||||
</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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -106,19 +195,19 @@
|
||||
<li><strong>Markdown formatting:</strong> users can use Markdown to format their text</li>
|
||||
</ul>
|
||||
|
||||
<h2>Want to skip all this and just see the source?</h2>
|
||||
<h3>Want to skip all this and just see the source?</h3>
|
||||
|
||||
<p><a href="https://github.com/petehunt/react-tutorial">It's all on GitHub.</a></p>
|
||||
|
||||
<h2>Getting started</h2>
|
||||
<h3>Getting started</h3>
|
||||
|
||||
<p>For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c"><!-- template.html --></span>
|
||||
<span class="nt"><html></span>
|
||||
<span class="nt"><head></span>
|
||||
<span class="nt"><title></span>Hello React<span class="nt"></title></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.4.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.4.0.js"</span><span class="nt">></script></span>
|
||||
<span class="nt"></head></span>
|
||||
<span class="nt"><body></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">></div></span>
|
||||
@@ -133,7 +222,7 @@
|
||||
</code></pre></div>
|
||||
<p>For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag.</p>
|
||||
|
||||
<h2>Your first component</h2>
|
||||
<h3>Your first component</h3>
|
||||
|
||||
<p>React is all about modular, composable components. For our comment box example, we'll have the following component structure:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">- CommentBox
|
||||
@@ -157,7 +246,7 @@
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'content'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h3>JSX Syntax</h3>
|
||||
<h4>JSX Syntax</h4>
|
||||
|
||||
<p>The first thing you'll notice is the XML-ish syntax in your JavaScript. We have a simple precompiler that translates the syntactic sugar to this plain JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial1-raw.js</span>
|
||||
@@ -178,7 +267,7 @@
|
||||
</code></pre></div>
|
||||
<p>Its use is optional but we've found JSX syntax easier to use than plain JavaScript. Read more on the <a href="syntax.html">JSX Syntax article</a>.</p>
|
||||
|
||||
<h3>What's going on</h3>
|
||||
<h4>What's going on</h4>
|
||||
|
||||
<p>We pass some methods in a JavaScript object to <code>React.createClass()</code> to create a new React component. The most important of these methods is called <code>render</code> which returns a tree of React components that will eventually render to HTML.</p>
|
||||
|
||||
@@ -188,7 +277,7 @@
|
||||
|
||||
<p><code>React.renderComponent()</code> instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.</p>
|
||||
|
||||
<h1>Composing components</h1>
|
||||
<h2>Composing components</h2>
|
||||
|
||||
<p>Let's build skeletons for <code>CommentList</code> and <code>CommentForm</code> which will, again, be simple <code><div></code>s:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial2.js</span>
|
||||
@@ -228,7 +317,7 @@
|
||||
</code></pre></div>
|
||||
<p>Notice how we're mixing HTML tags and components we've built. HTML components are regular React components, just like the ones you define, with one difference. The JSX compiler will automatically rewrite HTML tags to "React.DOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.</p>
|
||||
|
||||
<h2>Component Properties</h2>
|
||||
<h3>Component Properties</h3>
|
||||
|
||||
<p>Let's create our third component, <code>Comment</code>. We will want to pass it the author name and comment text so we can reuse the same code for each unique comment. First let's add some comments to the <code>CommentList</code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial4.js</span>
|
||||
@@ -245,7 +334,7 @@
|
||||
</code></pre></div>
|
||||
<p>Note that we have passed some data from the parent <code>CommentList</code> component to the child <code>Comment</code> component as both XML-like children and attributes. Data passed from parent to child is called <strong>props</strong>, short for properties.</p>
|
||||
|
||||
<h2>Using props</h2>
|
||||
<h3>Using props</h3>
|
||||
|
||||
<p>Let's create the Comment component. It will read the data passed to it from the CommentList and render some markup:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial5.js</span>
|
||||
@@ -264,7 +353,7 @@
|
||||
</code></pre></div>
|
||||
<p>By surrounding a JavaScript expression in braces inside JSX (as either an attribute or child), you can drop text or React components into the tree. We access named attributes passed to the component as keys on <code>this.props</code> and any nested elements as <code>this.props.children</code>.</p>
|
||||
|
||||
<h2>Adding Markdown</h2>
|
||||
<h3>Adding Markdown</h3>
|
||||
|
||||
<p>Markdown is a simple way to format your text inline. For example, surrounding text with asterisks will make it emphasized.</p>
|
||||
|
||||
@@ -311,7 +400,7 @@
|
||||
|
||||
<p><strong>Remember:</strong> by using this feature you're relying on Showdown to be secure.</p>
|
||||
|
||||
<h2>Hook up the data model</h2>
|
||||
<h3>Hook up the data model</h3>
|
||||
|
||||
<p>So far we've been inserting the comments directly in the source code. Instead, let's render a blob of JSON data into the comment list. Eventually this will come from the server, but for now, write it in your source:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial8.js</span>
|
||||
@@ -356,7 +445,7 @@
|
||||
</code></pre></div>
|
||||
<p>That's it!</p>
|
||||
|
||||
<h2>Fetching from the server</h2>
|
||||
<h3>Fetching from the server</h3>
|
||||
|
||||
<p>Let's replace the hard-coded data with some dynamic data from the server. We will remove the data prop and replace it with a URL to fetch:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial11.js</span>
|
||||
@@ -367,7 +456,7 @@
|
||||
</code></pre></div>
|
||||
<p>This component is different from the prior components because it will have to re-render itself. The component won't have any data until the request from the server comes back, at which point the component may need to render some new comments.</p>
|
||||
|
||||
<h2>Reactive state</h2>
|
||||
<h3>Reactive state</h3>
|
||||
|
||||
<p>So far, each component has rendered itself once based on its props. <code>props</code> are immutable: they are passed from the parent and are "owned" by the parent. To implement interactions, we introduce mutable <strong>state</strong> to the component. <code>this.state</code> is private to the component and can be changed by calling <code>this.setState()</code>. When the state is updated, the component re-renders itself.</p>
|
||||
|
||||
@@ -392,7 +481,7 @@
|
||||
</code></pre></div>
|
||||
<p><code>getInitialState()</code> executes exactly once during the lifecycle of the component and sets up the initial state of the component.</p>
|
||||
|
||||
<h3>Updating state</h3>
|
||||
<h4>Updating state</h4>
|
||||
|
||||
<p>When the component is first created, we want to GET some JSON from the server and update the state to reflect the latest data. In a real application this would be a dynamic endpoint, but for this example, we will use a static JSON file to keep things simple:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial13.json</span>
|
||||
@@ -469,7 +558,7 @@
|
||||
</code></pre></div>
|
||||
<p>All we have done here is move the AJAX call to a separate method and call it when the component is first loaded and every 5 seconds after that. Try running this in your browser and changing the <code>comments.json</code> file; within 5 seconds, the changes will show!</p>
|
||||
|
||||
<h2>Adding new comments</h2>
|
||||
<h3>Adding new comments</h3>
|
||||
|
||||
<p>Now it's time to build the form. Our <code>CommentForm</code> component should ask the user for their name and comment text and send a request to the server to save the comment.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial15.js</span>
|
||||
@@ -488,7 +577,7 @@
|
||||
<p>Let's make the form interactive. When the user submits the form, we should clear it, submit a request to the server, and refresh the list of comments. To start, let's listen for the form's submit event and clear it.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial16.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="hll"> <span class="nx">handleSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">handleSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
</span><span class="hll"> <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
</span><span class="hll"> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">text</span> <span class="o">||</span> <span class="o">!</span><span class="nx">author</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -498,7 +587,7 @@
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
@@ -514,19 +603,17 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h4>Events</h4>
|
||||
<h5>Events</h5>
|
||||
|
||||
<p>React attaches event handlers to components using a camelCase naming convention. We attach an <code>onSubmit</code> handler to the form that clears the form fields when the form is submitted with valid input.</p>
|
||||
|
||||
<p>We always return <code>false</code> from the event handler to prevent the browser's default action of submitting the form. (If you prefer, you can instead take the event as an argument and call <code>preventDefault()</code> on it – read more about <a href="event-handling.html">event handling</a>.)</p>
|
||||
|
||||
<p><code>React.autoBind()</code> is a simple way to ensure that a method is always bound to its component. Inside the method, <code>this</code> will be bound to the component instance.</p>
|
||||
|
||||
<h4>Refs</h4>
|
||||
<h5>Refs</h5>
|
||||
|
||||
<p>We use the <code>ref</code> attribute to assign a name to a child component and <code>this.refs</code> to reference the component. We can call <code>getDOMNode()</code> on a component to get the native browser DOM element.</p>
|
||||
|
||||
<h4>Callbacks as props</h4>
|
||||
<h5>Callbacks as props</h5>
|
||||
|
||||
<p>When a user submits a comment, we will need to refresh the list of comments to include the new one. It makes sense to do all of this logic in <code>CommentBox</code> since <code>CommentBox</code> owns the state that represents the list of comments.</p>
|
||||
|
||||
@@ -543,9 +630,9 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <span class="c1">// TODO: submit to the server and refresh the list</span>
|
||||
</span><span class="hll"> <span class="p">}),</span>
|
||||
</span><span class="hll"> <span class="p">},</span>
|
||||
</span> <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
@@ -572,14 +659,14 @@
|
||||
<p>Let's call the callback from the <code>CommentForm</code> when the user submits the form:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial18.js</span>
|
||||
<span class="kd">var</span> <span class="nx">CommentForm</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">handleSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">handleSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span><span class="p">.</span><span class="nx">trim</span><span class="p">();</span>
|
||||
<span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onCommentSubmit</span><span class="p">({</span><span class="nx">author</span><span class="o">:</span> <span class="nx">author</span><span class="p">,</span> <span class="nx">text</span><span class="o">:</span> <span class="nx">text</span><span class="p">});</span>
|
||||
</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">author</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">text</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">value</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">form</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentForm"</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">></span>
|
||||
@@ -608,7 +695,7 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
|
||||
</span><span class="hll"> <span class="nx">url</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span>
|
||||
</span><span class="hll"> <span class="nx">data</span><span class="o">:</span> <span class="nx">comment</span><span class="p">,</span>
|
||||
@@ -618,7 +705,7 @@
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
</span><span class="hll"> <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
</span><span class="hll"> <span class="p">});</span>
|
||||
</span> <span class="p">}),</span>
|
||||
</span> <span class="p">},</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
@@ -642,7 +729,7 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Optimization: optimistic updates</h2>
|
||||
<h3>Optimization: optimistic updates</h3>
|
||||
|
||||
<p>Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="c1">// tutorial20.js</span>
|
||||
@@ -657,7 +744,7 @@
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">autoBind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">handleCommentSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="hll"> <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
|
||||
</span><span class="hll"> <span class="nx">comments</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">comment</span><span class="p">);</span>
|
||||
</span><span class="hll"> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">comments</span><span class="p">});</span>
|
||||
@@ -670,7 +757,7 @@
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">data</span><span class="p">});</span>
|
||||
<span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}),</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span><span class="nx">data</span><span class="o">:</span> <span class="p">[]};</span>
|
||||
<span class="p">},</span>
|
||||
@@ -694,17 +781,13 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<h2>Congrats!</h2>
|
||||
<h3>Congrats!</h3>
|
||||
|
||||
<p>You have just built a comment box in a few simple steps. Learn more about React in the <a href="syntax.html">reference</a> or start hacking! Good luck!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/getting-started.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/common-questions.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Why React?</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Why React?" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/why-react.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Guides</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/why-react.html" class="active">
|
||||
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-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/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">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Why React?</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the <strong>V</strong> in <strong><a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC</a></strong>.</p>
|
||||
|
||||
<p>We built React to solve one problem: <strong>building large applications with data that changes over time</strong>. To do this, React uses two main ideas.</p>
|
||||
|
||||
<h3>Simple</h3>
|
||||
|
||||
<p>Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.</p>
|
||||
|
||||
<h3>Declarative</h3>
|
||||
|
||||
<p>When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.</p>
|
||||
|
||||
<h2>Build Composable Components</h2>
|
||||
|
||||
<p>React is all about building reusable components. In fact, with React the <em>only</em> thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.</p>
|
||||
|
||||
<h2>Give It Five Minutes</h2>
|
||||
|
||||
<p>React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. <a href="http://37signals.com/svn/posts/3124-give-it-five-minutes">Give it five minutes</a> while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.</p>
|
||||
|
||||
<h2>Learn More</h2>
|
||||
|
||||
<p>You can learn more about our motivations behind building React in <a href="http://facebook.github.io/react/blog/2013/06/05/why-react.html">this blog post</a>.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/displaying-data.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/why-react.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Working With the Browser</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Working With the Browser" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/working-with-the-browser.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.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" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<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><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
<div class="nav-docs">
|
||||
|
||||
<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>
|
||||
|
||||
</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-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/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/working-with-the-browser.html" class="active">
|
||||
Working With the Browser
|
||||
</a>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/more-about-refs.html">
|
||||
More About Refs
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tooling-integration.html">
|
||||
Tooling integration
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/reference.html">
|
||||
Reference
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Working With the Browser</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.</p>
|
||||
|
||||
<h2>The Mock DOM</h2>
|
||||
|
||||
<p>React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. <code>render()</code> methods return a <em>description</em> of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.</p>
|
||||
|
||||
<p>Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and in a performant way cross-browser. You can even use some HTML5 events in IE8!</p>
|
||||
|
||||
<p>Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.</p>
|
||||
|
||||
<h2>Refs and getDOMNode()</h2>
|
||||
|
||||
<p>To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a <code>getDOMNode()</code> function which you can call to get a reference to it.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p><code>getDOMNode()</code> only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling <code>getDOMNode()</code> in <code>render()</code> on a component that has yet to be created) an exception will be thrown.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>In order to get a reference to a React component, you can either use <code>this</code> to get the current React component, or you can use refs to refer to a component you own. They work like this:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">MyComponent</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
|
||||
<span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// Explicitly focus the text input using the raw DOM API.</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">refs</span><span class="p">.</span><span class="nx">myTextInput</span><span class="p">.</span><span class="nx">getDOMNode</span><span class="p">().</span><span class="nx">focus</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="c1">// The ref attribute adds a reference to the component to</span>
|
||||
<span class="c1">// this.refs when the component is mounted.</span>
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></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="nx">ref</span><span class="o">=</span><span class="s2">"myTextInput"</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">input</span>
|
||||
<span class="nx">type</span><span class="o">=</span><span class="s2">"button"</span>
|
||||
<span class="nx">value</span><span class="o">=</span><span class="s2">"Focus the text input"</span>
|
||||
<span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span>
|
||||
<span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">MyComponent</span> <span class="o">/></span><span class="p">,</span>
|
||||
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<h2>More About Refs</h2>
|
||||
|
||||
<p>To learn more about refs, including ways to use them effectively, see our <a href="./more-about-refs.html">more about refs</a> documentation.</p>
|
||||
|
||||
<h2>Component Lifecycle</h2>
|
||||
|
||||
<p>Components have three main parts of their lifecycle:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Mounting:</strong> A component is being inserted into the DOM.</li>
|
||||
<li><strong>Updating:</strong> A component is being re-rendered to determine if the DOM should be updated.</li>
|
||||
<li><strong>Unmounting:</strong> A component is being removed from the DOM.</li>
|
||||
</ul>
|
||||
|
||||
<p>React provides lifecycle methods that you can specify to hook into this process. We provide <strong>will</strong> methods, which are called right before something happens, and <strong>did</strong> methods which are called right after something happens.</p>
|
||||
|
||||
<h3>Mounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>getInitialState(): object</code> is invoked before a component is mounted. Stateful components should implement this and return the initial state data.</li>
|
||||
<li><code>componentWillMount()</code> is invoked immediately before mounting occurs.</li>
|
||||
<li><code>componentDidMount(DOMElement rootNode)</code> is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Updating</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillReceiveProps(object nextProps)</code> is invoked when a mounted component receives new props. This method should be used to compare <code>this.props</code> and <code>nextProps</code> to perform state transitions using <code>this.setState()</code>.</li>
|
||||
<li><code>shouldComponentUpdate(object nextProps, object nextState): boolean</code> is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare <code>this.props</code> with <code>nextProps</code> and <code>this.state</code> with <code>nextState</code> and return false if React should skip updating.</li>
|
||||
<li><code>componentWillUpdate(object nextProps, object nextState)</code> is invoked immediately before updating occurs. You cannot call <code>this.setState()</code> here.</li>
|
||||
<li><code>componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)</code> is invoked immediately after updating occurs.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Unmounting</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>componentWillUnmount()</code> is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Mounted Methods</h3>
|
||||
|
||||
<p><em>Mounted</em> composite components also support the following methods:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>getDOMNode(): DOMElement</code> can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.</li>
|
||||
<li><code>forceUpdate()</code> can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using <code>this.setState()</code>.</li>
|
||||
</ul>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>The <code>DOMElement rootNode</code> argument of <code>componentDidMount()</code> and
|
||||
<code>componentDidUpdate()</code> is a convenience. The same node can be obtained by
|
||||
calling <code>this.getDOMNode()</code>.</p>
|
||||
</blockquote>
|
||||
|
||||
<h2>Browser Suppport and Polyfills</h2>
|
||||
|
||||
<p>At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing <code>+new Date()</code>, we can just write <code>Date.now()</code>. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.</p>
|
||||
|
||||
<p>In addition to that philosphy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like <a href="https://github.com/kriskowal/es5-shim">es5-shim</a>.</p>
|
||||
|
||||
<h3>Polyfills Needed to Support Older Browsers</h3>
|
||||
|
||||
<ul>
|
||||
<li><code>Array.isArray</code></li>
|
||||
<li><code>Array.prototype.forEach</code></li>
|
||||
<li><code>Array.prototype.indexOf</code></li>
|
||||
<li><code>Function.prototype.bind</code></li>
|
||||
<li><code>Date.now</code></li>
|
||||
<li><code>Array.prototype.some</code> (also in <code>es5-shim.js</code>)</li>
|
||||
</ul>
|
||||
|
||||
<p>All of these can be polyfilled using <code>es5-shim.js</code> from <a href="https://github.com/kriskowal/es5-shim">https://github.com/kriskowal/es5-shim</a>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code>console.*</code> - Only needed when not using the minified build. If you need to polyfill this, try <a href="https://github.com/paulmillr/console-polyfill">https://github.com/paulmillr/console-polyfill</a>.</li>
|
||||
<li><code>Object.create</code> - Provided in <code>es5-sham.js</code> @ <a href="https://github.com/kriskowal/es5-shim">https://github.com/kriskowal/es5-shim</a>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/forms.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/more-about-refs.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/working-with-the-browser.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</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/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+8
-22
@@ -59,27 +59,27 @@
|
||||
<a href="/react/docs/getting-started.html">get started with React</a>.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.3.3.zip" class="button">
|
||||
Download Starter Kit 0.3.3
|
||||
<a href="/react/downloads/react-0.4.0.zip" class="button">
|
||||
Download Starter Kit 0.4.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Individual Downloads</h2>
|
||||
|
||||
<h4><a href="http://fb.me/react-0.3.3.min.js">React Core 0.3.3 (production)</a></h4>
|
||||
<h4><a href="http://fb.me/react-0.4.0.min.js">React Core 0.4.0 (production)</a></h4>
|
||||
|
||||
<p>The compressed, production version of React core</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.3.3.min.js"</span><span class="nt">></script></span>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.4.0.min.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h4><a href="http://fb.me/react-0.3.3.js">React Core 0.3.3 (development)</a></h4>
|
||||
<h4><a href="http://fb.me/react-0.4.0.js">React Core 0.4.0 (development)</a></h4>
|
||||
|
||||
<p>The uncompressed, development version of React core with inline documentation.</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/react-0.4.0.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h4><a href="http://fb.me/JSXTransformer-0.3.3.js">JSX Transform</a></h4>
|
||||
<h4><a href="http://fb.me/JSXTransformer-0.4.0.js">JSX Transform</a></h4>
|
||||
|
||||
<p>The JSX transformer used to support <a href="/react/docs/syntax.html">XML syntax</a> in JavaScript.</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.3.3.js"</span><span class="nt">></script></span>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"http://fb.me/JSXTransformer-0.4.0.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h2>Bower</h2>
|
||||
<div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>bower install --save react
|
||||
@@ -87,20 +87,6 @@
|
||||
<h2>NPM</h2>
|
||||
<div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>npm install -g react-tools
|
||||
</code></pre></div>
|
||||
<h2>Release Notes</h2>
|
||||
|
||||
<p><strong>0.3.3</strong> Upgrade <code>react-tools</code> dependencies, improve in-browser JSX transformer, make <code>React.renderComponent</code> more versatile. <a href="blog/2013/06/20/react-v0-3-3.html">Details...</a></p>
|
||||
|
||||
<p><strong>0.3.2</strong> Improve compatibility of JSX Transformer; make <code>react-tools</code> compatible with <a href="https://github.com/substack/node-browserify">browserify</a></p>
|
||||
|
||||
<p><strong>0.3.1</strong> Fix <code>react-tools</code> module</p>
|
||||
|
||||
<p><strong>0.3</strong> Initial public release.</p>
|
||||
|
||||
<p><strong>0.2</strong> Standardize API & refactor component lifecycle. Normalize DOM interactions.</p>
|
||||
|
||||
<p><strong>0.1</strong> Initial release.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
|
||||
Binary file not shown.
@@ -6,6 +6,52 @@
|
||||
<link>http://facebook.github.io/react</link>
|
||||
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
<item>
|
||||
<title>React v0.4.0</title>
|
||||
<description><p>Over the past 2 months we&#39;ve been taking feedback and working hard to make React even better. We&#39;ve also added several features that awe didn&#39;t finish in time for the v0.3 launch, and are proud to announce the availability of React v0.4 today!</p>
|
||||
|
||||
<p>This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the <a href="http://groups.google.com/group/reactjs">Google Group</a>, and issues and pull requests on GitHub. We&#39;ve had contributions ranging from documentation improvements to major changes to React&#39;s rendering. We&#39;ve seen people integrate React into the tools they&#39;re using and the products they&#39;re building, and we&#39;re all very excited to see what our budding community builds next!</p>
|
||||
|
||||
<p>React v0.4 has some big changes. We&#39;ve also restructured the documentation to better communicate how to use React. We&#39;ve summarized the changes below and linked to documentation where we think it will be especially useful.</p>
|
||||
|
||||
<p>When you&#39;re ready, <a href="/react/downloads.html">go download it</a>!</p>
|
||||
|
||||
<h3>React</h3>
|
||||
|
||||
<ul>
|
||||
<li>Switch from using <code>id</code> attribute to <code>data-reactid</code> to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.</li>
|
||||
<li>Support for more DOM elements and attributes (e.g., <code>&lt;canvas&gt;</code>)</li>
|
||||
<li>Improved server-side rendering APIs. <code>React.renderComponentToString(&lt;component&gt;, callback)</code> allows you to use React on the server and generate markup which can be sent down to the browser.</li>
|
||||
<li><code>prop</code> improvements: validation and default values. <a href="http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">Read our blog post for details...</a></li>
|
||||
<li>Support for the <code>key</code> prop, which allows for finer control over reconciliation. <a href="http://facebook.github.io/react/docs/multiple-components.html">Read the docs for details...</a></li>
|
||||
<li>Removed <code>React.autoBind</code>. <a href="http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">Read our blog post for details...</a></li>
|
||||
<li>Improvements to forms. We&#39;ve written wrappers around <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;option&gt;</code>, and <code>&lt;select&gt;</code> in order to standardize many inconsistencies in browser implementations. This includes support for <code>defaultValue</code>, and improved implementation of the <code>onChange</code> event, and circuit completion. <a href="http://facebook.github.io/react/docs/forms.html">Read the docs for details...</a></li>
|
||||
<li>We&#39;ve implemented an improved synthetic event system that conforms to the W3C spec.</li>
|
||||
<li>Updates to your component are batched now, which may result in a significantly faster re-render of components. <code>this.setState</code> now takes an optional callback as it&#39;s second parameter. If you were using <code>onClick={this.setState.bind(this, state)}</code> previously, you&#39;ll want to make sure you add a third parameter so that the event is not treated as the callback.</li>
|
||||
</ul>
|
||||
|
||||
<h3>JSX</h3>
|
||||
|
||||
<ul>
|
||||
<li>Support for comment nodes <code>&lt;div&gt;{/* this is a comment and won&#39;t be rendered */}&lt;/div&gt;</code></li>
|
||||
<li>Children are now transformed directly into arguments instead of being wrapped in an array
|
||||
E.g. <code>&lt;div&gt;&lt;Component1/&gt;&lt;Component2&gt;&lt;/div&gt;</code> is transformed into <code>React.DOM.div(null, Component1(null), Component2(null))</code>.
|
||||
Previously this would be transformed into <code>React.DOM.div(null, [Component1(null), Component2(null)])</code>.
|
||||
If you were using React without JSX previously, your code should still work.</li>
|
||||
</ul>
|
||||
|
||||
<h3>react-tools</h3>
|
||||
|
||||
<ul>
|
||||
<li>Fixed a number of bugs when transforming directories</li>
|
||||
<li>No longer re-write <code>require()</code>s to be relative unless specified</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-07-17T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/07/17/react-v0-4-0.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/07/17/react-v0-4-0.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>New in React v0.4: Prop Validation and Default Values</title>
|
||||
<description><p>Many of the questions we got following the public launch of React revolved around <code>props</code>, specifically that people wanted to do validation and to make sure their components had sensible defaults.</p>
|
||||
|
||||
+2
-2
@@ -59,7 +59,7 @@
|
||||
|
||||
<div class="buttons-unit">
|
||||
<a href="/react/docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v0.3.3</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v0.4.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,7 +145,7 @@
|
||||
<section class="home-bottom-section">
|
||||
<div class="buttons-unit">
|
||||
<a href="docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="downloads.html" class="button">Download React v0.3.3</a>
|
||||
<a href="downloads.html" class="button">Download React v0.4.0</a>
|
||||
</div>
|
||||
</section></p>
|
||||
|
||||
|
||||
+3228
-3187
File diff suppressed because it is too large
Load Diff
@@ -14,6 +14,6 @@ React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:HELLO_COMPONENT}, null ),
|
||||
ReactPlayground( {codeText:HELLO_COMPONENT} ),
|
||||
document.getElementById('helloExample')
|
||||
);
|
||||
|
||||
@@ -11,14 +11,14 @@ var MarkdownEditor = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {value: 'Type some *markdown* here!'};\n\
|
||||
},\n\
|
||||
handleKeyUp: React.autoBind(function() {\n\
|
||||
handleInput: function() {\n\
|
||||
this.setState({value: this.refs.textarea.getDOMNode().value});\n\
|
||||
}),\n\
|
||||
},\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div className=\"MarkdownEditor\">\n\
|
||||
<h3>Input</h3>\n\
|
||||
<textarea onKeyUp={this.handleKeyUp} ref=\"textarea\">\n\
|
||||
<textarea onInput={this.handleInput} ref=\"textarea\">\n\
|
||||
{this.state.value}\n\
|
||||
</textarea>\n\
|
||||
<h3>Output</h3>\n\
|
||||
@@ -37,6 +37,6 @@ React.renderComponent(<MarkdownEditor />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:MARKDOWN_COMPONENT}, null ),
|
||||
ReactPlayground( {codeText:MARKDOWN_COMPONENT} ),
|
||||
document.getElementById('markdownExample')
|
||||
);
|
||||
|
||||
@@ -7,9 +7,9 @@ var Timer = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {secondsElapsed: 0};\n\
|
||||
},\n\
|
||||
tick: React.autoBind(function() {\n\
|
||||
tick: function() {\n\
|
||||
this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
|
||||
}),\n\
|
||||
},\n\
|
||||
componentDidMount: function() {\n\
|
||||
setInterval(this.tick, 1000);\n\
|
||||
},\n\
|
||||
@@ -24,6 +24,6 @@ React.renderComponent(Timer({}), mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:TIMER_COMPONENT}, null ),
|
||||
ReactPlayground( {codeText:TIMER_COMPONENT} ),
|
||||
document.getElementById('timerExample')
|
||||
);
|
||||
|
||||
+1
-1
@@ -42,6 +42,6 @@ React.renderComponent(<TodoApp />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:TODO_COMPONENT}, null ),
|
||||
ReactPlayground( {codeText:TODO_COMPONENT} ),
|
||||
document.getElementById('todoExample')
|
||||
);
|
||||
|
||||
+1
-1
@@ -14,6 +14,6 @@ React.renderComponent(<HelloMessage name=\"John\" />, mountNode);\
|
||||
";
|
||||
|
||||
React.renderComponent(
|
||||
ReactPlayground( {codeText:HELLO_COMPONENT, renderCode:true}, null ),
|
||||
ReactPlayground( {codeText:HELLO_COMPONENT, renderCode:true} ),
|
||||
document.getElementById('jsxCompiler')
|
||||
);
|
||||
|
||||
+5
-5
@@ -77,7 +77,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
CodeMirrorEditor(
|
||||
{onChange:this.bindState('code'),
|
||||
className:"playgroundStage",
|
||||
codeText:this.state.code}, null
|
||||
codeText:this.state.code}
|
||||
);
|
||||
} else if (this.state.mode === this.MODES.JS) {
|
||||
content =
|
||||
@@ -87,14 +87,14 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
}
|
||||
|
||||
return (
|
||||
React.DOM.div( {className:"playground"}, [
|
||||
React.DOM.div( {className:"playground"},
|
||||
React.DOM.div( {className:"playgroundCode"},
|
||||
content
|
||||
),
|
||||
React.DOM.div( {className:"playgroundPreview"},
|
||||
React.DOM.div( {ref:"mount"}, null )
|
||||
React.DOM.div( {ref:"mount"} )
|
||||
)
|
||||
])
|
||||
)
|
||||
);
|
||||
},
|
||||
componentDidMount: function() {
|
||||
@@ -121,7 +121,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
}
|
||||
} catch (e) {
|
||||
React.renderComponent(
|
||||
React.DOM.div( {content:e.toString(), className:"playgroundError"}, null ),
|
||||
React.DOM.div( {content:e.toString(), className:"playgroundError"} ),
|
||||
mountNode
|
||||
);
|
||||
}
|
||||
|
||||
Vendored
+4
-3
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user