mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Vjeux
ee5805da65
Nick Thompson nick-thompson Clarify componentWillMount behavior542f20bCheng Lou chenglou docs fix back link in Examples6b15ad5Cheng Lou chenglou docs add jsx->js tab to live editors7ac5f3cPaul O’Shannessy zpao Normalize line endings6b1c6beBen Alpert spicyj Update homepage for new JSX/JS editor761e1c8Ben Alpert spicyj Properly clear live editor on JSX compile failured3fc5adBen Alpert spicyj Simplify live editor execution logicc7f0663Cheng Lou chenglou [docs] Tweak frontpage first example and jsx-compiler example8c8841cChristoph Pojer cpojer Update propTypes documentation.b66fbdeJean Lauliac jeanlauliac Update broken link in 'why react' article341d292Jean Lauliac jeanlauliac Normalize internal links in 'why react' article0681d13aymanosman aymanosman Fix typo09650e1Bob Eagan bobeagan fix incorrect link2edb76fBob Eagan bobeagan add hash link for lifecycle section of working with the browser page3db3460Pete Hunt petehunt remove references to react-page3120192Ben Alpert spicyj Fix docs typo6e4ddfdPaul O’Shannessy zpao Fix animation example code …dd66223Eric Schoffstall Contra fix grammar mistake64ac427Kunal Mehta kmeht Add documentation about React.renderComponent …f970453Christopher Chedeau vjeux s/Mock DOM/Virtual DOM/ …22772c9Ben Alpert spicyj Disable CodeMirror smart indentation …571d173Ben Alpert spicyj [docs] Fix comma splice3810c83
193 lines
7.7 KiB
HTML
193 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE]><![endif]-->
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>React | A JavaScript library for building user interfaces</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="React | A JavaScript library for building user interfaces" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="http://facebook.github.io/react/index.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" />
|
|
<meta property="fb:app_id" content="623268441017527" />
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
|
|
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
|
|
|
<!--[if lte IE 8]>
|
|
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
|
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
|
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
|
<![endif]-->
|
|
<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/">blog</a></li>
|
|
<li><a href="http://github.com/facebook/react">github</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="hero">
|
|
<div class="wrap">
|
|
<div class="text"><strong>React</strong></div>
|
|
<div class="minitext">
|
|
A JavaScript library for building user interfaces
|
|
</div>
|
|
|
|
<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.8.0</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="content wrap">
|
|
<p><section class="light home-section">
|
|
<div class="marketing-row">
|
|
<div class="marketing-col">
|
|
<h3>Just the UI</h3>
|
|
<p>
|
|
Lots of people use React as the V in MVC.
|
|
Since React makes no assumptions about the rest of your technology stack,
|
|
it's easy to try it out on a small feature in an existing project.
|
|
</p>
|
|
</div>
|
|
<div class="marketing-col">
|
|
<h3>Virtual DOM</h3>
|
|
<p>
|
|
React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also
|
|
render on the server using Node.js — no heavy browser DOM required.
|
|
</p>
|
|
</div>
|
|
<div class="marketing-col">
|
|
<h3>Data flow</h3>
|
|
<p>
|
|
React implements one-way reactive data flow which reduces boilerplate and is
|
|
easier to reason about than traditional data binding.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<hr class="home-divider" />
|
|
<section class="home-section">
|
|
<div id="examples">
|
|
<div class="example">
|
|
<h3>A Simple Component</h3>
|
|
<p>
|
|
React components implement a <code>render()</code> method that takes input data and
|
|
returns what to display. This example uses an XML-like syntax called
|
|
JSX. Input data that is passed into the component can be accessed by
|
|
<code>render()</code> via <code>this.props</code>.
|
|
</p>
|
|
<p>
|
|
<strong>JSX is optional and not required to use React.</strong> Try
|
|
clicking on "Compiled JS" to see the raw JavaScript code produced by
|
|
the JSX compiler.
|
|
</p>
|
|
<div id="helloExample"></div>
|
|
</div>
|
|
<div class="example">
|
|
<h3>A Stateful Component</h3>
|
|
<p>
|
|
In addition to taking input data (accessed via <code>this.props</code>), a
|
|
component can maintain internal state data (accessed via <code>this.state</code>).
|
|
When a component's state data changes, the rendered markup will be
|
|
updated by re-invoking <code>render()</code>.
|
|
</p>
|
|
<div id="timerExample"></div>
|
|
</div>
|
|
<div class="example">
|
|
<h3>An Application</h3>
|
|
<p>
|
|
Using <code>props</code> and <code>state</code>, we can put together a small Todo application.
|
|
This example uses <code>state</code> to track the current list of items as well as
|
|
the text that the user has entered. Although event handlers appear to be
|
|
rendered inline, they will be collected and implemented using event
|
|
delegation.
|
|
</p>
|
|
<div id="todoExample"></div>
|
|
</div>
|
|
<div class="example">
|
|
<h3>A Component Using External Plugins</h3>
|
|
<p>
|
|
React is flexible and provides hooks that allow you to interface with
|
|
other libraries and frameworks. This example uses Showdown, an external
|
|
Markdown library, to convert the textarea's value in real-time.
|
|
</p>
|
|
<div id="markdownExample"></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="js/examples/hello.js"></script>
|
|
<script type="text/javascript" src="js/examples/timer.js"></script>
|
|
<script type="text/javascript" src="js/examples/todo.js"></script>
|
|
<script type="text/javascript" src="js/examples/markdown.js"></script>
|
|
</section>
|
|
<hr class="home-divider" />
|
|
<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.8.0</a>
|
|
</div>
|
|
</section></p>
|
|
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">A Facebook & Instagram collaboration.</div>
|
|
<div class="right">© 2014 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>
|