mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
v0.5.0
This commit is contained in:
Paul O’Shannessy
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html" class="active">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html" class="active">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | React v0.5</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | React v0.5" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/10/16/react-v0.5.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" />
|
||||
<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/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 nav-blog">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html" class="active">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/26/community-roundup-7.html">Community Round-up #7</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>React v0.5</h1>
|
||||
<p class="meta">October 16, 2013 by Paul O'Shannessy</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2 id="thanks-to-our-community">Thanks to Our Community</h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2 id="changelog">Changelog</h2><h3 id="react">React</h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3 id="react-with-addons-new">React with Addons (New!)</h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3 id="jsx">JSX</h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</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/10/16/react-v0.5.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>
|
||||
@@ -56,6 +56,8 @@
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
|
||||
<p><strong><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></strong> on October 16, 2013 by Paul O'Shannessy</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></strong> on October 3, 2013 by Vjeux</p>
|
||||
|
||||
<p><strong><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></strong> on September 24, 2013 by Vjeux</p>
|
||||
|
||||
+52
-75
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -85,6 +85,56 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></h1>
|
||||
<p class="meta">October 16, 2013 by Paul O'Shannessy</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you'll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we've added an additional build - <code>react-with-addons</code> - which adds support for some extras that we've been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2 id="thanks-to-our-community">Thanks to Our Community</h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.</p>
|
||||
|
||||
<p>It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!</p>
|
||||
<h2 id="changelog">Changelog</h2><h3 id="react">React</h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3 id="react-with-addons-new">React with Addons (New!)</h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3 id="jsx">JSX</h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></h1>
|
||||
<p class="meta">October 3, 2013 by Vjeux</p>
|
||||
@@ -357,79 +407,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
|
||||
<p class="meta">August 5, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2 id="react-game-tutorial">React Game Tutorial</h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2 id="reactify">Reactify</h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-integration-with-este">React Integration with Este</h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2 id="react-stylus-boilerplate">React Stylus Boilerplate</h2>
|
||||
<p><a href="http://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="webfui">WebFUI</h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+75
-53
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -85,6 +85,79 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
|
||||
<p class="meta">August 5, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.</p>
|
||||
<h2 id="react-game-tutorial">React Game Tutorial</h2>
|
||||
<p><a href="https://twitter.com/CalebCassel">Caleb Cassel</a> wrote a <a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html">step-by-step tutorial</a> about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
|
||||
<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="/react/img/blog/dog-tutorial.png" alt=""></a></figure></p>
|
||||
<h2 id="reactify">Reactify</h2>
|
||||
<p><a href="http://andreypopp.com/">Andrey Popp</a> created a <a href="http://browserify.org/">Browserify</a> helper to compile JSX files.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Browserify v2 transform for <code>text/jsx</code>. Basic usage is:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">% browserify -t reactify main.jsx
|
||||
</code></pre></div>
|
||||
<p><code>reactify</code> transform activates for files with either <code>.jsx</code> extension or <code>/** @jsx React.DOM */</code> pragma as a first line for any <code>.js</code> file.</p>
|
||||
|
||||
<p><a href="https://github.com/andreypopp/reactify">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-integration-with-este">React Integration with Este</h2>
|
||||
<p><a href="http://daniel.steigerwald.cz/">Daniel Steigerwald</a> is now using React within <a href="https://github.com/steida/este">Este</a>, which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.</p>
|
||||
<div class="highlight"><pre><code class="coffeescript language-coffeescript" data-lang="coffeescript"><span class="nv">este.demos.react.todoApp = </span><span class="nx">este</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">create</span> <span class="p">(</span><span class="o">`</span><span class="sr">/** @lends {React.ReactComponent.prototype} */</span><span class="o">`</span><span class="p">)</span>
|
||||
<span class="nv">render: </span><span class="nf">-></span>
|
||||
<span class="nx">@div</span> <span class="p">[</span>
|
||||
<span class="nx">este</span><span class="p">.</span><span class="nx">demos</span><span class="p">.</span><span class="nx">react</span><span class="p">.</span><span class="nx">todoList</span> <span class="s">'items'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">]</span>
|
||||
<span class="k">if</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span>
|
||||
<span class="nx">@p</span> <span class="s">"</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span><span class="si">}</span><span class="s"> items."</span>
|
||||
<span class="nx">@form</span> <span class="s">'onSubmit'</span><span class="o">:</span> <span class="nx">@onFormSubmit</span><span class="p">,</span> <span class="p">[</span>
|
||||
<span class="nx">@input</span>
|
||||
<span class="s">'onChange'</span><span class="o">:</span> <span class="nx">@onChange</span>
|
||||
<span class="s">'value'</span><span class="o">:</span> <span class="nx">@state</span><span class="p">[</span><span class="s">'text'</span><span class="p">]</span>
|
||||
<span class="s">'autoFocus'</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="s">'ref'</span><span class="o">:</span> <span class="s">'textInput'</span>
|
||||
<span class="nx">@button</span> <span class="s">"Add </span><span class="err">#</span><span class="si">#{</span><span class="nx">@state</span><span class="p">[</span><span class="s">'items'</span><span class="p">].</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">1</span><span class="si">}</span><span class="s">"</span>
|
||||
<span class="p">]</span>
|
||||
<span class="p">]</span>
|
||||
</code></pre></div>
|
||||
<p><a href="https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee">Check it out on Github...</a></p>
|
||||
<h2 id="react-stylus-boilerplate">React Stylus Boilerplate</h2>
|
||||
<p><a href="http://zaim.github.io/">Zaim Bakar</a> shared his boilerplate to get started with Stylus CSS processor.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.</p>
|
||||
|
||||
<ul>
|
||||
<li>Very minimal HTML boilerplate</li>
|
||||
<li>Uses Stylus, with nib included</li>
|
||||
<li>Uses two build targets:
|
||||
|
||||
<ul>
|
||||
<li><code>grunt build</code> to compile JSX and Stylus into a development build</li>
|
||||
<li><code>grunt dist</code> to minify and optimize the development build for production</li>
|
||||
</ul></li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://github.com/zaim/react-stylus-boilerplate">Check it out on Github...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="webfui">WebFUI</h2>
|
||||
<p><a href="http://lisperati.com/">Conrad Barski</a>, author of the popular book <a href="http://landoflisp.com/">Land of Lisp</a>, wants to use React for his ClojureScript library called <a href="https://github.com/drcode/webfui">WebFUI</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I'm the author of "<a href="http://landoflisp.com/">Land of Lisp</a>" and I love your framework. I built a somewhat similar framework a year ago <a href="https://github.com/drcode/webfui">WebFUI</a> aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)</p>
|
||||
|
||||
<p>Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
|
||||
<figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="/react/img/blog/landoflisp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></h1>
|
||||
<p class="meta">July 30, 2013 by Paul O'Shannessy</p>
|
||||
@@ -285,57 +358,6 @@ If you were using React without JSX previously, your code should still work.</li
|
||||
</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>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<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>
|
||||
<h2 id="validation">Validation</h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</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">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</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="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</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">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2 id="default-values">Default Values</h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">value</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">value</span> <span class="o">||</span> <span class="s1">'default value'</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="nx">value</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>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+53
-76
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -85,6 +85,57 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<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>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<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>
|
||||
<h2 id="validation">Validation</h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">// An optional string prop named "description".</span>
|
||||
<span class="nx">description</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">// A required enum prop named "category".</span>
|
||||
<span class="nx">category</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="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named "dialog" that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</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">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2 id="default-values">Default Values</h2>
|
||||
<p>One common pattern we've seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">value</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">value</span> <span class="o">||</span> <span class="s1">'default value'</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="nx">value</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>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></h1>
|
||||
<p class="meta">July 3, 2013 by Vjeux</p>
|
||||
@@ -301,80 +352,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></h1>
|
||||
<p class="meta">June 19, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2 id="some-quick-thoughts-on-react">Some quick thoughts on React</h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-and-socket.io-chat-application">React and Socket.IO Chat Application</h2>
|
||||
<p><a href="http://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-and-other-frameworks">React and Other Frameworks</h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2 id="web-components-react-amp-x-tags">Web Components: React & x-tags</h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-todomvc-example">React TodoMVC Example</h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="jsx-is-not-html">JSX is not HTML</h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination">
|
||||
|
||||
|
||||
+76
-2
@@ -58,6 +58,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/10/16/react-v0.5.0.html">React v0.5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/10/03/community-roundup-9.html">Community Round-up #9</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/09/24/community-roundup-8.html">Community Round-up #8</a></li>
|
||||
@@ -76,8 +78,6 @@
|
||||
|
||||
<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/all.html">All posts ...</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -85,6 +85,80 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></h1>
|
||||
<p class="meta">June 19, 2013 by Vjeux</p>
|
||||
<hr />
|
||||
<div class="post">
|
||||
<p>Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.</p>
|
||||
<h2 id="some-quick-thoughts-on-react">Some quick thoughts on React</h2>
|
||||
<p><a href="http://www.andrewgreig.com/">Andrew Greig</a> made a blog post that gives a high level description of what React is.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>I have been using Facebooks recently released Javascript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.</p>
|
||||
|
||||
<p>Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.</p>
|
||||
|
||||
<p>It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.</p>
|
||||
|
||||
<p>I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.</p>
|
||||
|
||||
<p><a href="http://www.andrewgreig.com/637/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-and-socket.io-chat-application">React and Socket.IO Chat Application</h2>
|
||||
<p><a href="http://danialk.github.io/">Danial Khosravi</a> made a real-time chat application that interacts with the back-end using Socket.IO.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>A week ago I was playing with AngularJS and <a href="https://github.com/btford/angular-socket-io-im">this little chat application</a> which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in <a href="http://www.echojs.com/">EchoJS</a> and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
|
||||
<figure><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="/react/img/blog/chatapp.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-and-other-frameworks">React and Other Frameworks</h2>
|
||||
<p><a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]</p>
|
||||
|
||||
<p>We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.</p>
|
||||
|
||||
<p><a href="http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
|
||||
<p>In the same vein, <a href="https://twitter.com/markov_twain/status/345702941845499906">Markov Twain</a> re-implemented the examples on the front-page <a href="http://jsbin.com/azihiw/2/edit">with Ember</a> and <a href="https://twitter.com/vla">Vlad Yazhbin</a> re-implemented the tutorial <a href="http://jsfiddle.net/vla/Cdrse/">with Angular</a>.</p>
|
||||
<h2 id="web-components-react-amp-x-tags">Web Components: React & x-tags</h2>
|
||||
<p>Mozilla and Google are actively working on Web Components. <a href="http://blog.vjeux.com/">Vjeux</a> wrote a proof of concept that shows how to implement them using React.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Using <a href="http://www.x-tags.org/">x-tags</a> from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote <a href="https://github.com/vjeux/react-xtags/">x-react</a> to have them being rendered in React.
|
||||
<figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="/react/img/blog/xreact.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html">Read the full post...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="react-todomvc-example">React TodoMVC Example</h2>
|
||||
<p><a href="http://todomvc.com/">TodoMVC.com</a> is a website that collects various implementations of the same basic Todo app. <a href="http://www.petehunt.net/blog/">Pete Hunt</a> wrote an idiomatic React version.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.</p>
|
||||
|
||||
<p>To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
|
||||
<figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="/react/img/blog/todomvc.png" alt=""></a></figure></p>
|
||||
|
||||
<p><a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react">Read the source code...</a></p>
|
||||
</blockquote>
|
||||
<h2 id="jsx-is-not-html">JSX is not HTML</h2>
|
||||
<p>Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Whitespace removal</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">HTML Entities</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Comments</a></li>
|
||||
<li><a href="http://facebook.github.io/react/docs/jsx-is-not-html.html">Custom HTML Attributes</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></h1>
|
||||
<p class="meta">June 12, 2013 by Vjeux</p>
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -0,0 +1,439 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Add-ons</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Add-ons" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/docs/addons.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/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/addons.html" class="active">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-docs-section">
|
||||
<h3>Reference</h3>
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/top-level-api.html">
|
||||
Top-Level API
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-api.html">
|
||||
Component API
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/component-specs.html">
|
||||
Component Specs and Lifecycle
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/tags-and-attributes.html">
|
||||
Supported Tags and Attributes
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/events.html">
|
||||
Event System
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/dom-differences.html">
|
||||
DOM Differences
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Add-ons</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p><code>React.addons</code> is where we park some useful utilities for building React apps. <strong>These should be considered experimental</strong> but will eventually be rolled into core or a blessed utilities library.</p>
|
||||
<h2 id="css-animation-and-transitions">CSS Animation and Transitions</h2>
|
||||
<p><code>ReactTransitions</code> is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. <code>ReactTransitions</code> is inspired by the excellent <a href="http://www.nganimate.org/">ng-animate</a> library.</p>
|
||||
<h3 id="getting-started">Getting Started</h3>
|
||||
<p><code>ReactTransitionGroup</code> is the interface to <code>ReactTransitions</code>. This is a simple element that wraps all of the components you are interested in animating. Here's an example where we fade list items in and out.</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">ReactTransitionGroup</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">TransitionGroup</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">TodoList</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">items</span><span class="o">:</span> <span class="p">[</span><span class="s1">'hello'</span><span class="p">,</span> <span class="s1">'world'</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="s1">'me'</span><span class="p">]};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleAdd</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">newItems</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">items</span><span class="p">.</span><span class="nx">concat</span><span class="p">([</span><span class="nx">prompt</span><span class="p">(</span><span class="s1">'Enter some text'</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">items</span><span class="o">:</span> <span class="nx">newItems</span><span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">handleRemove</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">newItems</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">items</span><span class="p">;</span>
|
||||
<span class="nx">newItems</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="mi">0</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">items</span><span class="o">:</span> <span class="nx">newItems</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">items</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">items</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">item</span><span class="p">,</span> <span class="nx">i</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">div</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">i</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">handleRemove</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="nx">i</span><span class="p">)}</span><span class="o">></span>
|
||||
</span><span class="hll"> <span class="p">{</span><span class="nx">item</span><span class="p">}}</span>
|
||||
</span><span class="hll"> <span class="o"><</span><span class="err">/div></span>
|
||||
</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="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="nx">button</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">handleAdd</span><span class="p">}</span> <span class="o">/><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="nx">ReactTransitionGroup</span> <span class="nx">transitionName</span><span class="o">=</span><span class="s2">"example"</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="nx">items</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/ReactTransitionGroup></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 component, when a new item is added <code>ReactTransitionGroup</code> it will get the <code>example-enter</code> CSS class and the <code>example-enter-active</code> CSS class added in the next tick. This is a convention based on the <code>transitionName</code> prop.</p>
|
||||
|
||||
<p>You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:</p>
|
||||
<div class="highlight"><pre><code class="css language-css" data-lang="css"><span class="nc">.example-enter</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-enter.example-enter-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">99</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>You'll notice that when you try to remove an item <code>ReactTransitionGroup</code> keeps it in the DOM. If you're using an unminified build of React you'll see a warning that React was expecting an animation or transition to occur. That's because <code>ReactTransitionGroup</code> keeps your DOM elements on the page until the animation completes. Try adding this CSS:</p>
|
||||
<div class="highlight"><pre><code class="css language-css" data-lang="css"><span class="nc">.example-leave</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">99</span><span class="p">;</span>
|
||||
<span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">.5s</span> <span class="n">ease</span><span class="o">-</span><span class="n">in</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="nc">.example-leave.example-leave-active</span> <span class="p">{</span>
|
||||
<span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">01</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div><h3 id="disabling-animations">Disabling Animations</h3>
|
||||
<p>You can disable animating <code>enter</code> or <code>leave</code> animations if you want. For example, sometimes you may want an <code>enter</code> animation and no <code>leave</code> animation, but <code>ReactTransitionGroup</code> waits for an animation to complete before removing your DOM node. You can add <code>transitionEnter={false}</code> or <code>transitionLeave={false}</code> props to <code>ReactTransitionGroup</code> to disable these animations.</p>
|
||||
<h3 id="rendering-a-different-component">Rendering a Different Component</h3>
|
||||
<p>By default <code>ReactTransitionGroup</code> renders as a <code>span</code>. You can change this behavior by providing a <code>component</code> prop. For example, here's how you would render a <code><ul></code>:</p>
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">ReactTransitionGroup</span>
|
||||
<span class="nx">transitionName</span><span class="o">=</span><span class="s2">"example"</span>
|
||||
<span class="hll"> <span class="nx">component</span><span class="o">=</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">ul</span><span class="p">}</span><span class="o">></span>
|
||||
</span> <span class="p">...</span>
|
||||
<span class="o"><</span><span class="err">/ReactTransitionGroup></span>
|
||||
</code></pre></div>
|
||||
<p><code>component</code> does not need to be a DOM component. It can be any component you want; even one you've written yourself!</p>
|
||||
<h2 id="reactlink">ReactLink</h2>
|
||||
<p><code>ReactLink</code> is an easy way to express two-way binding with React.</p>
|
||||
|
||||
<p>In React, data flows one way: from owner to child. This is because data only flows one direction in <a href="http://en.wikipedia.org/wiki/Von_Neumann_architecture">the Von Neumann model of computing</a>. You can think of it as "one-way data binding."</p>
|
||||
|
||||
<p>However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React <code>state</code> when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.</p>
|
||||
|
||||
<p>In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call <code>setState()</code> on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See <a href="./forms.html">our forms documentation</a> for more information.</p>
|
||||
|
||||
<p>Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React <code>state</code> -- is concise and supports a wide variety of applications. We've provided <code>ReactLink</code>: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React <code>state</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>ReactLink is just a thin wrapper and convention around the <code>onChange</code>/<code>setState()</code> pattern. It doesn't fundamentally change how data flows in your React application.</p>
|
||||
</blockquote>
|
||||
<h3 id="reactlink-before-and-after">ReactLink: Before and After</h3>
|
||||
<p>Here's a simple form example without using <code>ReactLink</code>:</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">NoLink</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">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>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>This works really well and it's very clear how data is flowing, however with a lot of form fields it could get a bit verbose. Let's use <code>ReactLink</code> to save us some typing:</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">WithLink</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">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</span><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">value</span><span class="o">:</span> <span class="s1">'Hello!'</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="hll"> <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">valueLink</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">linkState</span><span class="p">(</span><span class="s1">'value'</span><span class="p">)}</span> <span class="o">/></span><span class="p">;</span>
|
||||
</span> <span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p><code>LinkedStateMixin</code> adds a method ot your React component called <code>linkState()</code>. <code>linkState()</code> returns a <code>ReactLink</code> object which contains the current value of the React state and a callback to change it.</p>
|
||||
|
||||
<p><code>ReactLink</code> objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.</p>
|
||||
<h3 id="under-the-hood">Under the Hood</h3>
|
||||
<p>There are two sides to <code>ReactLink</code>: the place where you create the <code>ReactLink</code> instance and the place where you use it. To prove how simple <code>ReactLink</code> is, let's rewrite each side separately to be more explicit.</p>
|
||||
<h4 id="reactlink-without-linkedstatemixin">ReactLink Without LinkedStateMixin</h4><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">WithoutMixin</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">value</span><span class="o">:</span> <span class="s1">'Hello!'</span><span class="p">};</span>
|
||||
<span class="p">},</span>
|
||||
<span class="hll"> <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">newValue</span><span class="p">)</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">value</span><span class="o">:</span> <span class="nx">newValue</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">valueLink</span> <span class="o">=</span> <span class="p">{</span>
|
||||
</span><span class="hll"> <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><span class="hll"> <span class="nx">requestChange</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span>
|
||||
</span><span class="hll"> <span class="p">};</span>
|
||||
</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">valueLink</span><span class="o">=</span><span class="p">{</span><span class="nx">valueLink</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>As you can see, <code>ReactLink</code> objects are very simple objects that just have a <code>value</code> and <code>requestChange</code> prop. And <code>LinkedStateMixin</code> is similarly simple: it just populates those fields with a value from <code>this.state</code> and a callback that calls <code>this.setState()</code>.</p>
|
||||
<h4 id="reactlink-without-valuelink">ReactLink Without valueLink</h4><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">WithoutLink</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">React</span><span class="p">.</span><span class="nx">addons</span><span class="p">.</span><span class="nx">LinkedStateMixin</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">value</span><span class="o">:</span> <span class="s1">'Hello!'</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">valueLink</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">linkState</span><span class="p">(</span><span class="s1">'value'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">handleChange</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="nx">valueLink</span><span class="p">.</span><span class="nx">requestChange</span><span class="p">(</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="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">valueLink</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="nx">handleChange</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>The <code>valueLink</code> prop is also quite simple. It simply handles the <code>onChange</code> event and calls <code>this.props.valueLink.requestChange()</code> and also uses <code>this.props.valueLink.value</code> instead of <code>this.props.value</code>. That's it!</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/tooling-integration.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/examples.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/addons.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>
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -234,8 +241,8 @@
|
||||
<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.1.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.1.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.5.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.5.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>
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
+9
-2
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html" class="active">
|
||||
Examples
|
||||
@@ -231,7 +238,7 @@
|
||||
<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>
|
||||
<li><a href="http://khanacademy.org/">Khan Academy</a> is using React for most new JS development.</li>
|
||||
</ul>
|
||||
<h3 id="sample-code">Sample Code</h3>
|
||||
<ul>
|
||||
@@ -245,7 +252,7 @@
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
<a class="docs-prev" href="/react/docs/tooling-integration.html">← Prev</a>
|
||||
<a class="docs-prev" href="/react/docs/addons.html">← Prev</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -238,8 +245,8 @@
|
||||
<p>Download the starter kit to get started.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.4.1.zip" class="button">
|
||||
Download Starter Kit 0.4.1
|
||||
<a href="/react/downloads/react-0.5.0.zip" class="button">
|
||||
Download Starter Kit 0.5.0
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -228,6 +235,12 @@
|
||||
<h1>JSX Gotchas</h1>
|
||||
<div class="subHeader"></div>
|
||||
<p>JSX looks like HTML but there are some important differences you may run into.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>For DOM differences, such as the inline <code>style</code> attribute, check <a href="dom-differences.html">here</a>.</p>
|
||||
</blockquote>
|
||||
<h2 id="whitespace-removal">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>
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -234,30 +241,30 @@
|
||||
<h3 id="html-elements">HTML Elements</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">a abbr address area article aside audio b base bdi bdo big blockquote body br
|
||||
button canvas caption cite code col colgroup data datalist dd del details dfn
|
||||
div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6
|
||||
head header hr html i iframe img input ins kbd keygen label legend li link
|
||||
main map mark menu menuitem meta meter nav noscript object ol optgroup option
|
||||
output p param pre progress q rp rt ruby s samp script section select small
|
||||
source span strong style sub summary sup table tbody td textarea tfoot th
|
||||
thead time title tr track u ul var video wbr
|
||||
head header hr html i iframe img input ins kbd keygen label legend li link main
|
||||
map mark menu menuitem meta meter nav noscript object ol optgroup option output
|
||||
p param pre progress q rp rt ruby s samp script section select small source
|
||||
span strong style sub summary sup table tbody td textarea tfoot th thead time
|
||||
title tr track u ul var video wbr
|
||||
</code></pre></div><h3 id="svg-elements">SVG elements</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">circle g line path polyline rect svg text
|
||||
</code></pre></div><h2 id="supported-attributes">Supported Attributes</h2>
|
||||
<p>React supports all <code>data-*</code> and <code>aria-*</code> attributes as well as every attribute
|
||||
in the following lists. Note that all attributes are camel-cased and the attributes <code>class</code> and <code>for</code> are <code>className</code> and <code>htmlFor</code>, respectively, to match the DOM API specification.</p>
|
||||
|
||||
<p>For a list of events, see <a href="events.html">Supported Events</a>.</p>
|
||||
<h3 id="html-attributes">HTML Attributes</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">accessKey accept action ajaxify allowFullScreen allowTransparency alt
|
||||
<h3 id="html-attributes">HTML Attributes</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">accept accessKey action allowFullScreen allowTransparency alt autoCapitalize
|
||||
autoComplete autoFocus autoPlay cellPadding cellSpacing charSet checked
|
||||
className colSpan content contentEditable contextMenu controls data dateTime
|
||||
dir disabled draggable encType form frameBorder height hidden href htmlFor
|
||||
httpEquiv icon id label lang list max maxLength method min multiple name
|
||||
pattern poster preload placeholder radioGroup rel readOnly required role
|
||||
pattern placeholder poster preload radioGroup readOnly rel required role
|
||||
rowSpan scrollLeft scrollTop selected size spellCheck src step style tabIndex
|
||||
target title type value width wmode
|
||||
</code></pre></div>
|
||||
<p>In addition, the non-standard <code>autoCapitalize</code> attribute is supported for Mobile Safari.</p>
|
||||
<h3 id="svg-attributes">SVG Attributes</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">cx cy d fill fx fy points r stroke strokeLinecap strokeWidth transform x x1 x2
|
||||
version viewBox y y1 y2 spreadMethod offset stopColor stopOpacity
|
||||
gradientUnits gradientTransform
|
||||
<h3 id="svg-attributes">SVG Attributes</h3><div class="highlight"><pre><code class="text language-text" data-lang="text">cx cy d fill fx fy gradientTransform gradientUnits offset points r rx ry
|
||||
spreadMethod stopColor stopOpacity stroke strokeLinecap strokeWidth transform
|
||||
version viewBox x1 x2 x y1 y2 y
|
||||
</code></pre></div>
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -261,7 +268,7 @@
|
||||
<a class="docs-prev" href="/react/docs/more-about-refs.html">← Prev</a>
|
||||
|
||||
|
||||
<a class="docs-next" href="/react/docs/examples.html">Next →</a>
|
||||
<a class="docs-next" href="/react/docs/addons.html">Next →</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
+11
-4
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
@@ -252,8 +259,8 @@
|
||||
<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.1.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.1.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.5.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.5.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>
|
||||
@@ -393,8 +400,8 @@
|
||||
<div class="highlight"><pre><code class="html language-html" data-lang="html"><span class="c"><!-- template.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.1.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.1.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.5.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.5.0.js"</span><span class="nt">></script></span>
|
||||
<span class="hll"> <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"</span><span class="nt">></script></span>
|
||||
</span><span class="nt"></head></span>
|
||||
</code></pre></div>
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
@@ -162,6 +162,13 @@
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/addons.html">
|
||||
Add-ons
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/react/docs/examples.html">
|
||||
Examples
|
||||
|
||||
+8
-8
@@ -60,19 +60,19 @@
|
||||
<a href="/react/docs/getting-started.html">get started with React</a>.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
<a href="/react/downloads/react-0.4.1.zip" class="button">
|
||||
Download Starter Kit 0.4.1
|
||||
<a href="/react/downloads/react-0.5.0.zip" class="button">
|
||||
Download Starter Kit 0.5.0
|
||||
</a>
|
||||
</div>
|
||||
<h2 id="individual-downloads">Individual Downloads</h2><h4 id="react-core-0.4.1-production"><a href="http://fb.me/react-0.4.1.min.js">React Core 0.4.1 (production)</a></h4>
|
||||
<h2 id="individual-downloads">Individual Downloads</h2><h4 id="react-core-0.5.0-production"><a href="http://fb.me/react-0.5.0.min.js">React Core 0.5.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.4.1.min.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4 id="react-core-0.4.1-development"><a href="http://fb.me/react-0.4.1.js">React Core 0.4.1 (development)</a></h4>
|
||||
<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.5.0.min.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4 id="react-core-0.5.0-development"><a href="http://fb.me/react-0.5.0.js">React Core 0.5.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.4.1.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4 id="jsx-transform"><a href="http://fb.me/JSXTransformer-0.4.1.js">JSX Transform</a></h4>
|
||||
<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.5.0.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div><h4 id="jsx-transform"><a href="http://fb.me/JSXTransformer-0.5.0.js">JSX Transform</a></h4>
|
||||
<p>The JSX transformer used to support <a href="/react/docs/jsx-in-depth.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.4.1.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.5.0.js"</span><span class="nt">></script></span>
|
||||
</code></pre></div>
|
||||
<p>All scripts are also available via <a href="http://cdnjs.com/#react">CDNJS</a>.</p>
|
||||
<h2 id="bower">Bower</h2><div class="highlight"><pre><code class="sh language-sh" data-lang="sh"><span class="nv">$ </span>bower install --save react
|
||||
|
||||
Binary file not shown.
@@ -6,6 +6,55 @@
|
||||
<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.5</title>
|
||||
<description><p>This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we&#39;ve worked hard to improve performance and memory usage. We&#39;ve also worked hard to make sure we are being consistent in our usage of DOM properties.</p>
|
||||
|
||||
<p>The biggest change you&#39;ll notice as a developer is that we no longer support <code>class</code> in JSX as a way to provide CSS classes. Since this prop was being converted to <code>className</code> at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are <a href="https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156">a few exceptions</a> where we deviate slightly in an attempt to be consistent internally.</p>
|
||||
|
||||
<p>The other major change in v0.5 is that we&#39;ve added an additional build - <code>react-with-addons</code> - which adds support for some extras that we&#39;ve been working on including animations and two-way binding. <a href="/react/docs/addons.html">Read more about these addons in the docs</a>.</p>
|
||||
<h2 id="thanks-to-our-community">Thanks to Our Community</h2>
|
||||
<p>We added <em>22 new people</em> to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our <code>AUTHORS</code> file, that means we&#39;ve nearly doubled the number of contributors in that time period. We&#39;ve seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We&#39;ve also had people tell us about talks they&#39;ve given in their local community about React.</p>
|
||||
|
||||
<p>It&#39;s been awesome to see the things that people are building with React, and we can&#39;t wait to see what you come up with next!</p>
|
||||
<h2 id="changelog">Changelog</h2><h3 id="react">React</h3>
|
||||
<ul>
|
||||
<li>Memory usage improvements - reduced allocations in core which will help with GC pauses</li>
|
||||
<li>Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.</li>
|
||||
<li>Standardized prop -&gt; DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.</li>
|
||||
<li>Support for Selection events.</li>
|
||||
<li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent">Composition events</a>.</li>
|
||||
<li>Support for additional DOM properties (<code>charSet</code>, <code>content</code>, <code>form</code>, <code>httpEquiv</code>, <code>rowSpan</code>, <code>autoCapitalize</code>).</li>
|
||||
<li>Support for additional SVG properties (<code>rx</code>, <code>ry</code>).</li>
|
||||
<li>Support for using <code>getInitialState</code> and <code>getDefaultProps</code> in mixins.</li>
|
||||
<li>Support mounting into iframes.</li>
|
||||
<li>Bug fixes for controlled form components.</li>
|
||||
<li>Bug fixes for SVG element creation.</li>
|
||||
<li>Added <code>React.version</code>.</li>
|
||||
<li>Added <code>React.isValidClass</code> - Used to determine if a value is a valid component constructor.</li>
|
||||
<li>Removed <code>React.autoBind</code> - This was deprecated in v0.4 and now properly removed.</li>
|
||||
<li>Renamed <code>React.unmountAndReleaseReactRootNode</code> to <code>React.unmountComponentAtNode</code>.</li>
|
||||
<li>Began laying down work for refined performance analysis.</li>
|
||||
<li>Better support for server-side rendering - <a href="https://github.com/facebook/react-page">react-page</a> has helped improve the stability for server-side rendering.</li>
|
||||
<li>Made it possible to use React in environments enforcing a strict <a href="https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a>. This also makes it possible to use React to build Chrome extensions.</li>
|
||||
</ul>
|
||||
<h3 id="react-with-addons-new">React with Addons (New!)</h3>
|
||||
<ul>
|
||||
<li>Introduced a separate build with several &quot;addons&quot; which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. <a href="/react/docs/addons.html">Read more in the docs</a>.</li>
|
||||
</ul>
|
||||
<h3 id="jsx">JSX</h3>
|
||||
<ul>
|
||||
<li>No longer transform <code>class</code> to <code>className</code> as part of the transform! This is a breaking change - if you were using <code>class</code>, you <em>must</em> change this to <code>className</code> or your components will be visually broken.</li>
|
||||
<li>Added warnings to the in-browser transformer to make it clear it is not intended for production use.</li>
|
||||
<li>Improved compatibility for Windows</li>
|
||||
<li>Improved support for maintaining line numbers when transforming.</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-10-16T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/10/16/react-v0.5.0.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Community Round-up #9</title>
|
||||
<description><p>We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we&#39;ll probably organize more in the future.</p>
|
||||
@@ -542,55 +591,5 @@ If you were using React without JSX previously, your code should still work.<
|
||||
<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>
|
||||
<h2 id="validation">Validation</h2>
|
||||
<p>Oftentimes you want to validate your <code>props</code> before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your <code>render</code> or <code>componentWillReceiveProps</code> functions, but that gets clunky fast.</p>
|
||||
|
||||
<p>React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">// An optional string prop named &quot;description&quot;.</span>
|
||||
<span class="nx">description</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">// A required enum prop named &quot;category&quot;.</span>
|
||||
<span class="nx">category</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">&#39;News&#39;</span><span class="p">,</span><span class="s1">&#39;Photos&#39;</span><span class="p">]).</span><span class="nx">isRequired</span><span class="p">,</span>
|
||||
|
||||
<span class="c1">// A prop named &quot;dialog&quot; that requires an instance of Dialog.</span>
|
||||
<span class="nx">dialog</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">Dialog</span><span class="p">).</span><span class="nx">isRequired</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div><h2 id="default-values">Default Values</h2>
|
||||
<p>One common pattern we&#39;ve seen with our React code is to do something like this:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">value</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">value</span> <span class="o">||</span> <span class="s1">&#39;default value&#39;</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">value</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>Do this for a few <code>props</code> across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:</p>
|
||||
<div class="highlight"><pre><code class="js language-js" data-lang="js"><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">&#39;default value&#39;</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">...</span>
|
||||
<span class="p">});</span>
|
||||
</code></pre></div>
|
||||
<p>We will use the cached result of this function before each <code>render</code>. We also perform all validations before each <code>render</code> to ensure that you have all of the data you need in the right form before you try to use it.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>Both of these features are entirely optional. We&#39;ve found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.</p>
|
||||
</description>
|
||||
<pubDate>2013-07-11T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
+2
-2
@@ -60,7 +60,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.4.1</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v0.5.0</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -146,7 +146,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.4.1</a>
|
||||
<a href="downloads.html" class="button">Download React v0.5.0</a>
|
||||
</div>
|
||||
</section></p>
|
||||
|
||||
|
||||
+4719
-1599
File diff suppressed because it is too large
Load Diff
+7
-7
@@ -44,7 +44,7 @@ var CodeMirrorEditor = React.createClass({displayName: 'CodeMirrorEditor',
|
||||
}
|
||||
|
||||
return (
|
||||
React.DOM.div( {className:this.props.className},
|
||||
React.DOM.div( {class:this.props.className},
|
||||
editor
|
||||
)
|
||||
);
|
||||
@@ -76,22 +76,22 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
content =
|
||||
CodeMirrorEditor(
|
||||
{onChange:this.bindState('code'),
|
||||
className:"playgroundStage",
|
||||
class:"playgroundStage",
|
||||
codeText:this.state.code}
|
||||
);
|
||||
} else if (this.state.mode === this.MODES.JS) {
|
||||
content =
|
||||
React.DOM.div( {className:"playgroundJS playgroundStage"},
|
||||
React.DOM.div( {class:"playgroundJS playgroundStage"},
|
||||
this.getDesugaredCode()
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
React.DOM.div( {className:"playground"},
|
||||
React.DOM.div( {className:"playgroundCode"},
|
||||
React.DOM.div( {class:"playground"},
|
||||
React.DOM.div( {class:"playgroundCode"},
|
||||
content
|
||||
),
|
||||
React.DOM.div( {className:"playgroundPreview"},
|
||||
React.DOM.div( {class:"playgroundPreview"},
|
||||
React.DOM.div( {ref:"mount"} )
|
||||
)
|
||||
)
|
||||
@@ -121,7 +121,7 @@ var ReactPlayground = React.createClass({displayName: 'ReactPlayground',
|
||||
}
|
||||
} catch (e) {
|
||||
React.renderComponent(
|
||||
React.DOM.div( {content:e.toString(), className:"playgroundError"} ),
|
||||
React.DOM.div( {content:e.toString(), class:"playgroundError"} ),
|
||||
mountNode
|
||||
);
|
||||
}
|
||||
|
||||
Vendored
+4
-4
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user