mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Update to latest master, including blog posts
This commit is contained in:
Paul O’Shannessy
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | JSFiddle Integration</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | JSFiddle Integration" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/06/02/jsfiddle-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">
|
||||
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 documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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" class="active">JSFiddle Integration</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>JSFiddle Integration</h1>
|
||||
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
||||
|
||||
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</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');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Why did we build React?</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Why did we build React?" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/06/05/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">
|
||||
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 documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/06/05/why-react.html" class="active">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>Why did we build React?</h1>
|
||||
<p class="meta">June 5, 2013 by Pete Hunt</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
and why would you want to use it?</p>
|
||||
|
||||
<h2>React isn't an MVC framework.</h2>
|
||||
|
||||
<p>React is a library for building composable user interfaces. It encourages
|
||||
the creation of reusable UI components which present data that changes over
|
||||
time.</p>
|
||||
|
||||
<h2>React doesn't use templates.</h2>
|
||||
|
||||
<p>Traditionally, web application UIs are built using templates or HTML directives.
|
||||
These templates dictate the full set of abstractions that you are allowed to use
|
||||
to build your UI.</p>
|
||||
|
||||
<p>React approaches building user interfaces differently by breaking them into
|
||||
<strong>components</strong>. This means React uses JavaScript to generate markup, which we
|
||||
see as an advantage over templates for a few reasons:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
|
||||
to build abstractions. This is incredibly important in large applications.</li>
|
||||
<li>By unifying your markup with it's corresponding view logic, React can actually
|
||||
make views <strong>easier to extend and maintain</strong>.</li>
|
||||
<li>By baking an understanding of markup and content into JavaScript, there's
|
||||
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
|
||||
vulnerabilities.</li>
|
||||
</ul>
|
||||
|
||||
<p>We've also created <a href="facebook.github.io/react/docs/syntax.html">JSX</a>, an optional
|
||||
syntax extension, in case you prefer the readability of HTML to raw JavaScript.</p>
|
||||
|
||||
<h2>Reactive updates are dead simple.</h2>
|
||||
|
||||
<p>React really shines when your data changes over time.</p>
|
||||
|
||||
<p>In a traditional JavaScript application, you need to look at what data changed
|
||||
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
|
||||
which provides a declarative interface via directives and data binding <a href="http://docs.angularjs.org/guide/directive#reasonsbehindthecompilelinkseparation">requires
|
||||
a linking function to manually update DOM nodes</a>.</p>
|
||||
|
||||
<p>React takes a different approach.</p>
|
||||
|
||||
<p>When your component is first initialized, the <code>render</code> method is called,
|
||||
generating a lightweight representation of your view. From that representation,
|
||||
a string of markup is produced, and injected into the document. When your data
|
||||
changes, the <code>render</code> method is called again. In order to perform updates as
|
||||
efficiently as possible, we diff the return value from the previous call to
|
||||
<code>render</code> with the new one, and generate a minimal set of changes to be applied
|
||||
to the DOM.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it's a
|
||||
lightweight description of what the DOM should look like.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>We call this process <strong>reconciliation</strong>. Check out
|
||||
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
|
||||
reconciliation in action.</p>
|
||||
|
||||
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
||||
doesn't need to explicitly specify data bindings. We've found this approach
|
||||
makes it easier to build apps.</p>
|
||||
|
||||
<h2>HTML is just the beginning.</h2>
|
||||
|
||||
<p>Because React has its own lightweight representation of the document, we can do
|
||||
some pretty cool things with it:</p>
|
||||
|
||||
<ul>
|
||||
<li>Facebook has dynamic charts that render to <code><canvas></code> instead of HTML.</li>
|
||||
<li>Instagram is a "single page" web app built entirely with React and
|
||||
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
|
||||
<li>We've built internal prototypes that run React apps in a web worker and use
|
||||
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
|
||||
<li>You can run React
|
||||
<a href="http://github.com/petehunt/react-server-rendering">on the server</a>
|
||||
for SEO, performance, code sharing and overall flexibility.</li>
|
||||
<li>Events behave in a consistent, standards-compliant way in all browsers
|
||||
(including IE8) and automatically use
|
||||
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Head on over to
|
||||
<a href="http://facebook.github.io/react">facebook.github.io/react</a> to check
|
||||
out what we have built. Our documentation is geared towards building
|
||||
apps with the framework, but if you are interested in the
|
||||
nuts and bolts
|
||||
<a href="http://facebook.github.io/react/support.html">get in touch</a> with us!</p>
|
||||
|
||||
<p>Thanks for reading!</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</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');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Blog</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Blog" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/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" />
|
||||
|
||||
<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">
|
||||
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 documentationContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<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">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></h1>
|
||||
<p class="meta">June 5, 2013 by Pete Hunt</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
and why would you want to use it?</p>
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/react/blog/2013/06/05/why-react.html">Continue Reading →</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></h1>
|
||||
<p class="meta">June 2, 2013 by Christopher Chedeau</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/react/blog/2013/06/02/jsfiddle-integration.html">Continue Reading →</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</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');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
@@ -79,7 +81,18 @@
|
||||
<div class="inner-content">
|
||||
<h1>Getting Started</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>Download the starter kit to get started.</p>
|
||||
<h2>JSFiddle</h2>
|
||||
|
||||
<p>The easiest way to start hacking on React is using the following JSFiddle Hello Worlds</p>
|
||||
|
||||
<ul>
|
||||
<li><strong><a href="http://jsfiddle.net/vjeux/kb3gN/">React JSFiddle</a></strong></li>
|
||||
<li><a href="http://jsfiddle.net/vjeux/VkebS/">React JSFiddle without JSX</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Starter Kit</h2>
|
||||
|
||||
<p>Download the starter kit to get started.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.3.2.zip" class="button">
|
||||
@@ -87,8 +100,6 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Hello, world!</h2>
|
||||
|
||||
<p>In the root directory of the starter kit, create a <code>helloworld.html</code> with the following contents.</p>
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span>
|
||||
<span class="nt"><html></span>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
|
||||
+6
-4
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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> -->
|
||||
@@ -155,7 +157,7 @@
|
||||
<span class="kd">var</span> <span class="nx">CommentBox</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="nx">ReactDOM</span><span class="p">.</span><span class="nx">div</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">div</span><span class="p">({</span>
|
||||
<span class="nx">className</span><span class="o">:</span> <span class="s1">'commentBox'</span><span class="p">,</span>
|
||||
<span class="nx">children</span><span class="o">:</span> <span class="s1">'Hello, world! I am a CommentBox.'</span>
|
||||
<span class="p">})</span>
|
||||
@@ -217,7 +219,7 @@
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</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 "ReactDOM.tagName" expressions and leave everything else alone. This is to prevent the pollution of the global namespace.</p>
|
||||
<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>
|
||||
|
||||
@@ -374,8 +376,8 @@
|
||||
<span class="k">return</span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"commentBox"</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Comments</span><span class="o"><</span><span class="err">/h1></span>
|
||||
<span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</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">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="hll"> <span class="o"><</span><span class="nx">CommentList</span> <span class="nx">data</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">data</span><span class="p">}</span> <span class="o">/></span>
|
||||
</span> <span class="o"><</span><span class="nx">CommentForm</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
+8
-3
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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" class="active">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> -->
|
||||
@@ -67,15 +69,18 @@
|
||||
<h4><a href="http://fb.me/react-0.3.2.min.js">React Core 0.3.2 (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.2.min.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h4><a href="http://fb.me/react-0.3.2.js">React Core 0.3.2 (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.2.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<h4><a href="http://fb.me/JSXTransformer-0.3.2.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.2.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
|
||||
</code></pre></div>
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>React</title>
|
||||
<description>A JavaScript library for building user interfaces</description>
|
||||
<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>Why did we build React?</title>
|
||||
<description><p>There are a lot of JavaScript MVC frameworks out there. Why did we build React
|
||||
and why would you want to use it?</p>
|
||||
|
||||
<h2>React isn&#39;t an MVC framework.</h2>
|
||||
|
||||
<p>React is a library for building composable user interfaces. It encourages
|
||||
the creation of reusable UI components which present data that changes over
|
||||
time.</p>
|
||||
|
||||
<h2>React doesn&#39;t use templates.</h2>
|
||||
|
||||
<p>Traditionally, web application UIs are built using templates or HTML directives.
|
||||
These templates dictate the full set of abstractions that you are allowed to use
|
||||
to build your UI.</p>
|
||||
|
||||
<p>React approaches building user interfaces differently by breaking them into
|
||||
<strong>components</strong>. This means React uses JavaScript to generate markup, which we
|
||||
see as an advantage over templates for a few reasons:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>JavaScript is a flexible, powerful programming language</strong> with the ability
|
||||
to build abstractions. This is incredibly important in large applications.</li>
|
||||
<li>By unifying your markup with it&#39;s corresponding view logic, React can actually
|
||||
make views <strong>easier to extend and maintain</strong>.</li>
|
||||
<li>By baking an understanding of markup and content into JavaScript, there&#39;s
|
||||
<strong>no manual string concatenation</strong> and therefore less surface area for XSS
|
||||
vulnerabilities.</li>
|
||||
</ul>
|
||||
|
||||
<p>We&#39;ve also created <a href="facebook.github.io/react/docs/syntax.html">JSX</a>, an optional
|
||||
syntax extension, in case you prefer the readability of HTML to raw JavaScript.</p>
|
||||
|
||||
<h2>Reactive updates are dead simple.</h2>
|
||||
|
||||
<p>React really shines when your data changes over time.</p>
|
||||
|
||||
<p>In a traditional JavaScript application, you need to look at what data changed
|
||||
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
|
||||
which provides a declarative interface via directives and data binding <a href="http://docs.angularjs.org/guide/directive#reasonsbehindthecompilelinkseparation">requires
|
||||
a linking function to manually update DOM nodes</a>.</p>
|
||||
|
||||
<p>React takes a different approach.</p>
|
||||
|
||||
<p>When your component is first initialized, the <code>render</code> method is called,
|
||||
generating a lightweight representation of your view. From that representation,
|
||||
a string of markup is produced, and injected into the document. When your data
|
||||
changes, the <code>render</code> method is called again. In order to perform updates as
|
||||
efficiently as possible, we diff the return value from the previous call to
|
||||
<code>render</code> with the new one, and generate a minimal set of changes to be applied
|
||||
to the DOM.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>The data returned from <code>render</code> is neither a string nor a DOM node -- it&#39;s a
|
||||
lightweight description of what the DOM should look like.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>We call this process <strong>reconciliation</strong>. Check out
|
||||
<a href="http://jsfiddle.net/fv6RD/3/">this jsFiddle</a> to see an example of
|
||||
reconciliation in action.</p>
|
||||
|
||||
<p>Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
||||
doesn&#39;t need to explicitly specify data bindings. We&#39;ve found this approach
|
||||
makes it easier to build apps.</p>
|
||||
|
||||
<h2>HTML is just the beginning.</h2>
|
||||
|
||||
<p>Because React has its own lightweight representation of the document, we can do
|
||||
some pretty cool things with it:</p>
|
||||
|
||||
<ul>
|
||||
<li>Facebook has dynamic charts that render to <code>&lt;canvas&gt;</code> instead of HTML.</li>
|
||||
<li>Instagram is a &quot;single page&quot; web app built entirely with React and
|
||||
<code>Backbone.Router</code>. Designers regularly contribute React code with JSX.</li>
|
||||
<li>We&#39;ve built internal prototypes that run React apps in a web worker and use
|
||||
React to drive <strong>native iOS views</strong> via an Objective-C bridge.</li>
|
||||
<li>You can run React
|
||||
<a href="http://github.com/petehunt/react-server-rendering">on the server</a>
|
||||
for SEO, performance, code sharing and overall flexibility.</li>
|
||||
<li>Events behave in a consistent, standards-compliant way in all browsers
|
||||
(including IE8) and automatically use
|
||||
<a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Head on over to
|
||||
<a href="http://facebook.github.io/react">facebook.github.io/react</a> to check
|
||||
out what we have built. Our documentation is geared towards building
|
||||
apps with the framework, but if you are interested in the
|
||||
nuts and bolts
|
||||
<a href="http://facebook.github.io/react/support.html">get in touch</a> with us!</p>
|
||||
|
||||
<p>Thanks for reading!</p>
|
||||
</description>
|
||||
<pubDate>2013-06-05T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/06/05/why-react.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/05/why-react.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>JSFiddle Integration</title>
|
||||
<description><p><a href="http://jsfiddle.net">JSFiddle</a> just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this <strong><a href="http://jsfiddle.net/vjeux/kb3gN/">base React JSFiddle</a></strong>, fork it and share it! A <a href="http://jsfiddle.net/vjeux/VkebS/">fiddle without JSX</a> is also available.</p>
|
||||
|
||||
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
|
||||
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</description>
|
||||
<pubDate>2013-06-02T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/06/02/jsfiddle-integration.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/02/jsfiddle-integration.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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>
|
||||
<!-- <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> -->
|
||||
|
||||
+6
-6
@@ -14,15 +14,15 @@ var TodoList = React.createClass({\n\
|
||||
});\n\
|
||||
\n\
|
||||
var TodoCreate = React.createClass({\n\
|
||||
handleSubmit: function() {\n\
|
||||
handleSubmit: React.autoBind(function() {\n\
|
||||
var textInput = this.refs.textInput.getDOMNode();\n\
|
||||
this.props.onCreate(textInput.value);\n\
|
||||
textInput.value = '';\n\
|
||||
return false;\n\
|
||||
},\n\
|
||||
}),\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<form onSubmit={this.handleSubmit.bind(this)}>\n\
|
||||
<form onSubmit={this.handleSubmit}>\n\
|
||||
<input type=\"text\" ref=\"textInput\" />\n\
|
||||
<button>Add</button>\n\
|
||||
</form>\n\
|
||||
@@ -34,15 +34,15 @@ var TodoApp = React.createClass({\n\
|
||||
getInitialState: function() {\n\
|
||||
return {items: []};\n\
|
||||
},\n\
|
||||
onItemCreate: function(value) {\n\
|
||||
onItemCreate: React.autoBind(function(value) {\n\
|
||||
this.setState({items: this.state.items.concat([value])});\n\
|
||||
},\n\
|
||||
}),\n\
|
||||
render: function() {\n\
|
||||
return (\n\
|
||||
<div>\n\
|
||||
<h3>TODO</h3>\n\
|
||||
<TodoList items={this.state.items} />\n\
|
||||
<TodoCreate onCreate={this.onItemCreate.bind(this)} />\n\
|
||||
<TodoCreate onCreate={this.onItemCreate} />\n\
|
||||
</div>\n\
|
||||
);\n\
|
||||
}\n\
|
||||
|
||||
+2
-2
@@ -81,7 +81,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
);
|
||||
} else if (this.state.mode === this.MODES.JS) {
|
||||
content =
|
||||
React.DOM.div( {className:{playgroundJS: true, playgroundStage: true}},
|
||||
React.DOM.div( {className:"playgroundJS playgroundStage"},
|
||||
this.getDesugaredCode()
|
||||
);
|
||||
}
|
||||
@@ -121,7 +121,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
}
|
||||
} catch (e) {
|
||||
React.renderComponent(
|
||||
React.DOM.div( {content:e.toString(), className:{playgroundError: true}}, null ),
|
||||
React.DOM.div( {content:e.toString(), className:"playgroundError"}, null ),
|
||||
mountNode
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<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>
|
||||
<!-- <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> -->
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<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">
|
||||
@@ -41,6 +42,7 @@
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html" class="active">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> -->
|
||||
|
||||
Reference in New Issue
Block a user